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

package/src/components/Modal/Modal.stories.tsx

@@ -482,13 +482,14 @@ export const PreventOutsideClick: Story = {
 /**
  * 모바일 풀스크린 모달 (기본값)
  *
- * fullScreenOnMobile이 true(기본값)이면 모바일 뷰포트에서
+ * fullScreenOnMobile을 true로 주면 모바일 뷰포트에서
  * 모달이 전체 화면으로 표시됩니다 (100vw × 100dvh, border-radius 0).
+ * 기본값은 false이니 전체 화면이 필요한 곳에서만 켜세요.
  * 브라우저를 좁혀서 확인해보세요.
  */
 export const FullScreenOnMobile: Story = {
   args: {
-    headerTitle: 'Full Screen on Mobile (Default)',
+    headerTitle: 'Full Screen on Mobile (opt-in)',
   },
   render: (args) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -507,7 +508,7 @@ export const FullScreenOnMobile: Story = {
             <ModalCloseButton />
             <ModalBody>
               모바일에서 이 모달은 전체 화면으로 표시됩니다. 브라우저 창을 좁혀서
-              확인해보세요. fullScreenOnMobile은 기본값이 true입니다.
+              확인해보세요. fullScreenOnMobile은 기본값이 false라 직접 켜야 합니다.
             </ModalBody>
             <ModalFooter>
               <Button variant="ghost" onClick={() => setIsOpen(false)}>
@@ -527,13 +528,13 @@ export const FullScreenOnMobile: Story = {
 /**
  * 모바일에서 인라인 모달
  *
- * fullScreenOnMobile={false}이면 모바일에서도 풀스크린이 아닌
+ * fullScreenOnMobile={false}(기본값)이면 모바일에서도 풀스크린이 아닌
  * 일반 모달로 표시되며, 좌우 마진(mx: 4)이 적용됩니다.
- * Confirm 모달 등 작은 모달에 적합합니다.
+ * Confirm 모달 등 대부분의 모달이 여기에 해당합니다.
  */
 export const NoFullScreenOnMobile: Story = {
   args: {
-    headerTitle: 'Inline on Mobile',
+    headerTitle: 'Inline on Mobile (default)',
   },
   render: (args) => {
     const [isOpen, setIsOpen] = useState(false);

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,7 +9,7 @@ export const Modal = ({
   open,
   onOpenChange,
   portalProps,
-  fullScreenOnMobile = true,
+  fullScreenOnMobile = false,
   ...rest
 }: ModalProps) => {
   const ctx = useMemo(() => ({ fullScreenOnMobile }), [fullScreenOnMobile]);
@@ -23,7 +23,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

@@ -5,8 +5,16 @@ export type ModalProps = Dialog.RootProps & {
   // Added for backwards compatibility.
   portalProps?: PortalProps;
   /**
-   * When true, the modal becomes fullscreen on mobile viewports.
-   * @default true
+   * 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

@@ -7,7 +7,7 @@ interface ModalContextValue {
 }
 
 export const ModalContext = createContext<ModalContextValue>({
-  fullScreenOnMobile: true,
+  fullScreenOnMobile: false,
 });
 
 export const useModalContext = () => useContext(ModalContext);

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/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,
@@ -108,7 +113,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 +123,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/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} />,
+};

package/src/components/PinInput/PinInput.tsx

@@ -1,51 +1,60 @@
-import React, { useEffect, useRef } from 'react';
-import ReactPinInput from 'react-pin-input';
-import { useToken } from '@chakra-ui/react';
+'use client';
 
-import { PinInputProps } from './PinInput.types';
+import { forwardRef } from 'react';
+import { PinInput as ChakraPinInput } from '@chakra-ui/react';
+
+import { noZoomOnFocus } from '@/theme/formControls';
 
-// TODO: forwardRef
-export const PinInput = ({
-  value,
-  onChange,
-  inputStyle,
-  autoFocus = true,
-  isNumberOnly = true,
-  ...rest
-}: PinInputProps) => {
-  const pinInputRef = useRef<ReactPinInput>(null);
-  const primaryColor = useToken('colors', 'primary.main')[0];
-  const grayColor = useToken('colors', 'border.default')[0];
+import { PinInputProps } from './PinInput.types';
 
-  useEffect(() => {
-    // Automatically focus the PinInput component on mount
-    if (autoFocus) pinInputRef.current?.focus();
-  }, []);
+export const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
+  function PinInput(
+    {
+      length,
+      value,
+      onChange,
+      onComplete,
+      placeholder = '',
+      inputProps,
+      ...rest
+    },
+    ref
+  ) {
+    const valueArray = Array.from({ length }, (_, i) => value?.[i] ?? '');
 
-  return (
-    <ReactPinInput
-      ref={pinInputRef} // Attach the ref to the PinInput component
-      initialValue={value}
-      onChange={onChange}
-      type={isNumberOnly ? 'numeric' : 'custom'}
-      inputMode={isNumberOnly ? 'number' : 'text'}
-      inputStyle={{
-        borderColor: grayColor,
-        borderRadius: '8px',
-        width: '48px',
-        height: '48px',
-        ...inputStyle,
-      }}
-      inputFocusStyle={{
-        borderColor: primaryColor,
-        boxShadow: `0 0 0 1px ${primaryColor}`,
-      }}
-      onComplete={onChange}
-      autoSelect
-      regexCriteria={isNumberOnly ? /^[0-9]*$/ : undefined}
-      {...rest}
-    />
-  );
-};
+    return (
+      <ChakraPinInput.Root
+        count={length}
+        value={valueArray}
+        onValueChange={(d) => onChange?.(d.valueAsString)}
+        onValueComplete={(d) => onComplete?.(d.valueAsString)}
+        placeholder={placeholder}
+        {...rest}
+      >
+        <ChakraPinInput.HiddenInput ref={ref} {...inputProps} />
+        <ChakraPinInput.Control>
+          {Array.from({ length }).map((_, i) => (
+            <ChakraPinInput.Input
+              key={i}
+              index={i}
+              w={12}
+              h={12}
+              fontSize="lg"
+              borderRadius="md"
+              bg="bg.surface"
+              color="fg.default"
+              borderColor="border.default"
+              _hover={{ borderColor: 'primary.lighter' }}
+              _focus={{ borderColor: 'primary.main' }}
+              _invalid={{ borderColor: 'danger.main' }}
+              _disabled={{ borderColor: 'border.subtle', bg: 'bg.subtle' }}
+              css={noZoomOnFocus}
+            />
+          ))}
+        </ChakraPinInput.Control>
+      </ChakraPinInput.Root>
+    );
+  }
+);
 
 PinInput.displayName = 'PinInput';

package/src/components/PinInput/PinInput.types.ts

@@ -1,27 +1,19 @@
-// TODO: This interface is copied from the react-pin-input package. Find a more scalable way to import this interface if it gets updated
-interface ReactPinInputProps {
-  length: number;
-  initialValue?: number | string;
-  type?: 'numeric' | 'custom';
-  inputMode?: string;
-  secret?: boolean;
-  secretDelay?: number;
-  disabled?: boolean;
-  focus?: boolean;
-  onChange?: (value: string, index: number) => void;
-  onComplete?: (value: string, index: number) => void;
-  style?: React.CSSProperties;
-  inputStyle?: React.CSSProperties;
-  inputFocusStyle?: React.CSSProperties;
-  validate?: (value: string) => string;
-  autoSelect?: boolean;
-  regexCriteria?: any;
-  ariaLabel?: string;
-  placeholder?: string;
-}
+import type { InputHTMLAttributes } from 'react';
+import type { PinInput as ChakraPinInput } from '@chakra-ui/react';
 
-export type PinInputProps = ReactPinInputProps & {
+export interface PinInputProps extends Omit<
+  ChakraPinInput.RootProps,
+  | 'count'
+  | 'value'
+  | 'defaultValue'
+  | 'onValueChange'
+  | 'onValueComplete'
+  | 'onChange'
+  | 'children'
+> {
+  length: number;
   value?: string;
-  autoFocus?: boolean;
-  isNumberOnly?: boolean;
-};
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}

package/src/components/Popover/PopoverContent.tsx

@@ -17,6 +17,9 @@ export const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
           ref={ref}
           borderWidth="1px"
           borderColor="border.subtle"
+          // Scales from its arrow's origin on the recipe's keyframes, on our
+          // clock — see `presence-anchored`.
+          animationStyle="presence-anchored"
           {...props}
         >
           <ScaledContext fontSize={baseFontSize}>{children}</ScaledContext>

package/src/components/ProgressBar/ProgressBar.indeterminate.test.tsx

@@ -0,0 +1,55 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { ProgressBar } from './ProgressBar';
+
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+const rulesFor = (el: Element) => {
+  const css = Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('\n');
+  return el.className
+    .split(' ')
+    .filter((c) => c.startsWith('css-'))
+    .flatMap((c) => [
+      ...css.matchAll(new RegExp(`\\.${c}[^{]*\\{([^}]*)\\}`, 'g')),
+    ])
+    .map((m) => m[1])
+    .join('\n');
+};
+
+const range = (container: HTMLElement) =>
+  container.querySelector('[data-part="range"]')!;
+
+describe('ProgressBar indeterminate', () => {
+  it('keeps the determinate bar on a transition, not a loop', () => {
+    const { container } = wrap(<ProgressBar value={40} />);
+    const rules = rulesFor(range(container));
+
+    expect(rules).toContain('transition-property:width');
+    expect(rules).not.toContain('animation-iteration-count:infinite');
+  });
+
+  it('sweeps a solid block across the track when there is no value', () => {
+    const { container } = wrap(<ProgressBar indeterminate />);
+    const rules = rulesFor(range(container));
+
+    expect(rules).toContain('animation-name:indeterminate');
+    expect(rules).toContain('animation-iteration-count:infinite');
+    // `translate`, so a loop that may run for the length of a slow request
+    // stays on the compositor. Chakra's own indeterminate styling animates
+    // `left`, which lays out every frame.
+    expect(rules).toContain('background-image:none');
+  });
+
+  it('spells the missing value the way Chakra Progress expects', () => {
+    // `null`, not `undefined` — `undefined` reads as uncontrolled and the bar
+    // falls back to its default value instead of going indeterminate.
+    const { container } = wrap(<ProgressBar indeterminate value={70} />);
+    expect(range(container).getAttribute('data-state')).toBe('indeterminate');
+  });
+});

package/src/components/ProgressBar/ProgressBar.styles.ts

@@ -1,5 +1,31 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
 import { ProgressBarSize } from './ProgressBar.types';
 
+/**
+ * A bar sliding across its track for work of unknown length — the determinate
+ * bar's counterpart, where there is no percentage to show.
+ *
+ * Local rather than shared: an indeterminate bar is this component, and the
+ * keyframe travels a distance that only makes sense inside this track.
+ *
+ * `linear`, like the spinner: this one also restarts from its own start, and an
+ * eased sweep pauses at the edge of the track every cycle, which reads as the
+ * request having stalled there.
+ *
+ * Under reduced motion the bar stops travelling and sits in the track. That
+ * loses the "still working" signal, which is the cost — but a bar repeatedly
+ * crossing the viewport is the highest-risk motion we have, and the surrounding
+ * UI (a disabled control, a status line) is where that signal belongs anyway.
+ */
+export const indeterminateSweep: SystemStyleObject = {
+  animationName: 'indeterminate',
+  animationDuration: 'motion.loop.sweep',
+  animationTimingFunction: 'linear',
+  animationIterationCount: 'infinite',
+  _motionReduce: { animationName: 'none' },
+};
+
 export const baseStyles = {
   borderRadius: 'full',
   height: 4, // Use direct spacing value instead of theme.spacing[4]

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,29 +1,56 @@
 import { Progress as ChakraProgress } from '@chakra-ui/react';
 
-import { sizeStyles } from './ProgressBar.styles';
+import { indeterminateSweep, sizeStyles } from './ProgressBar.styles';
 import { ProgressBarProps } from './ProgressBar.types';
 
 export const ProgressBar = ({
   filledTrackColor = 'primary.main',
   value,
   size = 'md',
+  indeterminate = false,
   ...rest
 }: ProgressBarProps) => {
   const styles = sizeStyles[size];
 
   return (
-    <ChakraProgress.Root value={value} {...rest}>
+    // `null` is how Chakra's Progress spells "no value", and it is what puts
+    // the range into its `_indeterminate` state — passing the prop through as a
+    // boolean keeps that spelling out of every call site.
+    <ChakraProgress.Root value={indeterminate ? null : value} {...rest}>
       <ChakraProgress.Track
         bgColor="bg.muted"
         height={styles.height}
         borderRadius={styles.borderRadius}
         overflow="hidden"
       >
-        <ChakraProgress.Range
-          bgColor={filledTrackColor}
-          borderRadius={styles.borderRadius}
-          transition="width 0.3s ease-in-out"
-        />
+        {indeterminate ? (
+          <ChakraProgress.Range
+            bgColor={filledTrackColor}
+            borderRadius={styles.borderRadius}
+            // Chakra's own `_indeterminate` styling animates `left` and paints
+            // the bar as a transparent-to-solid-to-transparent gradient, which
+            // reads as a smear rather than a bar. Overridden here to a solid
+            // block that travels on `translate` — a compositor-only property,
+            // so a loop that may run for the whole length of a slow request
+            // costs no layout.
+            width="40%"
+            minWidth="unset"
+            backgroundImage="none"
+            css={indeterminateSweep}
+          />
+        ) : (
+          <ChakraProgress.Range
+            bgColor={filledTrackColor}
+            borderRadius={styles.borderRadius}
+            // `ease-in-out` made the bar start slowly on every update, as if it
+            // were accelerating from rest — but progress only moves one way and
+            // arrives in discrete jumps, so easing IN is a fiction. `emphasized`
+            // covers most of the distance immediately and settles, which reads as
+            // the bar catching up to a value that already changed.
+            animationStyle="travel"
+            transitionProperty="width"
+          />
+        )}
       </ChakraProgress.Track>
     </ChakraProgress.Root>
   );

package/src/components/ProgressBar/ProgressBar.types.ts

@@ -5,4 +5,14 @@ export type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface ProgressBarProps extends ChakraProgressRootProps {
   filledTrackColor?: string;
   size?: ProgressBarSize;
+  /**
+   * Work whose length is not known yet: the bar slides across the track instead
+   * of filling to a percentage. `value` is ignored while this is set.
+   *
+   * Reach for it only when there is genuinely no denominator. A determinate bar
+   * that jumps 0 → 60 → 100 still tells the reader how much is left; an
+   * indeterminate one only says "something is happening", which a `Spinner`
+   * says in less space.
+   */
+  indeterminate?: boolean;
 }