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

package/src/components/Select/Combobox.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import { Combobox as ChakraCombobox } from '@chakra-ui/react';
 
+import { noZoomOnFocus } from '@/theme/formControls';
 import { mergeCss } from '@/utils/mergeCss';
 
 import { contentStyles, inputStyles, itemStyles } from './Select.styles';
@@ -11,7 +12,9 @@ const Input = forwardRef<HTMLInputElement, ChakraCombobox.InputProps>(
       <ChakraCombobox.Input
         ref={ref}
         {...props}
-        css={mergeCss(inputStyles, css)}
+        // The one typeable listbox: unlike Select's button trigger, iOS Safari
+        // zooms toward this input when its text is under 16px.
+        css={mergeCss(noZoomOnFocus, inputStyles, css)}
       />
     );
   }
@@ -22,6 +25,9 @@ const Content = forwardRef<HTMLDivElement, ChakraCombobox.ContentProps>(
     return (
       <ChakraCombobox.Content
         ref={ref}
+        // Chakra gives this one `animationDuration: 0s` on close — the list
+        // vanishes mid-keystroke with no exit at all. Same policy as Select.
+        animationStyle="presence-anchored"
         {...props}
         css={mergeCss(contentStyles, css)}
       />

package/src/components/Select/ComboboxField.tsx

@@ -19,6 +19,7 @@ export function ComboboxField<T = string>({
   onChange,
   placeholder,
   label,
+  ariaLabel,
   size = 'md',
   invalid,
   disabled,
@@ -60,7 +61,16 @@ export function ComboboxField<T = string>({
       }}
       onInputValueChange={(details) => filter(details.inputValue)}
     >
-      {label != null && <Combobox.Label>{label}</Combobox.Label>}
+      {/* Same as `SelectField`: the label part is the target of the input's
+          `aria-labelledby`, so omitting it leaves the control unnamed rather
+          than unlabelled (KWCAG 5.3.4.1 레이블 제공). */}
+      {label != null ? (
+        <Combobox.Label>{label}</Combobox.Label>
+      ) : (
+        (ariaLabel ?? placeholder) && (
+          <Combobox.Label srOnly>{ariaLabel ?? placeholder}</Combobox.Label>
+        )
+      )}
       <Combobox.Control>
         <Combobox.Input placeholder={placeholder} />
         <Combobox.IndicatorGroup>

package/src/components/Select/Comparison.stories.tsx

@@ -27,7 +27,7 @@ const categoryOptions = [
 
 const Row = ({ label, children }: { label: string; children: ReactNode }) => (
   <Stack gap={2}>
-    <Text fontWeight="semibold" fontSize="sm" color="gray.1000">
+    <Text fontWeight="semibold" fontSize="sm" color="fg.default">
       {label}
     </Text>
     {children}
@@ -61,3 +61,22 @@ export const SideBySide = () => (
     </Row>
   </Stack>
 );
+
+/**
+ * The four form-control sizes, Input / Select / Textarea per row.
+ */
+export const SizeProgression = () => (
+  <Stack gap={8} maxW="360px">
+    {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
+      <Row key={size} label={`size="${size}"`}>
+        <Input size={size} placeholder={`Input ${size}`} />
+        <SelectField
+          size={size}
+          options={categoryOptions}
+          placeholder={`Select ${size}`}
+        />
+        <Textarea size={size} placeholder={`Textarea ${size}`} />
+      </Row>
+    ))}
+  </Stack>
+);

package/src/components/Select/Select.stories.tsx

@@ -220,7 +220,7 @@ export const OptionsWithDescription = () => (
               <Select.Item item={item} key={item.value}>
                 <Stack gap={0}>
                   <Select.ItemText>{item.label}</Select.ItemText>
-                  <Span fontSize="xs" color="gray.600">
+                  <Span fontSize="xs" color="fg.muted">
                     {item.description}
                   </Span>
                 </Stack>
@@ -341,12 +341,12 @@ export const HierarchicalOptions = () => (
                   .map((item) => (
                     <Select.Item item={item} key={item.value}>
                       <HStack gap={1}>
-                        <Span color="gray.500" fontWeight="bold">
+                        <Span color="fg.subtle" fontWeight="bold">
                           ∟
                         </Span>
                         <Select.ItemText>{item.label}</Select.ItemText>
                         {item.myGroup && (
-                          <Badge variant="primary">My group</Badge>
+                          <Badge variant="neutral">My group</Badge>
                         )}
                       </HStack>
                       <Select.ItemIndicator />
@@ -397,14 +397,14 @@ export const CustomTriggerValue = () => {
           <Select.Trigger>
             {selected ? (
               <HStack gap={1}>
-                <Span color="gray.600">{selected.groupType}</Span>
-                <Span color="gray.500">&gt;</Span>
-                <Span color="gray.1200" fontWeight="medium">
+                <Span color="fg.muted">{selected.groupType}</Span>
+                <Span color="fg.subtle">&gt;</Span>
+                <Span color="fg.default" fontWeight="medium">
                   {selected.label}
                 </Span>
               </HStack>
             ) : (
-              <Span color="gray.500">Select a group</Span>
+              <Span color="fg.subtle">Select a group</Span>
             )}
           </Select.Trigger>
           <Select.IndicatorGroup>
@@ -463,7 +463,7 @@ export const MultiSelectCustomTags = () => {
         <Select.Control>
           <Select.Trigger>
             {value.length === 0 ? (
-              <Span color="gray.500">Select skills</Span>
+              <Span color="fg.subtle">Select skills</Span>
             ) : (
               <HStack gap={1} flexWrap="wrap">
                 {value.map((val) => {
@@ -475,8 +475,8 @@ export const MultiSelectCustomTags = () => {
                     <HStack
                       key={val}
                       gap={1}
-                      bg="primary.extralight"
-                      color="primary.dark"
+                      bg="primary.selected"
+                      color="fg.default"
                       borderRadius="4px"
                       px={2}
                       py={0.5}
@@ -592,22 +592,22 @@ export const InsideScrollableContainer = () => (
     maxH="140px"
     overflow="auto"
     borderWidth="1px"
-    borderColor="gray.300"
+    borderColor="border.default"
     borderRadius="8px"
     p={3}
   >
     <Stack gap={3}>
-      <Span fontSize="sm" color="gray.600">
+      <Span fontSize="sm" color="fg.muted">
         Scrollable container — open the select, it escapes the clip.
       </Span>
       <SelectField options={options} placeholder="Select an option" />
-      <Span fontSize="sm" color="gray.600">
+      <Span fontSize="sm" color="fg.muted">
         More rows below…
       </Span>
-      <Span fontSize="sm" color="gray.600">
+      <Span fontSize="sm" color="fg.muted">
         …to force the container to scroll.
       </Span>
-      <Span fontSize="sm" color="gray.600">
+      <Span fontSize="sm" color="fg.muted">
         …and a little more.
       </Span>
     </Stack>
@@ -638,12 +638,12 @@ export const StyledParts = () => (
       </Select.Control>
       <Portal>
         <Select.Positioner>
-          <Select.Content css={{ bg: 'gray.50' }}>
+          <Select.Content css={{ bg: 'bg.subtle' }}>
             {frameworkCollection.items.map((item) => (
               <Select.Item
                 item={item}
                 key={item.value}
-                css={{ _highlighted: { bg: 'primary.extralight' } }}
+                css={{ _highlighted: { bg: 'primary.wash' } }}
               >
                 <Select.ItemText>{item.label}</Select.ItemText>
                 <Select.ItemIndicator />
@@ -703,13 +703,13 @@ export const WithOpenChange = () => {
           w="220px"
           p={3}
           borderWidth="1px"
-          borderColor="gray.300"
+          borderColor="border.default"
           borderRadius="8px"
-          bg="gray.50"
+          bg="bg.subtle"
         >
-          <Span fontSize="sm" color="gray.600">
-            Side panel — visible only while the dropdown is open, the same
-            way `LlmModelSelect` reveals its model details panel.
+          <Span fontSize="sm" color="fg.muted">
+            Side panel — visible only while the dropdown is open, the same way
+            `LlmModelSelect` reveals its model details panel.
           </Span>
         </Box>
       )}

package/src/components/Select/Select.styles.ts

@@ -8,28 +8,31 @@
  * update these values to match.
  */
 
+import { disabledControl } from '@/utils/disabledControl';
+
 const focusVars = {
   '--focus-color': 'var(--chakra-colors-primary-main)',
-  '--error-color': 'var(--chakra-colors-danger-main)',
+  '--error-color': 'var(--chakra-colors-danger-solid)',
 };
 
 const fieldBase = {
   ...focusVars,
   bg: 'bg.surface',
   color: 'fg.default',
-  borderColor: 'border.default',
-  _hover: { borderColor: 'primary.lighter' },
-  _focus: { borderColor: 'primary.main' },
+  borderColor: 'border.control',
+  _hover: { borderColor: 'fg.icon' },
+  _focus: {
+    borderColor: 'primary.main',
+    boxShadow: '0 0 0 1px var(--chakra-colors-primary-main)',
+  },
   _invalid: {
-    borderColor: 'danger.main',
-    _hover: { borderColor: 'danger.main' },
-    _focus: { borderColor: 'danger.main' },
+    borderColor: 'danger.solid',
+    _hover: { borderColor: 'danger.solid' },
+    _focus: { borderColor: 'danger.solid' },
   },
   _disabled: {
-    opacity: 1,
+    ...disabledControl,
     cursor: 'not-allowed',
-    bg: 'bg.subtle',
-    color: { base: 'gray.1000', _dark: 'gray.400' },
     fontWeight: 'semibold',
   },
 };
@@ -38,7 +41,10 @@ const fieldBase = {
 export const triggerStyles = {
   ...fieldBase,
   cursor: 'pointer',
-  _open: { borderColor: 'primary.main' },
+  _open: {
+    borderColor: 'primary.main',
+    boxShadow: '0 0 0 1px var(--chakra-colors-primary-main)',
+  },
 };
 
 /** Combobox text input — the typeable control. */
@@ -61,10 +67,10 @@ export const itemStyles = {
   borderRadius: '4px',
   cursor: 'pointer',
   color: 'fg.default',
-  _highlighted: { bg: 'bg.subtle' },
+  _highlighted: { bg: 'primary.wash' },
   _checked: {
-    bg: 'primary.extralight',
-    color: 'primary.dark',
+    bg: 'primary.selected',
+    color: 'fg.default',
     fontWeight: 'bold',
   },
   _disabled: { color: 'fg.subtle', cursor: 'not-allowed' },

package/src/components/Select/Select.tsx

@@ -27,6 +27,9 @@ const Content = forwardRef<HTMLDivElement, ChakraSelect.ContentProps>(
     return (
       <ChakraSelect.Content
         ref={ref}
+        // Chakra closes this one over `fastest` (50ms), which is fast enough to
+        // read as the list being cut off rather than dismissed.
+        animationStyle="presence-anchored"
         {...props}
         css={mergeCss(contentStyles, css)}
       />

package/src/components/Select/Select.types.ts

@@ -20,6 +20,22 @@ interface FieldBaseProps<T> {
   placeholder?: string;
   /** Optional label rendered above the control. */
   label?: ReactNode;
+  /**
+   * Accessible name for the trigger when no visible `label` is rendered — a
+   * field labelled by a table column header, a `FieldRow`, or the sentence
+   * around it.
+   *
+   * Without one of `label` / `ariaLabel` / `placeholder` the trigger has **no
+   * accessible name at all**: the composition points `aria-labelledby` at a
+   * label part that is not rendered, the reference dangles, and the control
+   * announces as a bare "button" however much text it shows (KWCAG 2.1
+   * 5.3.4.1 레이블 제공, axe `button-name`).
+   *
+   * Rendered as a visually hidden label rather than an `aria-label` so the name
+   * is in the server-rendered markup — an attribute applied after hydration
+   * leaves a window in which the control is nameless.
+   */
+  ariaLabel?: string;
   size?: SelectSize;
   invalid?: boolean;
   disabled?: boolean;
@@ -29,7 +45,16 @@ interface FieldBaseProps<T> {
   width?: string | number;
 }
 
-export type SelectFieldProps<T = string> = FieldBaseProps<T>;
+export interface SelectFieldProps<T = string> extends FieldBaseProps<T> {
+  /**
+   * Deal the options in one after another when the list opens.
+   *
+   * Deliberately absent from `ComboboxField`, which is the same list behind a
+   * filter: its options remount on every keystroke, so each character typed
+   * would re-deal the results the reader is trying to read.
+   */
+  stagger?: boolean;
+}
 
 export interface ComboboxFieldProps<T = string> extends FieldBaseProps<T> {
   /** Content shown when no option matches the typed query. */

package/src/components/Select/SelectField.tsx

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
 import { createListCollection, Portal } from '@chakra-ui/react';
 
+import { staggerProps } from '@/utils/staggerProps';
+
 import { Select } from './Select';
 import { SelectFieldProps } from './Select.types';
 
@@ -19,6 +21,7 @@ export function SelectField<T = string>({
   onChange,
   placeholder,
   label,
+  ariaLabel,
   size = 'md',
   invalid,
   disabled,
@@ -26,6 +29,7 @@ export function SelectField<T = string>({
   required,
   name,
   width = 'full',
+  stagger = false,
 }: SelectFieldProps<T>) {
   const collection = useMemo(
     () =>
@@ -61,7 +65,19 @@ export function SelectField<T = string>({
       }}
     >
       <Select.HiddenSelect />
-      {label != null && <Select.Label>{label}</Select.Label>}
+      {/* The label part is what the trigger's `aria-labelledby` points at, and
+          Chakra emits that reference whether or not the part is rendered. Leave
+          it out and the reference dangles, so the trigger resolves to no name —
+          a "button" to a screen reader, whatever the selected option says
+          (KWCAG 5.3.4.1 레이블 제공). So it is always rendered: visibly when the
+          field has a label, hidden when the name lives elsewhere on screen. */}
+      {label != null ? (
+        <Select.Label>{label}</Select.Label>
+      ) : (
+        (ariaLabel ?? placeholder) && (
+          <Select.Label srOnly>{ariaLabel ?? placeholder}</Select.Label>
+        )
+      )}
       <Select.Control>
         <Select.Trigger>
           <Select.ValueText placeholder={placeholder} />
@@ -73,8 +89,12 @@ export function SelectField<T = string>({
       <Portal>
         <Select.Positioner>
           <Select.Content>
-            {options.map((option) => (
-              <Select.Item item={option} key={String(option.value)}>
+            {options.map((option, index) => (
+              <Select.Item
+                item={option}
+                key={String(option.value)}
+                {...(stagger ? staggerProps(index) : {})}
+              >
                 <Select.ItemText>{option.label}</Select.ItemText>
                 <Select.ItemIndicator />
               </Select.Item>

package/src/components/Shake/Shake.stories.tsx

@@ -0,0 +1,153 @@
+import { Box, Grid, HStack, Stack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Button } from '../Button';
+import { Tag } from '../Tag';
+import { Input } from '../Input';
+import { Subtext } from '../Typography';
+import { Shake } from '.';
+
+/**
+ * The house "no, not that" gesture — a rejected answer, an invalid field, a
+ * refused action. Replays whenever `trigger` changes.
+ */
+const meta = {
+  title: 'Components/Motion/Shake',
+  component: Shake,
+  args: { trigger: 0 },
+} satisfies Meta<typeof Shake>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [attempts, setAttempts] = useState(0);
+
+    return (
+      <Stack gap={4} align="flex-start">
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={() => setAttempts((a) => a + 1)}
+        >
+          틀린 답 제출
+        </Button>
+        <Shake trigger={attempts}>
+          <Tag tone="danger">✕ 다시 시도해 주세요</Tag>
+        </Shake>
+        <Subtext color="fg.muted" mb={0}>
+          같은 답을 두 번 내도 두 번 흔들립니다 — 값이 아니라 사건을 셉니다.
+        </Subtext>
+      </Stack>
+    );
+  },
+};
+
+/** `distance` is the peak travel. Past ~10px it reads as broken rather than as "no". */
+export const Distance: Story = {
+  render: () => {
+    const [run, setRun] = useState(0);
+
+    return (
+      <Stack gap={5} align="flex-start">
+        <Button size="sm" onClick={() => setRun((r) => r + 1)}>
+          셋 동시 재생
+        </Button>
+        <HStack gap={6}>
+          {[4, 6, 12].map((d) => (
+            <Stack key={d} gap={2} align="center">
+              <Shake trigger={run} distance={d}>
+                <Box
+                  px={3}
+                  py={2}
+                  borderRadius="md"
+                  bg="bg.subtle"
+                  fontSize="sm"
+                >
+                  거절
+                </Box>
+              </Shake>
+              <Subtext fontFamily="mono" fontSize="2xs" color="fg.muted" mb={0}>
+                {d}px
+              </Subtext>
+            </Stack>
+          ))}
+        </HStack>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * What a reader who asked for less motion actually gets.
+ *
+ * The shake is `animationName: none` under `prefers-reduced-motion`, which
+ * makes the wrapper a no-op — so the right-hand column, rendered without it, is
+ * literally what those readers see. If the refusal is not legible there, the
+ * component is carrying meaning it cannot deliver.
+ */
+export const ReducedMotion: Story = {
+  name: '동작 줄이기에서 남는 것',
+  render: () => {
+    const [n, setN] = useState(0);
+
+    // The real form primitives, so the demo shows what an invalid field
+    // actually looks like rather than an approximation of one.
+    const Field = ({ signalled }: { signalled: boolean }) => (
+      <Stack gap={1} w="100%">
+        <Input
+          value={signalled ? '1998' : ''}
+          readOnly
+          aria-invalid={signalled || undefined}
+          placeholder="답을 입력하세요"
+        />
+        {signalled && <Tag tone="danger">✕ 다시 시도해 주세요</Tag>}
+      </Stack>
+    );
+
+    return (
+      <Stack gap={5} align="flex-start" maxW="620px">
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={() => setN((a) => a + 1)}
+        >
+          틀린 답 제출
+        </Button>
+
+        <Grid templateColumns={{ base: '1fr', md: '1fr 1fr' }} gap={6} w="100%">
+          {[
+            { label: '보통', reduced: false },
+            { label: '동작 줄이기 켠 사람이 보는 것', reduced: true },
+          ].map((col) => (
+            <Stack key={col.label} gap={2}>
+              <Subtext
+                fontSize="2xs"
+                color={col.reduced ? 'warning.fg' : 'fg.muted'}
+                mb={0}
+              >
+                {col.label}
+              </Subtext>
+              {col.reduced ? (
+                <Field signalled={n > 0} />
+              ) : (
+                <Shake trigger={n} display="block">
+                  <Field signalled={n > 0} />
+                </Shake>
+              )}
+            </Stack>
+          ))}
+        </Grid>
+
+        <Subtext color="fg.muted" mb={0}>
+          오른쪽에서도 거절이 읽히는 이유는 <b>테두리 색 · ✕ 아이콘 · 문구</b>가
+          같이 바뀌기 때문입니다. 흔들림만 있었다면 저 사람에게는 아무 일도
+          일어나지 않은 화면입니다.
+        </Subtext>
+      </Stack>
+    );
+  },
+};

package/src/components/Shake/Shake.styles.ts

@@ -0,0 +1,31 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
+/**
+ * The refusal gesture.
+ *
+ * `motion.base` rather than FactChat's literal 360ms — 60ms adrift and on the
+ * scale. Its own comment names the ceiling this has to stay under: past ~450ms
+ * a shake stops saying "no" and starts saying "broken".
+ *
+ * `standard`, deliberately not `overshoot`. Overshoot passes the target and
+ * comes back, which reads as bounce, and a bouncy refusal reads as playful.
+ * The decay is in the keyframe instead, where it settles *to* centre rather
+ * than through it.
+ *
+ * Removed entirely under reduced motion — and that is why a shake must never be
+ * the only signal. Pair it with colour, an icon, or copy that says the same
+ * thing, because for some readers this simply will not happen.
+ */
+/**
+ * A function of the play count — see `pulsePop` for why. The stake is higher
+ * here: a shake fires on a refusal, so the remount the earlier version used to
+ * replay it would drop the keyboard focus of the person who just got told no.
+ */
+export const shakeX = (play: number): SystemStyleObject => ({
+  animationName: play % 2 === 0 ? 'shake-x-alt' : 'shake-x',
+  animationDuration: 'motion.base',
+  animationTimingFunction: 'standard',
+  animationFillMode: 'both',
+  transformOrigin: 'center',
+  _motionReduce: { animationName: 'none' },
+});

package/src/components/Shake/Shake.tsx

@@ -0,0 +1,79 @@
+import { ForwardedRef, forwardRef, useRef } from 'react';
+import { Box } from '@chakra-ui/react';
+
+import { mergeCss } from '@/utils/mergeCss';
+
+import { shakeX } from './Shake.styles';
+import { ShakeProps } from './Shake.types';
+
+/**
+ * Shakes once whenever `trigger` changes — the house "no, not that" gesture,
+ * for a rejected answer, an invalid field, a refused action.
+ *
+ * The counterpart to `Pulse`, and the pair has to be kept apart: both replay on
+ * a trigger, but a pulse draws the eye to something *good* that landed, and a
+ * shake refuses. A shake used as emphasis reads as an error the reader then goes
+ * looking for.
+ *
+ * Replays the same way `Pulse` does — two byte-identical keyframes alternating
+ * by play count, because a CSS animation restarts when its name changes. The
+ * DOM is left alone, which matters more here than anywhere: a shake fires on a
+ * refusal, so the earlier `key`-driven replay took the keyboard focus of the
+ * person who had just been told no. The first render never shakes.
+ *
+ * **Never let this be the only signal.** It is removed entirely under reduced
+ * motion, so for some readers nothing happens at all; pair it with colour, an
+ * icon, or copy that says the same thing.
+ *
+ * **Adds one `div` around `children`**, and layout props land on that wrapper
+ * rather than on the child. Usually the same result — but the child is no longer
+ * a *direct* child of what surrounds it, so animate the inner element instead of
+ * wrapping when the parent needs its children directly: a `<tr>` needs `<td>`s,
+ * and Ark parts (`Menu.List`, `Tree`) walk their own children for focus and
+ * typeahead.
+ *
+ * ```tsx
+ * <Shake trigger={attempts}>
+ *   <Input aria-invalid={invalid} />
+ * </Shake>
+ * ```
+ */
+export const Shake = forwardRef(
+  (
+    { trigger, distance, children, css, ...rest }: ShakeProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    // A play counter rather than the trigger itself, so a value that returns to
+    // one it held before still fires — two rejections of the same answer are
+    // two events, and keying on the value would swallow the second.
+    const plays = useRef(0);
+    const previous = useRef(trigger);
+    if (previous.current !== trigger) {
+      previous.current = trigger;
+      plays.current += 1;
+    }
+
+    return (
+      <Box
+        ref={ref}
+        display="inline-flex"
+        {...rest}
+        css={
+          plays.current === 0
+            ? css
+            : mergeCss(
+                shakeX(plays.current),
+                distance === undefined
+                  ? undefined
+                  : { '--shake-distance': `${distance}px` },
+                css
+              )
+        }
+      >
+        {children}
+      </Box>
+    );
+  }
+);
+
+Shake.displayName = 'Shake';

package/src/components/Shake/Shake.types.ts

@@ -0,0 +1,11 @@
+import type { BoxProps } from '@chakra-ui/react';
+
+export interface ShakeProps extends Omit<BoxProps, 'translate'> {
+  /**
+   * Change this to fire one shake. Any changing value works — an attempt
+   * counter, a verdict, a timestamp. The first render never shakes.
+   */
+  trigger: string | number;
+  /** Peak horizontal travel in px. Defaults to 6. */
+  distance?: number;
+}

package/src/components/Shake/index.ts

@@ -0,0 +1,2 @@
+export { Shake } from './Shake';
+export type { ShakeProps } from './Shake.types';