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

package/src/components/BottomSheet/BottomSheetBody.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+
+import type { BottomSheetBodyProps } from './BottomSheet.types';
+import { StyledBody } from './BottomSheetContext';
+
+/**
+ * The scrolling region. Takes whatever height the header and footer leave and
+ * scrolls inside it; zag only starts a drag from here once the list is scrolled
+ * to the top (`preventDragOnScroll`), so scrolling a list never drags the sheet.
+ */
+export const BottomSheetBody = forwardRef<HTMLDivElement, BottomSheetBodyProps>(
+  (props, ref) => <StyledBody ref={ref} {...props} />
+);
+
+BottomSheetBody.displayName = 'BottomSheetBody';

package/src/components/BottomSheet/BottomSheetCloseButton.tsx

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react';
+
+import { useTranslate } from '@/hooks/useTranslate';
+
+import { CloseIcon } from '../Icon';
+import { IconButton } from '../IconButton';
+import type { BottomSheetCloseButtonProps } from './BottomSheet.types';
+import { StyledCloseTrigger } from './BottomSheetContext';
+
+/**
+ * Closes the sheet. Placed in the top-right corner of `BottomSheetContent`;
+ * render it as a direct child of the content (next to the header, not inside
+ * it), the way `ModalCloseButton` sits in `ModalContent`.
+ *
+ * Carries a translated `aria-label` ("닫기") by default — an icon-only button
+ * has no other name.
+ */
+export const BottomSheetCloseButton = forwardRef<
+  HTMLButtonElement,
+  BottomSheetCloseButtonProps
+>(({ children, ...rest }, ref) => {
+  const translate = useTranslate();
+
+  return (
+    <StyledCloseTrigger asChild>
+      <IconButton
+        ref={ref}
+        aria-label={translate('close') as string}
+        size="sm"
+        variant="ghost"
+        colorPalette="neutral"
+        {...rest}
+      >
+        {children ?? <CloseIcon boxSize="xs" aria-hidden />}
+      </IconButton>
+    </StyledCloseTrigger>
+  );
+});
+
+BottomSheetCloseButton.displayName = 'BottomSheetCloseButton';

package/src/components/BottomSheet/BottomSheetContent.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react';
+
+import { ScaledContext } from '../ScaledContext';
+import type { BottomSheetContentProps } from './BottomSheet.types';
+import {
+  StyledContent,
+  StyledGrabber,
+  StyledGrabberIndicator,
+  StyledPositioner,
+} from './BottomSheetContext';
+
+/**
+ * The sheet surface: Ark's positioner, the content panel and, by default, the
+ * drag handle. Style props land on the panel.
+ *
+ * The panel is capped at 85% of the dynamic viewport height; put long content
+ * in `BottomSheetBody`, which is the part that scrolls.
+ */
+export const BottomSheetContent = forwardRef<
+  HTMLDivElement,
+  BottomSheetContentProps
+>(({ showGrabber = true, children, ...rest }, ref) => {
+  return (
+    <StyledPositioner>
+      <StyledContent ref={ref} pt={showGrabber ? undefined : 3} {...rest}>
+        {showGrabber && (
+          // The handle is a pointer affordance only — the sheet is closed from
+          // the keyboard with Escape or BottomSheetCloseButton.
+          <StyledGrabber aria-hidden>
+            <StyledGrabberIndicator />
+          </StyledGrabber>
+        )}
+        {/* Same base size Modal's content uses, so a list reads identically
+            in either surface. */}
+        <ScaledContext fontSize="14px" css={{ display: 'contents' }}>
+          {children}
+        </ScaledContext>
+      </StyledContent>
+    </StyledPositioner>
+  );
+});
+
+BottomSheetContent.displayName = 'BottomSheetContent';

package/src/components/BottomSheet/BottomSheetContext.ts

