@mindlogic-ai/logician-ui 5.0.0-alpha.2 → 5.0.0-alpha.20

package/src/components/Radio/Radio.stories.tsx

@@ -2,6 +2,9 @@ import { Box, HStack, Stack, VStack } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
+import { Text } from '../Typography';
 import { Radio } from './Radio';
 import { RadioGroup } from './RadioGroup';
 
@@ -261,3 +264,119 @@ export const FormExample: RadioGroupStory = {
     );
   },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `Radio.usage.mdx` with <Canvas of={…} />. Hidden (`!dev`); `tags`
+// is written out on each story because the indexer reads CSF statically.
+
+const PLANS = [
+  {
+    value: 'member',
+    label: '멤버별 한도',
+    hint: '멤버마다 같은 크레딧을 나눠 줍니다.',
+  },
+  {
+    value: 'group',
+    label: '그룹 공용',
+    hint: '그룹 안에서 크레딧을 함께 씁니다.',
+  },
+  { value: 'none', label: '제한 없음', hint: '조직 전체 한도만 적용합니다.' },
+];
+
+export const DoNamedGroup: StoryObj = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: a named group with a default',
+  render: () => (
+    <Stack gap={3} maxW="420px">
+      <Text id="usage-credit-mode" fontWeight="semibold">
+        크레딧 배분 방식
+      </Text>
+      <RadioGroup defaultValue="member" aria-labelledby="usage-credit-mode">
+        <Stack gap={3}>
+          {PLANS.map((plan) => (
+            <Radio key={plan.value} value={plan.value} alignItems="flex-start">
+              <Radio.Control />
+              <Radio.Text>
+                {plan.label}
+                <Text as="span" display="block" color="fg.muted" fontSize="sm">
+                  {plan.hint}
+                </Text>
+              </Radio.Text>
+            </Radio>
+          ))}
+        </Stack>
+      </RadioGroup>
+    </Stack>
+  ),
+};
+
+export const DontRadioForMany: StoryObj = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: a long list of radios",
+  render: () => (
+    <RadioGroup defaultValue="1" aria-label="시간대">
+      <Stack gap={2}>
+        {[
+          '서울',
+          '도쿄',
+          '싱가포르',
+          '시드니',
+          '런던',
+          '파리',
+          '뉴욕',
+          '로스앤젤레스',
+        ].map((city, i) => (
+          <Radio key={city} value={String(i)}>
+            <Radio.Control />
+            <Radio.Text>{city}</Radio.Text>
+          </Radio>
+        ))}
+      </Stack>
+    </RadioGroup>
+  ),
+};
+
+export const DontSingleRadio: StoryObj = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: one radio on its own",
+  render: () => (
+    <RadioGroup aria-label="약관">
+      <Radio value="agree">
+        <Radio.Control />
+        <Radio.Text>이용약관에 동의합니다</Radio.Text>
+      </Radio>
+    </RadioGroup>
+  ),
+};
+
+/** Tokens `RadioControl` reads, as written in `RadioControl.tsx`. */
+export const UsageTokens: StoryObj = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        {
+          token: 'bg.surface',
+          use: <T en="Unselected ring fill" ko="선택 전 원 안쪽" />,
+        },
+        {
+          token: 'border.control',
+          use: <T en="Unselected ring (3:1)" ko="선택 전 테두리(3:1)" />,
+        },
+        { token: 'primary.main', use: <T en="Selected fill" ko="선택 채움" /> },
+        { token: 'fg.onPrimary', use: <T en="Selected dot" ko="선택 점" /> },
+        { token: 'disabled.bg', use: <T en="Disabled ring" ko="비활성 원" /> },
+        { token: 'disabled.fg', use: <T en="Disabled dot" ko="비활성 점" /> },
+        {
+          token: 'focus.ring',
+          use: <T en="Keyboard focus ring" ko="키보드 초점 링" />,
+        },
+      ]}
+    />
+  ),
+};

package/src/components/Radio/Radio.usage.mdx

