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

package/src/components/Modal/Modal.styles.ts

@@ -12,3 +12,22 @@ export const footerStyles = {
     gap: 4,
   },
 };
+
+/**
+ * The Modal's own enter and exit movement.
+ *
+ * Only the two keyframe *names* are here — the clock comes from the shared
+ * `presence` preset, which every surface with an open and a closed state
+ * carries. That split is what keeps the Modal on the house 2:1 enter/exit ratio
+ * without restating the numbers, while the movement itself stays bespoke: no
+ * other surface enters by rising toward the reader.
+ *
+ * Reduced motion is `presence`'s too — it swaps both names for a plain fade
+ * rather than zeroing the duration, because a surface that appears with no
+ * transition at all reads as a page swap. The movement is what has to go, not
+ * the fact that something changed.
+ */
+export const modalAnimation = {
+  _open: { animationName: 'modal-in' },
+  _closed: { animationName: 'modal-out' },
+};

package/src/components/Modal/Modal.tsx

@@ -9,10 +9,14 @@ export const Modal = ({
   open,
   onOpenChange,
   portalProps,
-  fullScreenOnMobile = true,
+  fullScreenOnMobile = false,
+  headerTone = 'default',
   ...rest
 }: ModalProps) => {
-  const ctx = useMemo(() => ({ fullScreenOnMobile }), [fullScreenOnMobile]);
+  const ctx = useMemo(
+    () => ({ fullScreenOnMobile, headerTone }),
+    [fullScreenOnMobile, headerTone]
+  );
 
   return (
     <Dialog.Root
@@ -23,7 +27,13 @@ export const Modal = ({
       {...rest}
     >
       <Portal {...portalProps}>
-        <Dialog.Backdrop />
+        {/* `ModalOverlay` is exported but `Modal` does not use it, so the
+            timing has to be set here as well or the default path keeps
+            Chakra's 200ms exit and the scrim outlasts the dialog. */}
+        <Dialog.Backdrop
+          _open={{ animationDuration: 'motion.base' }}
+          _closed={{ animationDuration: 'fast' }}
+        />
         <ModalContext.Provider value={ctx}>{children}</ModalContext.Provider>
       </Portal>
     </Dialog.Root>

package/src/components/Modal/Modal.types.ts

@@ -1,12 +1,33 @@
 import { Dialog, PortalProps } from '@chakra-ui/react';
 
+/**
+ * `'brand'` paints the header a neutral `layer.3` band with a
+ * `secondary.border` bottom rule (the subtitle stays `fg.muted`) for a modal that
+ * wants brand presence up top — an onboarding step, a celebratory confirm.
+ * `'default'` (the default) leaves the header unstyled, matching the body.
+ */
+export type ModalHeaderTone = 'default' | 'brand';
+
 export type ModalProps = Dialog.RootProps & {
   // Allows passing props to the Portal component for more control over where the modal is rendered
   // Added for backwards compatibility.
   portalProps?: PortalProps;
   /**
-   * When true, the modal becomes fullscreen on mobile viewports.
-   * @default true
+   * Styles `ModalHeader` as a brand band instead of the plain default.
+   * @default 'default'
+   */
+  headerTone?: ModalHeaderTone;
+  /**
+   * When true, the modal becomes fullscreen on mobile viewports
+   * (100vw x 100dvh, no border-radius). When false it keeps the dialog
+   * shape and applies a horizontal margin instead.
+   *
+   * Defaults to false: a full-screen takeover suits long or immersive
+   * content (a file picker, a course switcher), not the confirm dialogs
+   * and short forms that make up most modals. Opt in where the takeover
+   * is the point.
+   *
+   * @default false
    */
   fullScreenOnMobile?: boolean;
 };

package/src/components/Modal/ModalContent/ModalContent.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Dialog } from '@chakra-ui/react';
 
 import { ScaledContext } from '../../ScaledContext';
+import { modalAnimation } from '../Modal.styles';
 import { useModalContext } from '../ModalContext';
 import { ModalContentProps } from './ModalContent.types';
 
@@ -27,7 +28,15 @@ export const ModalContent = ({ children, ...rest }: ModalContentProps) => {
 
   return (
     <Dialog.Positioner>
-      <Dialog.Content mdDown={mobileStyles} {...rest}>
+      {/* Enters from slightly lower and smaller, leaves in half the time by
+          shrinking in place. Chakra's default preset already exits in half its
+          enter time; this keeps that ratio and adds the travel and the curve. */}
+      <Dialog.Content
+        animationStyle="presence"
+        css={modalAnimation}
+        mdDown={mobileStyles}
+        {...rest}
+      >
         <ScaledContext fontSize="14px" css={{ display: 'contents' }}>
           {children}
         </ScaledContext>

package/src/components/Modal/ModalContext.ts

@@ -2,12 +2,16 @@
 
 import { createContext, useContext } from 'react';
 
+import { ModalHeaderTone } from './Modal.types';
+
 interface ModalContextValue {
   fullScreenOnMobile: boolean;
+  headerTone: ModalHeaderTone;
 }
 
 export const ModalContext = createContext<ModalContextValue>({
-  fullScreenOnMobile: true,
+  fullScreenOnMobile: false,
+  headerTone: 'default',
 });
 
 export const useModalContext = () => useContext(ModalContext);

package/src/components/Modal/ModalHeader.a11y.test.tsx

@@ -0,0 +1,51 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Modal } from './Modal';
+import { ModalContent } from './ModalContent';
+import { ModalHeader } from './ModalHeader';
+
+const renderModal = (header: React.ReactNode) =>
+  render(
+    <ChakraProvider value={system}>
+      <Modal open>
+        <ModalContent>{header}</ModalContent>
+      </Modal>
+    </ChakraProvider>
+  );
+
+describe('ModalHeader', () => {
+  it('names the dialog with the title and describes it with the subtitle', async () => {
+    renderModal(<ModalHeader subtitle="s">T</ModalHeader>);
+    const dialog = await screen.findByRole('dialog', { name: 'T' });
+    expect(dialog).toHaveAccessibleDescription('s');
+  });
+
+  it('stacks the subtitle under the title', async () => {
+    renderModal(<ModalHeader subtitle="s">T</ModalHeader>);
+    await screen.findByRole('dialog');
+    const header = screen.getByText('s').parentElement!;
+    expect(getComputedStyle(header).flexDirection).toBe('column');
+  });
+
+  it('text mixed with expressions is one title heading', async () => {
+    const where = 'Top';
+    renderModal(<ModalHeader>Placement: {where}</ModalHeader>);
+    await screen.findByRole('dialog', { name: 'Placement: Top' });
+    expect(
+      screen.getByRole('heading', { name: 'Placement: Top' })
+    ).toBeInTheDocument();
+  });
+
+  it('a caller heading is not nested inside another heading', async () => {
+    renderModal(
+      <ModalHeader>
+        <h3>Own heading</h3>
+      </ModalHeader>
+    );
+    await screen.findByRole('dialog', { name: 'Own heading' });
+    expect(screen.getAllByRole('heading')).toHaveLength(1);
+  });
+});

package/src/components/Modal/ModalHeader.tsx

@@ -1,7 +1,49 @@
-import React from 'react';
+import React, { Fragment, isValidElement, ReactNode } from 'react';
 import { Dialog } from '@chakra-ui/react';
 
-export const ModalHeader = ({ ...rest }: Dialog.HeaderProps) => {
+import { Subtext } from '../Typography';
+import { useModalContext } from './ModalContext';
+
+export type ModalHeaderProps = Dialog.HeaderProps & {
+  /**
+   * Optional line under the title, in `fg.muted` (on the brand band too —
+   * `secondary.fgStrong` on `layer.3` misses 7:1 in high-contrast dark). Rendered as the dialog's
+   * description, so the dialog gets `aria-describedby` pointing at it.
+   */
+  subtitle?: ReactNode;
+};
+
+/**
+ * The title takes the header's own type (`textStyle="h4"`) instead of the
+ * recipe's `textStyle: lg` / `semibold`, so wrapping it changes nothing on
+ * screen.
+ */
+const inheritType = {
+  fontSize: 'inherit',
+  fontWeight: 'inherit',
+  lineHeight: 'inherit',
+  letterSpacing: 'inherit',
+} as const;
+
+/**
+ * The dialog header: the children are the dialog's title and `subtitle` sits
+ * under it.
+ *
+ * Children become `Dialog.Title`, which gives the dialog its accessible name
+ * (`aria-labelledby`). Text — a string, or text mixed with expressions — is
+ * rendered as the title heading (`h2`). A single element is the caller's own
+ * markup, possibly its own heading, so it is wrapped in a `div` carrying the
+ * title id instead of being nested inside an `h2`.
+ */
+export const ModalHeader = ({
+  subtitle,
+  children,
+  ...rest
+}: ModalHeaderProps) => {
+  const { headerTone } = useModalContext();
+  const isBrand = headerTone === 'brand';
+  const isOwnMarkup = isValidElement(children) && children.type !== Fragment;
+
   return (
     <Dialog.Header
       textStyle="h4"
@@ -9,7 +51,35 @@ export const ModalHeader = ({ ...rest }: Dialog.HeaderProps) => {
       pt={4}
       pb={3}
       borderTopRadius="l3"
+      // The recipe lays the header out as a row (`display: flex`, `gap: 2`),
+      // which put the subtitle to the right of the title.
+      flexDirection="column"
+      alignItems="flex-start"
+      gap={0}
+      // Brand band: a neutral `layer.3` ground (≥ 1.13:1 off the panel in every
+      // mode) with a `secondary.border` rule carrying the brand. Not the sand
+      // `secondary.surface*` tint — that is accent-only, never a background.
+      {...(isBrand && {
+        bg: 'layer.3',
+        borderBottomWidth: '1px',
+        borderBottomColor: 'secondary.border',
+      })}
       {...rest}
-    />
+    >
+      {isOwnMarkup ? (
+        <Dialog.Title asChild {...inheritType}>
+          <div>{children}</div>
+        </Dialog.Title>
+      ) : (
+        <Dialog.Title {...inheritType}>{children}</Dialog.Title>
+      )}
+      {subtitle && (
+        <Dialog.Description asChild>
+          <Subtext mt={1} fontWeight="normal" color="fg.muted">
+            {subtitle}
+          </Subtext>
+        </Dialog.Description>
+      )}
+    </Dialog.Header>
   );
 };

package/src/components/Modal/ModalOverlay.tsx

@@ -2,5 +2,13 @@ import React from 'react';
 import { Dialog } from '@chakra-ui/react';
 
 export const ModalOverlay = ({ ...rest }: Dialog.BackdropProps) => {
-  return <Dialog.Backdrop {...rest} />;
+  // Chakra's backdrop leaves over 200ms while the content now leaves over 150,
+  // so the scrim would linger after the dialog is gone. Same clock, both ways.
+  return (
+    <Dialog.Backdrop
+      _open={{ animationDuration: 'motion.base' }}
+      _closed={{ animationDuration: 'fast' }}
+      {...rest}
+    />
+  );
 };

package/src/components/Modal/index.tsx

@@ -1,9 +1,9 @@
 export { Modal } from './Modal';
-export { type ModalProps } from './Modal.types';
+export { type ModalHeaderTone, type ModalProps } from './Modal.types';
 export { ModalBody } from './ModalBody';
 export { ModalCloseButton } from './ModalCloseButton';
 export { ModalContent } from './ModalContent';
 export { useModalContext } from './ModalContext';
 export { ModalFooter } from './ModalFooter';
-export { ModalHeader } from './ModalHeader';
+export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
 export { ModalOverlay } from './ModalOverlay';

package/src/components/MonthPicker/MonthButton/MonthButton.tsx

@@ -1,10 +1,7 @@
 import React, { memo } from 'react';
 
 import { Button } from '@/components/Button';
-import {
-  ButtonColorPalette,
-  ButtonVariant,
-} from '@/components/Button/Button.types';
+import { ButtonVariant } from '@/components/Button/Button.types';
 
 import {
   isMonthDisabled,
@@ -17,7 +14,6 @@ import { MonthRange } from '../MonthPicker.types';
 import { MonthButtonProps } from './MonthButton.types';
 
 type MonthButtonStyle = {
-  colorScheme: ButtonColorPalette;
   variant: ButtonVariant;
 };
 
@@ -63,17 +59,17 @@ export const MonthButton: React.FC<MonthButtonProps> = memo(
       selectionStart?: Date | null,
       hoveredMonth?: { month: number; year: number } | null
     ): MonthButtonStyle => {
-      // Selected months get solid primary
+      // Selected months get the primary fill
       if (isMonthSelected(month, year, selectedRange)) {
-        return { colorScheme: 'primary', variant: 'solid' };
+        return { variant: 'primary' };
       }
       if (isSelectionStart(month, year, selectionStart)) {
-        return { colorScheme: 'primary', variant: 'solid' };
+        return { variant: 'primary' };
       }
 
-      // In-range months get soft primary
+      // In-range months get the subtle wash
       if (isMonthInRange(month, year, selectedRange)) {
-        return { colorScheme: 'primary', variant: 'soft' };
+        return { variant: 'subtle' };
       }
 
       // Preview range when hovering with a selection start
@@ -85,11 +81,11 @@ export const MonthButton: React.FC<MonthButtonProps> = memo(
           hoveredMonth || null
         )
       ) {
-        return { colorScheme: 'primary', variant: 'soft' };
+        return { variant: 'subtle' };
       }
 
-      // Default: ghost neutral
-      return { colorScheme: 'neutral', variant: 'outline' };
+      // Default: outlined
+      return { variant: 'secondary' };
     };
 
     const style = getMonthButtonStyle(
@@ -103,7 +99,6 @@ export const MonthButton: React.FC<MonthButtonProps> = memo(
     return (
       <Button
         size="sm"
-        colorPalette={style.colorScheme}
         variant={style.variant}
         onClick={handleClick}
         onMouseEnter={handleMouseEnter}

package/src/components/MonthPicker/MonthPicker.stories.tsx

@@ -42,16 +42,20 @@ const meta = {
           {selectedRange && (
             <Box
               p={3}
-              bg="green.50"
+              bg="success.bg"
               borderRadius="md"
               width="100%"
               border="1px solid"
-              borderColor="green.200"
+              borderColor="success.border"
             >
-              <Text textStyle="subtext" fontWeight="semibold" color="green.700">
+              <Text
+                textStyle="subtext"
+                fontWeight="semibold"
+                color="success.fg"
+              >
                 ✓ Range Selected:
               </Text>
-              <Text textStyle="subtext" color="green.600">
+              <Text textStyle="subtext" color="success.fg">
                 {selectedRange.startMonth.toLocaleDateString()}
                 {selectedRange.endMonth ? (
                   <> - {selectedRange.endMonth.toLocaleDateString()}</>
@@ -93,7 +97,7 @@ export const WithConstraints: Story = {
         <Text fontWeight="semibold" mb={2}>
           With Date Constraints
         </Text>
-        <Text textStyle="subtext" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="fg.muted" mb={4}>
           Only allows selection 6 months before/after current date
         </Text>
       </Box>
@@ -111,7 +115,7 @@ export const Disabled: Story = {
         <Text fontWeight="semibold" mb={2}>
           Disabled State
         </Text>
-        <Text textStyle="subtext" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="fg.muted" mb={4}>
           The picker is disabled and cannot be interacted with
         </Text>
       </Box>
@@ -130,7 +134,7 @@ export const CustomFormat: Story = {
         <Text fontWeight="semibold" mb={2}>
           Custom Date Format
         </Text>
-        <Text textStyle="subtext" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="fg.muted" mb={4}>
           Uses full month names (MMMM yyyy) instead of abbreviated
         </Text>
       </Box>
@@ -145,11 +149,11 @@ export const CrossYearSelection: Story = {
         <Text fontWeight="semibold" mb={2}>
           Cross-Year Range Selection
         </Text>
-        <Text textStyle="subtext" color="gray.600" mb={4}>
+        <Text textStyle="subtext" color="fg.muted" mb={4}>
           Demonstrates selecting ranges across different years with immediate
           feedback.
         </Text>
-        <Box textStyle="subtext" color="gray.700">
+        <Box textStyle="subtext" color="fg.default">
           <Text>
             • Click a month to start selection (shows immediately in input)
           </Text>

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,9 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { Box, VStack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Pagination } from './Pagination';
-import { PaginationProps } from './Pagination.types';
-import { useState } from 'react';
 
 const meta = {
   title: 'Components/Pagination',
@@ -75,7 +74,7 @@ export const AtPageTop: Story = {
             onItemsPerPageOptionChange={setItemsPerPage}
           />
         </Box>
-        <Box flex={1} bg="gray.50" p={4}>
+        <Box flex={1} bg="bg.subtle" p={4}>
           페이지 상단에 위치한 Pagination입니다. Select 드롭다운이 아래로
           열립니다.
         </Box>
@@ -91,7 +90,7 @@ export const AtPageBottom: Story = {
 
     return (
       <VStack align="stretch" gap={4} h="100vh">
-        <Box flex={1} bg="gray.50" p={4}>
+        <Box flex={1} bg="bg.subtle" p={4}>
           페이지 하단에 위치한 Pagination입니다. Select 드롭다운이 위로
           열립니다.
         </Box>
@@ -129,7 +128,7 @@ export const InScrollableContainer: Story = {
     );
 
     return (
-      <Box h="100vh" overflow="auto" bg="gray.50">
+      <Box h="100vh" overflow="auto" bg="bg.subtle">
         <VStack align="stretch" gap={8} p={4}>
           <Box bg="white" p={4} borderRadius="md" shadow="sm">
             <Pagination

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';
@@ -81,6 +81,11 @@ export const Pagination = ({
             <SelectField<number>
               size="sm"
               width="5.5rem"
+              // The visible label for this control is the "개씩 보기" text beside
+              // it, which the select itself cannot claim — so it carries the
+              // same words as its own hidden label rather than shipping
+              // nameless (KWCAG 5.3.4.1 레이블 제공).
+              ariaLabel={translate('pagination_items_per_page') as string}
               options={itemsPerPageOptions.map((option) => ({
                 label: option.toString(),
                 value: option,
@@ -101,24 +106,22 @@ export const Pagination = ({
         {maxPage > 1 && (
           <Flex align="center">
             <IconButton
-              colorPalette="neutral"
               variant="ghost"
               aria-label={translate('previous') as string}
               onClick={handleBack}
               disabled={currentPage <= 1}
               color={currentPage === 1 ? 'fg.subtle' : 'fg.muted'}
             >
-              <IoIosArrowBack boxSize="sm" />
+              <ChevronLeftIcon boxSize="sm" />
             </IconButton>
             <IconButton
-              colorPalette="neutral"
               variant="ghost"
               aria-label={translate('go_next_page_button') as string}
               onClick={handleNext}
               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/PinInput/PinInput.stories.tsx

@@ -11,6 +11,14 @@ const meta = {
   },
   argTypes: {
     length: { control: 'number' },
+    type: {
+      control: 'select',
+      options: ['numeric', 'alphanumeric', 'alphabetic'],
+    },
+    autoFocus: { control: 'boolean' },
+    otp: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    invalid: { control: 'boolean' },
   },
 } satisfies Meta<typeof PinInput>;
 
@@ -18,13 +26,32 @@ export default meta;
 
 type Story = StoryObj<typeof PinInput>;
 
-export const Basic: Story = {
-  args: {
-    length: 5,
-  },
-  render: (args) => {
-    const [value, setValue] = useState('');
+const Controlled = (args: React.ComponentProps<typeof PinInput>) => {
+  const [value, setValue] = useState('');
+  return <PinInput {...args} value={value} onChange={setValue} />;
+};
 
-    return <PinInput {...args} value={value} onChange={setValue} />;
-  },
-}
+export const Numeric: Story = {
+  args: { length: 6, type: 'numeric' },
+  render: (args) => <Controlled {...args} />,
+};
+
+export const Alphanumeric: Story = {
+  args: { length: 6, type: 'alphanumeric' },
+  render: (args) => <Controlled {...args} />,
+};
+
+export const Otp: Story = {
+  args: { length: 6, type: 'numeric', otp: true, autoFocus: true },
+  render: (args) => <Controlled {...args} />,
+};
+
+export const Disabled: Story = {
+  args: { length: 5, disabled: true },
+  render: (args) => <Controlled {...args} />,
+};
+
+export const Invalid: Story = {
+  args: { length: 5, invalid: true },
+  render: (args) => <Controlled {...args} />,
+};