@@ -0,0 +1,79 @@
+'use client';
+
+import { Drawer, useDrawerContext } from '@ark-ui/react/drawer';
+import {
+  createSlotRecipeContext,
+  type HTMLChakraProps,
+} from '@chakra-ui/react';
+
+import { bottomSheetSlotRecipe } from './BottomSheet.styles';
+import type { BottomSheetContextValue } from './BottomSheet.types';
+
+const { withRootProvider, withContext, useStyles } = createSlotRecipeContext({
+  recipe: bottomSheetSlotRecipe,
+});
+
+/**
+ * Chakra-styled Ark parts, one per recipe slot.
+ *
+ * Built the way Chakra builds its own Ark-backed components: `withRootProvider`
+ * resolves the recipe once at the root and `withContext` hands each part its
+ * slot's styles, so every part still takes style props, `css` and `asChild`.
+ */
+export const StyledRoot = withRootProvider<Drawer.RootProps>(Drawer.Root, {
+  // Nothing is in the DOM until the first open, and the content leaves it again
+  // once its exit animation has finished — a closed sheet holding a long list
+  // would otherwise keep every row mounted.
+  defaultProps: { lazyMount: true, unmountOnExit: true },
+});
+
+export const StyledBackdrop = withContext<
+  HTMLDivElement,
+  HTMLChakraProps<'div', Drawer.BackdropBaseProps>
+>(Drawer.Backdrop, 'backdrop', { forwardAsChild: true });
+export const StyledPositioner = withContext<
+  HTMLDivElement,
+  HTMLChakraProps<'div', Drawer.PositionerBaseProps>
+>(Drawer.Positioner, 'positioner', { forwardAsChild: true });
+export const StyledContent = withContext<
+  HTMLDivElement,
+  HTMLChakraProps<'div', Drawer.ContentBaseProps>
+>(Drawer.Content, 'content', { forwardAsChild: true });
+export const StyledGrabber = withContext<
+  HTMLDivElement,
+  HTMLChakraProps<'div', Drawer.GrabberBaseProps>
+>(Drawer.Grabber, 'grabber', { forwardAsChild: true });
+export const StyledGrabberIndicator = withContext<
+  HTMLDivElement,
+  HTMLChakraProps<'div', Drawer.GrabberIndicatorBaseProps>
+>(Drawer.GrabberIndicator, 'grabberIndicator', { forwardAsChild: true });
+export const StyledTitle = withContext<
+  HTMLHeadingElement,
+  HTMLChakraProps<'h2', Drawer.TitleBaseProps>
+>(Drawer.Title, 'title', { forwardAsChild: true });
+export const StyledCloseTrigger = withContext<
+  HTMLButtonElement,
+  HTMLChakraProps<'button', Drawer.CloseTriggerBaseProps>
+>(Drawer.CloseTrigger, 'closeTrigger', { forwardAsChild: true });
+export const StyledHeader = withContext<HTMLDivElement, HTMLChakraProps<'div'>>(
+  'div',
+  'header'
+);
+export const StyledBody = withContext<HTMLDivElement, HTMLChakraProps<'div'>>(
+  'div',
+  'body'
+);
+export const StyledFooter = withContext<HTMLDivElement, HTMLChakraProps<'div'>>(
+  'div',
+  'footer'
+);
+
+export const useBottomSheetStyles = useStyles;
+
+/**
+ * The open sheet's Ark drawer API — `open`, `setOpen`, `snapPoint`,
+ * `setSnapPoint`, `getContentSize`, … Call it from anything rendered inside
+ * `<BottomSheet>`.
+ */
+export const useBottomSheetContext = (): BottomSheetContextValue =>
+  useDrawerContext();

package/src/components/BottomSheet/BottomSheetFooter.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+
+import type { BottomSheetFooterProps } from './BottomSheet.types';
+import { StyledFooter } from './BottomSheetContext';
+
+/** Action row pinned below the body. */
+export const BottomSheetFooter = forwardRef<
+  HTMLDivElement,
+  BottomSheetFooterProps
+>((props, ref) => <StyledFooter ref={ref} {...props} />);
+
+BottomSheetFooter.displayName = 'BottomSheetFooter';

package/src/components/BottomSheet/BottomSheetHeader.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+
+import type { BottomSheetHeaderProps } from './BottomSheet.types';
+import { StyledHeader, StyledTitle } from './BottomSheetContext';
+
+/**
+ * The sheet's header row. Its children are rendered as the sheet's **title**
+ * (Ark's `Drawer.Title`), which is what the content's `aria-labelledby` points
+ * at — so a header is how a sheet gets its accessible name.
+ */
+export const BottomSheetHeader = forwardRef<
+  HTMLDivElement,
+  BottomSheetHeaderProps
+>(({ children, ...rest }, ref) => {
+  return (
+    <StyledHeader ref={ref} {...rest}>
+      <StyledTitle>{children}</StyledTitle>
+    </StyledHeader>
+  );
+});
+
+BottomSheetHeader.displayName = 'BottomSheetHeader';