@@ -0,0 +1,187 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as RadioStories from './Radio.stories';
+
+<Meta of={RadioStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Radio
+
+A set of options where the user picks exactly one, all visible at once.
+
+## When to use
+
+- Two to five options that fit on screen, where seeing them side by side helps
+  the user choose: a credit allocation mode, a visibility setting.
+- Options that each need a line of explanation under the label.
+
+## When not to use
+
+- More than about five options, or a list that grows → `SelectField`, or
+  `ComboboxField` when the user would search.
+- Any number of choices, or a single yes/no → `Checkbox`. A setting that is on
+  or off → `Switch`.
+- Switching between views of the same content → `SegmentedControl` or `Tabs`.
+
+## Props
+
+</En>
+
+<Ko>
+
+# Radio
+
+선택지를 모두 펼쳐 놓고 그중 하나만 고르게 합니다.
+
+## 언제 쓰나요
+
+- 화면에 다 들어가는 두세 개에서 다섯 개 정도의 선택지를 나란히 보고 고를 때: 크레딧
+  배분 방식, 공개 범위.
+- 선택지마다 라벨 아래 한 줄 설명이 필요할 때.
+
+## 언제 쓰지 않나요
+
+- 선택지가 다섯 개를 넘거나 늘어날 수 있다면 `SelectField`를, 검색이 편하다면
+  `ComboboxField`를 씁니다.
+- 원하는 만큼 고르거나 예/아니요 하나라면 `Checkbox`를, 켜고 끄는 설정은 `Switch`를
+  씁니다.
+- 같은 내용의 보기 방식을 바꿀 때는 `SegmentedControl`이나 `Tabs`를 씁니다.
+
+## 속성
+
+</Ko>
+
+<ArgTypes of={RadioStories} include={['value', 'disabled', 'invalid']} />
+
+<En>
+
+`RadioGroup` holds the value (`value` / `defaultValue`, `onValueChange`,
+`orientation`, `disabled`, `name`) and paints the checked state in
+`primary.main`. Each option is `<Radio value>` with `<Radio.Control />` and
+`<Radio.Text>`.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+값은 `RadioGroup`이 가집니다(`value`·`defaultValue`, `onValueChange`, `orientation`,
+`disabled`, `name`). 선택된 상태는 `primary.main`으로 칠합니다. 선택지마다
+`<Radio value>` 안에 `<Radio.Control />`과 `<Radio.Text>`를 둡니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={RadioStories.DoNamedGroup} />
+<Verdict
+  kind="do"
+  en="Name the group with a visible question connected by aria-labelledby, preselect the safest option, and explain each option in a muted line."
+  ko="aria-labelledby로 연결한 보이는 질문으로 묶음에 이름을 붙이고, 가장 안전한 선택지를 미리 골라 두며, 선택지마다 흐린 글자로 설명을 붙입니다."
+/>
+
+<Canvas of={RadioStories.DontRadioForMany} />
+<Verdict
+  kind="dont"
+  en="List eight or more radios. The page grows long and the choice is hard to scan; use SelectField."
+  ko="라디오를 여덟 개 넘게 늘어놓지 마세요. 화면이 길어지고 훑어보기 어렵습니다. SelectField를 씁니다."
+/>
+
+<Canvas of={RadioStories.DontSingleRadio} />
+<Verdict
+  kind="dont"
+  en="Use a single radio for agreement. Once selected it cannot be cleared; use a Checkbox."
+  ko="동의 항목 하나에 라디오를 쓰지 마세요. 한 번 고르면 해제할 수 없습니다. Checkbox를 씁니다."
+/>
+
+<En>
+
+## Content
+
+- The question above the group names what is chosen (크레딧 배분 방식).
+- Options are short, parallel and mutually exclusive. Order them by likelihood
+  or by size, not at random.
+- If none of the options may apply, add one that says so (제한 없음) rather than
+  leaving the group with no selection.
+
+## Accessibility
+
+What Radio does for you:
+
+- Native radio inputs inside a `radiogroup`. Tab moves into the group onto the
+  selected option; the arrow keys move and select (WCAG 2.1.1).
+- Each radio emits a unique id for its control and its indicator (the
+  duplicate-id defect in `ACCESSIBILITY.md` §4, KWCAG 5.4.1.1 마크업 오류 방지).
+- Keyboard focus shows a ring on the control (WCAG 2.4.7); the selected state
+  is a dot, not colour alone (WCAG 1.4.1).
+
+What you still have to do:
+
+- **Name the group.** `RadioGroup` does not render a label part, so pass
+  `aria-labelledby` pointing at the visible question, or `aria-label` (WCAG
+  1.3.1, 4.1.2).
+- Every option needs a `Radio.Text`.
+- Put a group error in words under the group (WCAG 3.3.1).
+
+## Tokens
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 묶음 위 질문에는 고르는 대상을 씁니다(크레딧 배분 방식).
+- 선택지는 짧고 같은 형식으로 쓰며 서로 겹치지 않게 합니다. 아무렇게나 두지 말고
+  가능성이 높은 순이나 크기순으로 둡니다.
+- 어떤 선택지도 해당하지 않을 수 있다면, 아무것도 고르지 않은 채로 두지 말고 그렇다고
+  말하는 선택지를 하나 둡니다(제한 없음).
+
+## 접근성
+
+Radio가 알아서 하는 일
+
+- `radiogroup` 안의 네이티브 라디오 입력입니다. Tab을 누르면 묶음 안의 선택된 항목으로
+  들어가고, 방향키로 옮기면서 고릅니다(WCAG 2.1.1).
+- 라디오마다 컨트롤과 표시에 서로 다른 id를 씁니다(`ACCESSIBILITY.md` 4절의 중복 id
+  결함, KWCAG 5.4.1.1 마크업 오류 방지).
+- 키보드 초점 링이 컨트롤에 보이고(WCAG 2.4.7), 선택 상태는 색이 아니라 점으로
+  나타납니다(WCAG 1.4.1).
+
+직접 챙겨야 하는 일
+
+- **묶음에 이름을 붙입니다.** `RadioGroup`은 라벨 부품을 그리지 않으므로, 보이는
+  질문을 가리키는 `aria-labelledby`나 `aria-label`을 넘깁니다(WCAG 1.3.1, 4.1.2).
+- 선택지마다 `Radio.Text`가 있어야 합니다.
+- 묶음 전체의 오류는 묶음 아래에 문구로 보여 줍니다(WCAG 3.3.1).
+
+## 토큰
+
+</Ko>
+
+<Canvas of={RadioStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **SelectField** / **ComboboxField**: one value from a long list.
+- **Checkbox**: any number of choices.
+- **SegmentedControl**: switching views.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **SelectField** / **ComboboxField**: 긴 목록에서 값 하나.
+- **Checkbox**: 원하는 만큼 고르기.
+- **SegmentedControl**: 보기 전환.
+
+</Ko>

package/src/components/Reveal/Reveal.usage.mdx

@@ -0,0 +1,105 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle } from '../../guidelines/_components/Lang';
+import * as RevealStories from './Reveal.stories';
+
+<Meta of={RevealStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# Reveal
+
+Opens a small block out of zero height, so content that arrives underneath
+something the reader is looking at slides the page down instead of making it
+jump.
+
+</En>
+
+<Ko>
+
+# Reveal
+
+작은 블록을 높이 0에서 펼쳐 엽니다. 사용자가 보고 있는 요소 아래에 내용이 새로 생길 때
+페이지가 한 번에 튀지 않고 부드럽게 밀려 내려갑니다.
+
+</Ko>
+
+<Canvas of={RevealStories.Default} />
+
+<En>
+
+## When to use
+
+- A rationale that opens under an answer once it is checked.
+- A reason field or note that opens under a choice, such as the comment box
+  under "Reject" in a review dialog. Give each branch its own `key` so
+  switching branches opens the new block again.
+- A validation message under a field.
+
+## When not to use
+
+- The block opens and closes again → `Collapsible` (or `Accordion`), which
+  keeps the node mounted and animates both ways. Reveal only opens; the caller
+  mounts it when the content should appear.
+- Long lists, tables or anything with its own scroll → render it directly.
+  Reveal animates a layout property every frame, which is fine for a short
+  block and costly for a big one.
+- The element should appear without pushing anything → `Appear`.
+
+## Reduced motion and accessibility
+
+- With `prefers-reduced-motion: reduce` the block opens instantly. The content
+  is the information; the opening only keeps the page from seeming to break.
+- Reveal does not move focus or announce the new text. A validation message
+  should still be tied to its field (`FieldError` inside a `FormControl`, which
+  sets `aria-describedby` and `aria-invalid`) and described in words
+  (WCAG 3.3.1).
+- Reveal adds two `div`s (the animating grid and the clipping box inside it).
+  Do not put it inside a `<button>`, a `<tr>` or an Ark part that needs its
+  children directly (ACCESSIBILITY.md §5); animate the inner element instead.
+
+## Props
+
+Reveal also takes Box props; layout props land on the outer element.
+
+</En>
+
+<Ko>
+
+## 언제 쓰나요
+
+- 답을 확인한 뒤 그 답 아래에 해설이 열릴 때.
+- 선택지 아래에 사유 입력란이나 안내가 열릴 때. 예를 들어 검토 창에서 "거절"을 고르면
+  아래에 의견란이 열립니다. 갈래마다 `key`를 따로 주면, 다른 갈래로 바꿀 때 새 블록이
+  다시 펼쳐집니다.
+- 입력란 아래에 검증 메시지가 나타날 때.
+
+## 언제 쓰지 않나요
+
+- 열렸다가 다시 닫혀야 한다면 `Collapsible`(또는 `Accordion`)을 씁니다. 노드를
+  마운트된 채로 두고 양쪽 방향으로 애니메이션합니다. Reveal은 열기만 하며, 내용이
+  나타날 때 호출하는 쪽이 마운트합니다.
+- 긴 목록, 표, 자체 스크롤이 있는 영역이라면 그냥 바로 그립니다. Reveal은 매 프레임
+  레이아웃 속성을 바꾸므로 짧은 블록에는 괜찮지만 큰 블록에는 부담이 됩니다.
+- 아무것도 밀어내지 않고 나타나야 한다면 `Appear`를 씁니다.
+
+## 동작 줄이기와 접근성
+
+- `prefers-reduced-motion: reduce`에서는 바로 열립니다. 정보는 내용에 있고, 펼치는
+  동작은 페이지가 깨져 보이지 않게 하려는 장치일 뿐입니다.
+- Reveal은 초점을 옮기거나 새 문구를 읽어 주지 않습니다. 검증 메시지는 여전히
+  입력란과 연결하고(`FormControl` 안의 `FieldError`가 `aria-describedby`와
+  `aria-invalid`를 연결합니다) 문장으로 설명해야 합니다(WCAG 3.3.1).
+- Reveal은 `div`를 두 개 더합니다(애니메이션되는 그리드와 그 안에서 내용을 자르는
+  상자). `<button>`, `<tr>`, 자식을 직접 다루는 Ark 파트 안에는 넣지 않고
+  (ACCESSIBILITY.md 5절), 안쪽 요소에 애니메이션을 줍니다.
+
+## 속성
+
+Box 속성도 받으며, 레이아웃 속성은 바깥 요소에 적용됩니다.
+
+</Ko>
+
+<ArgTypes of={RevealStories} include={['durationMs']} />

package/src/components/ScaledContext/ScaledContext.usage.mdx

@@ -0,0 +1,111 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle } from '../../guidelines/_components/Lang';
+import * as ScaledContextStories from './ScaledContext.stories';
+
+<Meta of={ScaledContextStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# ScaledContext
+
+Re-scales a whole subtree from one `fontSize`: type, spacing and component
+sizes grow or shrink together.
+
+</En>
+
+<Ko>
+
+# ScaledContext
+
+`fontSize` 하나로 하위 트리 전체의 크기를 바꿉니다. 글자, 간격, 컴포넌트 크기가 함께
+커지거나 작아집니다.
+
+</Ko>
+
+<Canvas of={ScaledContextStories.ScalingRem} />
+
+<En>
+
+## When to use
+
+- A reading surface that runs at a larger base than the app, such as a chat
+  thread at 16px in a 14px app.
+- A dense block inside that surface (a markdown table, a diff, tool output)
+  that should drop back to the app's 14px base.
+- A column that should grow at a breakpoint as one unit, for example an
+  authentication form at 14px up to `xl` and 16px above it
+  (`fontSize={{ base: '14px', xl: '16px' }}`).
+
+## When not to use
+
+- Changing the size of one piece of text → a `textStyle` or `fontSize` on the
+  Typography component.
+- Making a single control bigger or smaller → that component's `size` prop.
+
+## Accessibility
+
+- Prefer `rem` values. A `rem` scale still follows the reader's browser
+  font-size setting; a `px` value fixes the base for that subtree.
+- Scaling down for density must not push text below a readable size or make
+  targets hard to hit. Check the smallest text and the control heights in the
+  scaled block.
+- ScaledContext renders a `div`. Pass `css={{ display: 'contents' }}` when the
+  wrapper must not take part in layout.
+
+## Props
+
+ScaledContext takes Box props; there are no props of its own. `fontSize` sets
+the scale. Text styles in this theme are already in `em`, so type follows
+`fontSize`; ScaledContext rewrites the `spacing` and `sizes` tokens that are in
+`rem` to `em` on the wrapper, so padding, gaps and control heights follow too.
+Tokens in `px` are left alone. A `style` you pass is merged over the rewritten
+variables. ScaledContexts can be nested; each level scales from its own
+`fontSize`.
+
+It reads Chakra's internal token maps. If a future Chakra release renames them,
+scaling stops silently, so check a scaled screen after a Chakra upgrade.
+
+</En>
+
+<Ko>
+
+## 언제 쓰나요
+
+- 앱보다 큰 기준 크기로 읽히는 영역. 예를 들어 14px 앱 안에서 16px로 보이는 채팅 대화.
+- 그런 영역 안에서 다시 앱 기준인 14px로 돌아가야 하는 촘촘한 블록(마크다운 표, diff,
+  도구 출력).
+- 특정 화면 너비에서 한 덩어리로 커져야 하는 열. 예를 들어 인증 화면의 입력 폼을 `xl`
+  전까지는 14px, 그 위로는 16px로 둡니다(`fontSize={{ base: '14px', xl: '16px' }}`).
+
+## 언제 쓰지 않나요
+
+- 글자 하나의 크기만 바꾼다면 Typography 컴포넌트의 `textStyle`이나 `fontSize`를 씁니다.
+- 컨트롤 하나만 키우거나 줄인다면 그 컴포넌트의 `size` 속성을 씁니다.
+
+## 접근성
+
+- 가능하면 `rem` 값을 씁니다. `rem`은 사용자가 브라우저에서 정한 글자 크기를 그대로
+  따르지만, `px` 값은 그 하위 트리의 기준을 고정합니다.
+- 촘촘하게 줄일 때 글자가 읽기 힘들 만큼 작아지거나 누르기 어려운 크기가 되지 않게
+  합니다. 줄인 블록에서 가장 작은 글자와 컨트롤 높이를 확인합니다.
+- ScaledContext는 `div`를 그립니다. 감싸는 요소가 레이아웃에 끼어들면 안 될 때는
+  `css={{ display: 'contents' }}`를 넘깁니다.
+
+## 속성
+
+ScaledContext는 Box 속성을 받으며 자체 속성은 없습니다. 크기는 `fontSize`로 정합니다.
+이 테마의 텍스트 스타일은 이미 `em` 단위라 글자는 `fontSize`를 따릅니다. ScaledContext는
+`rem`으로 된 `spacing`, `sizes` 토큰을 감싸는 요소에서 `em`으로 바꿔 쓰므로, 안쪽 여백,
+간격, 컨트롤 높이도 함께 따라갑니다. `px` 토큰은 그대로 둡니다. 넘긴 `style`은 바꾼
+변수 위에 합쳐집니다. 여러 겹으로 겹쳐 쓸 수 있고, 각 단계는 자기 `fontSize`를 기준으로
+크기를 정합니다.
+
+Chakra 내부의 토큰 맵을 읽습니다. 이후 Chakra 버전에서 이 구조의 이름이 바뀌면 아무
+경고 없이 크기 조정이 멈추므로, Chakra를 올린 뒤에는 크기를 조정한 화면을 확인합니다.
+
+</Ko>
+
+<Canvas of={ScaledContextStories.NestedScaling} />

package/src/components/SeeMoreButton/SeeMoreButton.stories.tsx

@@ -1,8 +1,13 @@
+import { useState } from 'react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
+import { Button, buttonVariantStyles } from '../Button';
+import { ChevronRightIcon } from '../Icon';
 import { SeeMoreButton } from './SeeMoreButton';
-import { SeeMoreButtonProps } from './SeeMoreButton.types';
-import { useState } from 'react';
+import { seeMoreButtonStyles } from './SeeMoreButton.styles';
 
 const meta = {
   title: 'Components/SeeMoreButton',
@@ -55,3 +60,142 @@ export const Default: Story = {
 export const AllShown: Story = {
   args: { currentCount: 10, maxCount: 10, disabled: true },
 };
+
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `SeeMoreButton.usage.mdx` with <Canvas of={…} />. Hidden from
+// the sidebar (`!dev`); `tags` is written out on each story because the
+// indexer reads CSF statically.
+
+const REVIEWS = [
+  '답변이 빠르고 출처를 같이 보여 줘서 좋아요.',
+  '학사 규정 질문에 정확하게 답합니다.',
+  '긴 문서도 요약을 잘해요.',
+  '가끔 예전 공지를 가져옵니다.',
+  '수강 신청 기간에 특히 유용했어요.',
+  '영어 질문에도 한국어로 답해 줍니다.',
+  '표로 정리해 달라고 하면 표로 줍니다.',
+];
+
+const ReviewRow = ({ text }: { text: string }) => (
+  <Text
+    py={3}
+    fontSize="sm"
+    color="fg.default"
+    borderBottomWidth="1px"
+    borderColor="border.subtle"
+    _last={{ borderBottomWidth: 0 }}
+  >
+    {text}
+  </Text>
+);
+
+/** A review list that grows in place, like FactChat's store reviews. */
+export const DoGrowTheList: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: grow the list in place, remove the button at the end',
+  render: () => {
+    const [shown, setShown] = useState(3);
+    return (
+      <Box maxW="420px">
+        {REVIEWS.slice(0, shown).map((text) => (
+          <ReviewRow key={text} text={text} />
+        ))}
+        {shown < REVIEWS.length && (
+          <SeeMoreButton
+            currentCount={shown}
+            maxCount={REVIEWS.length}
+            onClick={() => setShown((n) => Math.min(n + 3, REVIEWS.length))}
+          />
+        )}
+      </Box>
+    );
+  },
+};
+
+export const DontNavigate: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: SeeMoreButton to open another page",
+  render: () => (
+    <Box maxW="420px">
+      {REVIEWS.slice(0, 3).map((text) => (
+        <ReviewRow key={text} text={text} />
+      ))}
+      <SeeMoreButton currentCount={3} maxCount={128} />
+    </Box>
+  ),
+};
+
+export const DoLinkToFullPage: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: a link-shaped Button to open the full list',
+  render: () => (
+    <Box maxW="420px">
+      <Flex justify="space-between" align="center" mb={1}>
+        <Text fontWeight="bold" color="fg.default">
+          리뷰
+        </Text>
+        <Button as="a" href="#" variant="ghost" size="sm">
+          전체 보기
+          <ChevronRightIcon />
+        </Button>
+      </Flex>
+      {REVIEWS.slice(0, 3).map((text) => (
+        <ReviewRow key={text} text={text} />
+      ))}
+    </Box>
+  ),
+};
+
+/** Tokens SeeMoreButton reads: the ghost Button recipe plus its hairline. */
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => {
+    const ghost = buttonVariantStyles.ghost as {
+      color?: string;
+      _hover?: { bgColor?: string };
+      _active?: { bgColor?: string };
+    };
+    return (
+      <TokenTable
+        rows={[
+          {
+            token: seeMoreButtonStyles.borderTopColor,
+            use: <T en="top hairline" ko="위쪽 구분선" />,
+          },
+          ...(ghost.color
+            ? [{ token: ghost.color, use: <T en="label" ko="글자" /> }]
+            : []),
+          ...(ghost._hover?.bgColor
+            ? [
+                {
+                  token: ghost._hover.bgColor,
+                  use: <T en="hover fill" ko="마우스 올림 바탕" />,
+                },
+              ]
+            : []),
+          ...(ghost._active?.bgColor
+            ? [
+                {
+                  token: ghost._active.bgColor,
+                  use: <T en="pressed fill" ko="누름 바탕" />,
+                },
+              ]
+            : []),
+          {
+            token: 'disabled.fgGhost',
+            use: <T en="disabled label" ko="비활성 글자" />,
+          },
+          {
+            token: 'focus.ring',
+            use: <T en="keyboard focus ring" ko="키보드 초점 링" />,
+          },
+        ]}
+      />
+    );
+  },
+};