package/src/components/BottomSheet/BottomSheetOverlay.tsx

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+
+import type { BottomSheetOverlayProps } from './BottomSheet.types';
+import { StyledBackdrop } from './BottomSheetContext';
+
+/**
+ * The scrim behind a modal sheet. `BottomSheet` already renders one unless
+ * `modal={false}`, so reach for this only to render a scrim yourself — for
+ * example a decorative one behind a non-modal sheet.
+ */
+export const BottomSheetOverlay = forwardRef<
+  HTMLDivElement,
+  BottomSheetOverlayProps
+>((props, ref) => <StyledBackdrop ref={ref} {...props} />);
+
+BottomSheetOverlay.displayName = 'BottomSheetOverlay';

package/src/components/BottomSheet/index.tsx

@@ -0,0 +1,22 @@
+export { BottomSheet } from './BottomSheet';
+export {
+  bottomSheetAnatomy,
+  bottomSheetSlotRecipe,
+} from './BottomSheet.styles';
+export type {
+  BottomSheetBodyProps,
+  BottomSheetCloseButtonProps,
+  BottomSheetContentProps,
+  BottomSheetContextValue,
+  BottomSheetFooterProps,
+  BottomSheetHeaderProps,
+  BottomSheetOverlayProps,
+  BottomSheetProps,
+} from './BottomSheet.types';
+export { BottomSheetBody } from './BottomSheetBody';
+export { BottomSheetCloseButton } from './BottomSheetCloseButton';
+export { BottomSheetContent } from './BottomSheetContent';
+export { useBottomSheetContext } from './BottomSheetContext';
+export { BottomSheetFooter } from './BottomSheetFooter';
+export { BottomSheetHeader } from './BottomSheetHeader';
+export { BottomSheetOverlay } from './BottomSheetOverlay';

package/src/components/Button/Button.cursor.test.tsx

@@ -0,0 +1,60 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Button } from './Button';
+
+/**
+ * A disabled Button must not show the pointer.
+ *
+ * The Button sets `cursor="pointer"` as a style prop, which Chakra emits
+ * outside its cascade layers, while the recipe's disabled cursor sits inside
+ * `@layer recipes` — so the pointer won and a disabled button read as
+ * clickable (FactChat's 「현재 플랜」 button).
+ */
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+describe('Button disabled cursor', () => {
+  it('enabled keeps the pointer', () => {
+    wrap(<Button>on</Button>);
+    expect(getComputedStyle(screen.getByRole('button')).cursor).toBe('pointer');
+  });
+
+  it('disabled shows not-allowed', () => {
+    wrap(<Button disabled>off</Button>);
+    expect(getComputedStyle(screen.getByRole('button')).cursor).toBe(
+      'not-allowed'
+    );
+  });
+
+  it('a call-site _disabled does not drop it', () => {
+    wrap(
+      <Button disabled _disabled={{ opacity: 0.3 }}>
+        off
+      </Button>
+    );
+    expect(getComputedStyle(screen.getByRole('button')).cursor).toBe(
+      'not-allowed'
+    );
+  });
+
+  it('lift keeps it too', () => {
+    wrap(
+      <Button disabled lift>
+        off
+      </Button>
+    );
+    expect(getComputedStyle(screen.getByRole('button')).cursor).toBe(
+      'not-allowed'
+    );
+  });
+
+  it('loading shows progress, not not-allowed', () => {
+    wrap(<Button loading>busy</Button>);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(getComputedStyle(button).cursor).toBe('progress');
+  });
+});

package/src/components/Button/Button.lift.test.tsx

@@ -0,0 +1,150 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Button } from './Button';
+
+/**
+ * `lift` is opt-in emphasis, and the two ways it can go wrong are both invisible
+ * in review: it can quietly become the default for every button, and its shadow
+ * can eat the keyboard focus ring — Chakra emits `:hover` *after*
+ * `:focus-visible`, so a `box-shadow` on hover wins over the ring on a button
+ * that is both. That is why the shadow is a `filter`, which cannot collide.
+ */
+const setup = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+const emittedCss = () =>
+  Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('');
+
+const cssClass = (el: Element) =>
+  (el.getAttribute('class') ?? '')
+    .split(' ')
+    .find((c) => c.startsWith('css-')) ?? '';
+
+/** The declarations of every rule keyed on this element's class. */
+const rulesFor = (el: Element) =>
+  [
+    ...emittedCss().matchAll(
+      new RegExp(`\\.${cssClass(el)}([^{]*)\\{([^{}]*)\\}`, 'g')
+    ),
+  ].map(([, selector, declarations]) => ({ selector, declarations }));
+
+/**
+ * Every hover declaration, joined — not the first match. Chakra's own recipe
+ * layer also emits `:hover` rules for this class, so picking one finds theirs.
+ */
+const rulesMatching = (el: Element, pseudo: string) =>
+  rulesFor(el)
+    .filter((r) => r.selector.includes(pseudo))
+    .map((r) => r.declarations)
+    .join(' ');
+
+const hoverRule = (el: Element) => rulesMatching(el, ':hover');
+
+describe('Button lift', () => {
+  it('does nothing unless asked for', () => {
+    const { getByRole } = setup(<Button colorPalette="primary">A</Button>);
+    expect(hoverRule(getByRole('button'))).not.toContain('translate');
+  });
+
+  it('raises the button and shadows it on hover', () => {
+    const { getByRole } = setup(
+      <Button colorPalette="primary" lift>
+        A
+      </Button>
+    );
+    const rule = hoverRule(getByRole('button'));
+    expect(rule).toContain('translate:0 -1px');
+    expect(rule).toContain('drop-shadow');
+  });
+
+  it('never puts a box-shadow on hover, which would outrank the focus ring', () => {
+    const { getByRole } = setup(
+      <Button colorPalette="primary" lift>
+        A
+      </Button>
+    );
+    // The ring is a box-shadow and `:hover` is emitted later, so this is the
+    // assertion that keeps a focused-and-hovered button visibly focused.
+    expect(hoverRule(getByRole('button'))).not.toContain('box-shadow');
+
+    expect(rulesMatching(getByRole('button'), ':focus-visible')).toContain(
+      'box-shadow'
+    );
+  });
+
+  it('keeps the variant colours it was merged into', () => {
+    const { getByRole } = setup(
+      <Button colorPalette="primary" variant="solid" lift>
+        A
+      </Button>
+    );
+    // Spreading over `_hover` instead of merging would have dropped this.
+    expect(hoverRule(getByRole('button'))).toContain('background');
+  });
+
+  it('animates what it moves', () => {
+    const { getByRole } = setup(<Button lift>A</Button>);
+    const base = rulesFor(getByRole('button'))
+      .map((r) => r.declarations)
+      .join(' ');
+    expect(base).toContain('translate var(--chakra-durations-fast)');
+    expect(base).toContain('filter var(--chakra-durations-fast)');
+  });
+});
+
+/**
+ * A call site that adds one line to `_active` used to replace the whole object,
+ * so the variant's pressed colour and the press `scale` both vanished and the
+ * button stopped reading as pressed. FactChat's quiz footer does exactly this
+ * (a 2px press ledge on the submit button), which is how it was found.
+ */
+describe('a call site that presses too', () => {
+  const pressed = (el: Element) => rulesMatching(el, ':active');
+
+  it('keeps the variant press when the call site adds its own', () => {
+    const { getByRole } = setup(
+      <Button
+        colorPalette="primary"
+        variant="solid"
+        _active={{ transform: 'translateY(2px)' }}
+      >
+        제출
+      </Button>
+    );
+    const rule = pressed(getByRole('button'));
+    expect(rule).toContain('transform:translateY(2px)'); // theirs
+    expect(rule).toContain('scale:0.97'); // ours, previously erased
+    expect(rule).toContain('background-color'); // and the pressed colour
+  });
+
+  it('does the same for hover', () => {
+    const { getByRole } = setup(
+      <Button
+        colorPalette="primary"
+        variant="solid"
+        _hover={{ outline: '1px' }}
+      >
+        A
+      </Button>
+    );
+    const rule = rulesMatching(getByRole('button'), ':hover');
+    expect(rule).toContain('outline');
+    expect(rule).toContain('background');
+  });
+
+  it('transitions a transform the call site sets, which `all` used to cover', () => {
+    // Nothing in this component sets `transform` — the press uses `scale` so it
+    // cannot clobber a call site — but naming the properties dropped the call
+    // site's own transform out of the transition and left it snapping.
+    const { getByRole } = setup(<Button>A</Button>);
+    const base = rulesFor(getByRole('button'))
+      .map((r) => r.declarations)
+      .join(' ');
+    expect(base).toContain('transform var(--chakra-durations-fast)');
+  });
+});

package/src/components/Button/Button.press.test.tsx

@@ -0,0 +1,54 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { buttonColorPaletteStyles } from './Button.styles';
+
+/**
+ * The press must not travel through `transform`.
+ *
+ * `transform` is one property, so a `_active` of `transform: scale(0.97)`
+ * replaces whatever transform the call site set — and call sites use it for
+ * layout (`CopyableCode` centres its button with `translateY(-50%)`). Pressing
+ * such a button moved it. The individual `scale` property composes instead.
+ */
+describe('Button press does not clobber a call-site transform', () => {
+  it('no variant presses via transform', () => {
+    const offenders: string[] = [];
+    Object.entries(buttonColorPaletteStyles).forEach(([palette, variants]) => {
+      Object.entries(variants).forEach(([variant, style]) => {
+        const active = (style as Record<string, Record<string, unknown>>)
+          ._active;
+        if (active && 'transform' in active)
+          offenders.push(`${palette}.${variant}`);
+      });
+    });
+    expect(offenders).toEqual([]);
+  });
+
+  it('every variant still presses, via scale', () => {
+    const missing: string[] = [];
+    Object.entries(buttonColorPaletteStyles).forEach(([palette, variants]) => {
+      Object.entries(variants).forEach(([variant, style]) => {
+        const active = (style as Record<string, Record<string, unknown>>)
+          ._active;
+        if (!active || active.scale !== '0.97')
+          missing.push(`${palette}.${variant}`);
+      });
+    });
+    expect(missing).toEqual([]);
+  });
+
+  it('a positioning transform survives on the rendered button', () => {
+    const { container } = render(
+      <ChakraProvider value={system}>
+        <button style={{ transform: 'translateY(-50%)' }} />
+      </ChakraProvider>
+    );
+    // scale and transform are separate properties, so both can coexist.
+    const css = system.css({ transform: 'translateY(-50%)', scale: '0.97' });
+    expect(css).toEqual({ transform: 'translateY(-50%)', scale: '0.97' });
+    expect(container).toBeTruthy();
+  });
+});

package/src/components/Button/Button.stories.tsx

@@ -1,4 +1,12 @@
-import { Box, Flex, VStack, HStack, Text, Grid, GridItem } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  VStack,
+  HStack,
+  Text,
+  Grid,
+  GridItem,
+} from '@chakra-ui/react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Sparkles } from '../Icon';
@@ -384,3 +392,74 @@ export const GhostVariant: Story = {
     </Flex>
   ),
 };
+
+/**
+ * `lift` raises the button 1px toward the pointer on hover and puts a shadow
+ * under it; pressing sets it back down under the existing `scale`.
+ *
+ * Off by default on purpose. A lift is emphasis, and a row of six lifting
+ * buttons is noise — use it where one button is the point of the screen.
+ *
+ * The shadow is a `filter: drop-shadow`, not a `box-shadow`: the keyboard focus
+ * ring is a box-shadow and Chakra emits `:hover` after `:focus-visible`, so a
+ * box-shadow here would eat the ring on a button that is both focused and
+ * hovered. Tab to these and then hover them to check.
+ */
+export const Lift: Story = {
+  render: () => (
+    <VStack align="flex-start" gap={6} p={4}>
+      <HStack gap={4}>
+        <Button colorPalette="primary" variant="solid" lift>
+          시작하기
+        </Button>
+        <Button colorPalette="primary" variant="solid">
+          기본 (lift 없음)
+        </Button>
+      </HStack>
+      <HStack gap={4}>
+        <Button colorPalette="neutral" variant="outline" lift>
+          Outline
+        </Button>
+        <Button colorPalette="primary" variant="soft" lift>
+          Soft
+        </Button>
+        <Button colorPalette="primary" variant="solid" lift disabled>
+          Disabled
+        </Button>
+      </HStack>
+    </VStack>
+  ),
+};
+
+/**
+ * `as` swaps the rendered element **and** the props it accepts.
+ *
+ * A link-shaped button is a real pattern — a call to action that navigates
+ * rather than acts. Rendering it as an `<a>` is also the accessible choice:
+ * it lands in the tab order as a link, announces as one, and keeps
+ * middle-click, "open in new tab" and "copy link address" working.
+ *
+ * `href`, `target` and `rel` below are `<a>` props, and they type-check
+ * because `as="a"` carried them in. The same works for a router link —
+ * `<Button as={NextLink} href="/admin" prefetch={false}>`.
+ */
+export const AsLink: Story = {
+  render: () => (
+    <Flex gap={4} wrap="wrap" align="center">
+      <Button as="a" href="#" colorPalette="primary" variant="solid">
+        같은 탭에서 열기
+      </Button>
+      <Button
+        as="a"
+        href="https://example.com"
+        target="_blank"
+        rel="noreferrer"
+        colorPalette="secondary"
+        variant="outline"
+      >
+        새 탭에서 열기
+      </Button>
+    </Flex>
+
+  ),
+};