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

package/src/components/CodeTabs/CopyButton.tsx

@@ -5,6 +5,7 @@ import { useTranslate } from '@/hooks/useTranslate';
 import { FaRegCopy } from '../Icon';
 import { IconButton } from '../IconButton';
 import { Tooltip } from '../Tooltip';
+import { CODE_CHROME } from './CodeTabs.styles';
 
 export interface CopyButtonProps {
   onCopy: (code: string) => void;
@@ -47,14 +48,15 @@ export const CopyButton = ({ onCopy, code }: CopyButtonProps) => {
         aria-label="Copy"
         borderRadius="full"
         size="sm"
-        colorPalette="neutral"
         variant="ghost"
-        color="fg.muted"
+        color={CODE_CHROME.fgMuted}
         _hover={{
-          bgColor: 'whiteAlpha.400',
+          bgColor: CODE_CHROME.bgHover,
+          color: CODE_CHROME.fg,
         }}
         _active={{
-          bgColor: 'whiteAlpha.400',
+          bgColor: CODE_CHROME.bgActive,
+          color: CODE_CHROME.fg,
         }}
         onClick={handleCopyClick}
       >

package/src/components/Confetti/Confetti.stories.tsx

@@ -70,7 +70,7 @@ export const Seeded: Story = {
       <Stack gap={4} align="flex-start">
         <Button
           size="sm"
-          variant="outline"
+          variant="secondary"
           onClick={() => setSeed((s) => s + 1)}
         >
           다시 뿌리기 (seed {seed})

package/src/components/Confetti/Confetti.tsx

@@ -4,39 +4,7 @@ import { Box } from '@chakra-ui/react';
 import { MOTION_DURATION_MS } from '../../theme/motion';
 import { confettiPiece } from './Confetti.styles';
 import { ConfettiProps } from './Confetti.types';
-
-/**
- * Literal hex, and the one place in this library that is deliberately off the
- * palette.
- *
- * The first version reached for `primary.main` / `success.main` /
- * `warning.main` / `danger.main`, which was wrong twice over. **Semantically**,
- * those colours mean things: raining the error red and the warning amber over
- * "payment complete" says something the screen does not. Confetti is the one
- * element on a page with nothing to communicate, so a colour that communicates
- * is the wrong kind of colour.
- *
- * **And optically**, the palette is built for interface legibility — text and
- * controls on a light surface — so it sits dark and desaturated: average
- * lightness 47%, nothing above 80% saturation, and three of the five in the
- * blue range. Fifty pieces of that read as a chart legend falling. These six
- * average 56% lightness, four of them are fully saturated, and they span the
- * whole wheel (9°–330°), which is what makes a burst read as a burst.
- *
- * The cost, stated rather than hidden: these do not follow a re-theme, and they
- * do not adapt to dark mode — a bright hex on a dark surface is brighter still.
- * That is acceptable for a burst that lasts two seconds and carries no
- * information, and it is why `colors` is a prop: an app that needs its own
- * festival palette passes one.
- */
-const DEFAULT_COLORS = [
-  '#FFD700', // gold
-  '#FF69B4', // hot pink
-  '#00CED1', // turquoise
-  '#FF6347', // tomato
-  '#9370DB', // medium purple
-  '#32CD32', // lime
-];
+import { DEFAULT_CONFETTI_COLORS } from './confettiColors';
 
 /**
  * A seeded generator, so one burst is stable across re-renders.
@@ -81,15 +49,12 @@ const scatter = (seed: number) => {
  * nothing, and doing it in CSS keeps the decision on the same media query as
  * every other preset instead of on a hook that has to guess before hydration.
  *
- * **The default colours are literal hex, and this is the one place in the
- * library deliberately off the palette.** Semantic tokens mean things, and
- * raining `danger.main` over "payment complete" says something the screen does
- * not — confetti is the one element on a page with nothing to communicate. The
- * palette is also built for interface legibility on a light surface, so it runs
- * dark and narrow (average lightness 47%, three of five in the blue range) and
- * fifty pieces of it read as a chart legend falling. The cost is real and
- * stated: these do not follow a re-theme and do not adapt to dark mode. `colors`
- * is a prop for an app that needs its own.
+ * **The default colours are decorative only** (`confettiColors.ts`): coral,
+ * beige and the system hues that mean nothing — red, yellow, green and blue are
+ * left out because they are the danger, warning, success and info colours, and
+ * raining error red over "payment complete" says something the screen does not.
+ * They are light-mode hex and do not flip for dark mode. `colors` is a prop for
+ * an app that needs its own.
  *
  * **Takes no children — it is an overlay, not a wrapper.** It renders absolutely
  * against the nearest positioned ancestor, which is therefore the stage: give
@@ -104,7 +69,7 @@ export const Confetti = forwardRef(
   (
     {
       pieceCount = 50,
-      colors = DEFAULT_COLORS,
+      colors = DEFAULT_CONFETTI_COLORS,
       seed = 1,
       ...rest
     }: ConfettiProps,

package/src/components/Confetti/confettiColors.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest';
+
+import { SCHEMES, SYSTEM_HUES } from '../../theme/palette.generated';
+import { DEFAULT_CONFETTI_COLORS } from './confettiColors';
+
+/**
+ * Status colours mean things; a celebratory burst carries no information, so
+ * its defaults must not borrow them (same rule as LineGraph/seriesColors).
+ */
+const STATUS_ROLES = [
+  'danger-solid',
+  'success-solid',
+  'warning-solid',
+  'info-solid',
+];
+const STATUS_HUES = ['red', 'yellow', 'green', 'blue'] as const;
+
+const upper = (hex: string) => hex.toUpperCase();
+const defaults = new Set(DEFAULT_CONFETTI_COLORS.map(upper));
+
+describe('Confetti default colours', () => {
+  it('contain no status solid from any scheme or mode', () => {
+    const hits = Object.entries(SCHEMES).flatMap(([scheme, modes]) =>
+      Object.entries(modes as Record<string, Record<string, string>>).flatMap(
+        ([mode, table]) =>
+          STATUS_ROLES.filter(
+            (role) => table[role] && defaults.has(upper(table[role]))
+          ).map((role) => `${scheme}.${mode}.${role} = ${table[role]}`)
+      )
+    );
+    expect(hits).toEqual([]);
+  });
+
+  it('contain no red, yellow, green or blue system hue value', () => {
+    const hits = STATUS_HUES.flatMap((hue) =>
+      Object.entries(SYSTEM_HUES[hue])
+        .filter(([, hex]) => defaults.has(upper(hex)))
+        .map(([variant, hex]) => `${hue}.${variant} = ${hex}`)
+    );
+    expect(hits).toEqual([]);
+  });
+
+  it('still spans the decorative hues', () => {
+    expect(defaults.has(upper(SYSTEM_HUES.purple.base))).toBe(true);
+    expect(DEFAULT_CONFETTI_COLORS.length).toBeGreaterThanOrEqual(8);
+  });
+});

package/src/components/Confetti/confettiColors.ts

@@ -0,0 +1,41 @@
+import type { SystemHue } from '../../theme/colors';
+import { CORAL, RAMPS, SYSTEM_HUES } from '../../theme/palette.generated';
+
+/**
+ * Hues that carry meaning elsewhere in the system and so never colour a piece
+ * by default: red, yellow and green are the danger, warning and success
+ * solids, and blue is info and links. The same rule as the chart series
+ * defaults (`LineGraph/seriesColors.ts`) — a red piece in a "payment complete"
+ * burst says something the screen does not.
+ */
+export const CONFETTI_EXCLUDED_HUES = [
+  'red',
+  'yellow',
+  'green',
+  'blue',
+] as const;
+
+const DECORATIVE_HUES = (Object.keys(SYSTEM_HUES) as SystemHue[]).filter(
+  (hue) => !(CONFETTI_EXCLUDED_HUES as readonly string[]).includes(hue)
+);
+
+/**
+ * Default piece colours: the house coral (`CORAL.base`, the send/accent coral —
+ * not a status colour), the house beige (`RAMPS.sand.light['8']`, the raw step
+ * behind `secondary.fg`), and the light-mode base of every system hue that
+ * carries no status meaning (brown, orange, mint, teal, cyan, indigo, purple,
+ * pink …).
+ *
+ * Raw hex rather than tokens is a choice, not a constraint. Each piece is a
+ * `<Box bg={…}>`, so a token string would resolve just as well; hex keeps the
+ * default in the same shape as the `colors` prop (any CSS colour string), and
+ * keeps the burst the same in both modes. The cost, stated rather than hidden:
+ * these are the LIGHT-mode values and do not follow dark mode — acceptable for
+ * a two-second burst that carries no information. `colors` is a prop for an
+ * app that needs its own (tokens included).
+ */
+export const DEFAULT_CONFETTI_COLORS: string[] = [
+  CORAL.base,
+  RAMPS.sand.light['8'],
+  ...DECORATIVE_HUES.map((hue) => SYSTEM_HUES[hue].base),
+];

package/src/components/Container/Container.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
   component: Container,
   args: {
     children: 'Container',
-    bg: 'primary.lighter',
+    bg: 'primary.washActive',
     p: 32,
     textAlign: 'center',
   },

package/src/components/CopyableCode/CopyableCode.tsx

@@ -121,8 +121,7 @@ export const CopyableCode = ({
         />
       </Card>
       <Button
-        colorPalette={copied ? 'success' : 'primary'}
-        variant="solid"
+        variant="primary"
         size="xs"
         onClick={handleCopy}
         position="absolute"

package/src/components/CountBadge/CountBadge.stories.tsx

@@ -0,0 +1,109 @@
+import { Flex, HStack, Text } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BellIcon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { CountBadge } from '.';
+
+const meta = {
+  title: 'Components/CountBadge',
+  component: CountBadge,
+  tags: ['autodocs'],
+  args: {
+    count: 5,
+  },
+  argTypes: {
+    count: { control: 'number' },
+    max: { control: 'number' },
+    dot: { control: 'boolean' },
+    showZero: { control: 'boolean' },
+    label: { control: 'text' },
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+  },
+} satisfies Meta<typeof CountBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
+
+/** Above `max` (default 99) the badge reads `99+`. */
+export const Capped: Story = {
+  args: { count: 120, label: '읽지 않은 알림 120개' },
+};
+
+/** Count 0 renders nothing unless `showZero`. */
+export const Zero: Story = {
+  render: () => (
+    <HStack gap={4}>
+      <Text textStyle="subtext">count=0 →</Text>
+      <CountBadge count={0} />
+      <Text textStyle="subtext">showZero →</Text>
+      <CountBadge count={0} showZero />
+    </HStack>
+  ),
+};
+
+/** Dot mode: no number. `aria-hidden` unless a `label` is given. */
+export const Dot: Story = {
+  render: () => (
+    <HStack gap={4}>
+      <CountBadge dot size="sm" />
+      <CountBadge dot />
+      <CountBadge dot size="lg" label="새 소식" />
+    </HStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <Flex gap={4} align="center">
+      {(['sm', 'md', 'lg'] as const).map((size) => (
+        <HStack key={size} gap={2}>
+          <CountBadge size={size} count={3} />
+          <CountBadge size={size} count={42} />
+          <CountBadge size={size} count={1000} />
+        </HStack>
+      ))}
+    </Flex>
+  ),
+};
+
+/** Next to a label, as in a nav item. */
+export const InContext: Story = {
+  render: () => (
+    <HStack gap={2}>
+      <Text>받은 편지함</Text>
+      <CountBadge count={12} label="읽지 않은 메시지 12개" />
+    </HStack>
+  ),
+};
+
+/**
+ * On an icon-only button the count belongs in the BUTTON's `aria-label`:
+ * that label replaces the button's whole subtree as its accessible name, so a
+ * `label` on the badge would never be announced. The badge stays unlabelled
+ * and is only the visible number.
+ */
+export const OnIconButton: Story = {
+  render: () => {
+    const unread = 5;
+    return (
+      <IconButton
+        aria-label={`알림, 읽지 않음 ${unread}개`}
+        variant="ghost"
+        position="relative"
+      >
+        <BellIcon />
+        <CountBadge
+          count={unread}
+          size="sm"
+          position="absolute"
+          top="-2px"
+          right="-2px"
+        />
+      </IconButton>
+    );
+  },
+};

package/src/components/CountBadge/CountBadge.styles.ts

@@ -0,0 +1,40 @@
+import type { BoxProps } from '@chakra-ui/react';
+
+import type { CountBadgeSize } from './CountBadge.types';
+
+/**
+ * Shared look: the `count.*` pair (coral-red fill, white number), a pill whose
+ * min-width equals its height so a single digit is a circle, and tabular
+ * figures so the width does not jitter as the number changes.
+ */
+export const countBadgeBaseStyles: BoxProps = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  bgColor: 'count.bg',
+  color: 'count.fg',
+  borderRadius: 'full',
+  fontWeight: 'bold',
+  lineHeight: '1',
+  whiteSpace: 'nowrap',
+  fontVariantNumeric: 'tabular-nums',
+};
+
+export const countBadgeSizeStyles: Record<CountBadgeSize, BoxProps> = {
+  sm: { h: '16px', minW: '16px', px: '4px', fontSize: '10px' },
+  md: { h: '18px', minW: '18px', px: '5px', fontSize: '11px' },
+  lg: { h: '22px', minW: '22px', px: '6px', fontSize: '12px' },
+};
+
+export const countBadgeDotSizes: Record<CountBadgeSize, string> = {
+  sm: '6px',
+  md: '8px',
+  lg: '10px',
+};
+
+/** `120, 99 → "99+"`; negative / non-finite → `"0"`. */
+export const formatCount = (count: number, max: number): string => {
+  const safe = Number.isFinite(count) && count > 0 ? Math.floor(count) : 0;
+  return safe > max ? `${max}+` : String(safe);
+};

package/src/components/CountBadge/CountBadge.test.tsx

@@ -0,0 +1,57 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { CountBadge } from './CountBadge';
+
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+describe('CountBadge', () => {
+  it('renders the count as text', () => {
+    wrap(<CountBadge count={5} data-testid="b" />);
+    expect(screen.getByTestId('b').textContent).toBe('5');
+  });
+
+  it('caps above max (default 99) as "99+"', () => {
+    wrap(<CountBadge count={120} data-testid="b" />);
+    expect(screen.getByTestId('b').textContent).toBe('99+');
+  });
+
+  it('honours a custom max', () => {
+    wrap(<CountBadge count={12} max={9} data-testid="b" />);
+    expect(screen.getByTestId('b').textContent).toBe('9+');
+  });
+
+  it('renders nothing for 0 unless showZero', () => {
+    const { container } = wrap(<CountBadge count={0} />);
+    expect(container.querySelector('[data-count-badge]')).toBeNull();
+
+    wrap(<CountBadge count={0} showZero data-testid="z" />);
+    expect(screen.getByTestId('z').textContent).toBe('0');
+  });
+
+  it('reads the label instead of the bare number', () => {
+    wrap(<CountBadge count={120} label="읽지 않은 알림 120개" />);
+    expect(screen.getByText('읽지 않은 알림 120개')).toBeTruthy();
+    expect(screen.getByText('99+').getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('dot mode renders a hidden dot with no number', () => {
+    wrap(<CountBadge dot count={3} data-testid="d" />);
+    const dot = screen.getByTestId('d');
+    expect(dot.textContent).toBe('');
+    expect(dot.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('dot mode with a label is a named image', () => {
+    wrap(<CountBadge dot label="새 소식" />);
+    expect(screen.getByRole('img', { name: '새 소식' })).toBeTruthy();
+  });
+
+  it('dot mode hides at count 0', () => {
+    const { container } = wrap(<CountBadge dot count={0} />);
+    expect(container.querySelector('[data-count-badge]')).toBeNull();
+  });
+});

package/src/components/CountBadge/CountBadge.tsx

@@ -0,0 +1,112 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { Box } from '@chakra-ui/react';
+
+import {
+  countBadgeBaseStyles,
+  countBadgeDotSizes,
+  countBadgeSizeStyles,
+  formatCount,
+} from './CountBadge.styles';
+import { CountBadgeProps } from './CountBadge.types';
+
+/**
+ * CountBadge — an unread / notification count (moved into the design system
+ * from FactChat's `UnreadCountBadge`).
+ *
+ * - Numeric: `count` as text, capped at `max` (default 99 → `"99+"`). Renders
+ *   nothing for 0 unless `showZero`.
+ * - Dot (`dot`): a small circle with no number. `aria-hidden` unless it is
+ *   given a `label` — then it is an `img` with that name.
+ *
+ * Give it a `label` whenever the number alone would not make sense out of
+ * context and the badge sits in readable content — next to a nav item's
+ * text, in a list row.
+ *
+ * NOT on an icon-only button: the button's `aria-label` replaces its whole
+ * subtree as the accessible name, so the badge's hidden label is never
+ * announced. Put the count in the button's `aria-label` instead and leave
+ * the badge unlabelled (it is then only the visible number):
+ *
+ * ```tsx
+ * <IconButton aria-label={`알림, 읽지 않음 ${n}개`} variant="ghost">
+ *   <BellIcon />
+ *   <CountBadge count={n} position="absolute" top={0} right={0} />
+ * </IconButton>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CountBadge count={5} />
+ * <CountBadge count={120} label="읽지 않은 알림 120개" />   // shows 99+
+ * <CountBadge dot label="새 소식" />
+ * ```
+ */
+export const CountBadge = forwardRef(
+  (
+    {
+      count,
+      max = 99,
+      dot = false,
+      showZero = false,
+      label,
+      size = 'md',
+      'aria-label': ariaLabel,
+      ...rest
+    }: CountBadgeProps,
+    ref?: ForwardedRef<HTMLSpanElement>
+  ) => {
+    const name = label ?? ariaLabel;
+    const isEmpty = (count ?? 0) <= 0;
+
+    if (dot) {
+      if (count !== undefined && isEmpty && !showZero) return null;
+      const dotSize = countBadgeDotSizes[size];
+      return (
+        <Box
+          as="span"
+          display="inline-block"
+          flexShrink={0}
+          boxSize={dotSize}
+          borderRadius="full"
+          bgColor="count.bg"
+          {...(name
+            ? { role: 'img', 'aria-label': name }
+            : { 'aria-hidden': true })}
+          data-count-badge="dot"
+          {...rest}
+          ref={ref}
+        />
+      );
+    }
+
+    if (isEmpty && !showZero) return null;
+
+    const text = formatCount(count ?? 0, max);
+
+    return (
+      <Box
+        as="span"
+        {...countBadgeBaseStyles}
+        {...countBadgeSizeStyles[size]}
+        data-count-badge="count"
+        {...rest}
+        ref={ref}
+      >
+        {name ? (
+          <>
+            <Box as="span" aria-hidden>
+              {text}
+            </Box>
+            <Box as="span" srOnly>
+              {name}
+            </Box>
+          </>
+        ) : (
+          text
+        )}
+      </Box>
+    );
+  }
+);
+
+CountBadge.displayName = 'CountBadge';

package/src/components/CountBadge/CountBadge.types.ts

@@ -0,0 +1,34 @@
+import type { BoxProps } from '@chakra-ui/react';
+
+export type CountBadgeSize = 'sm' | 'md' | 'lg';
+
+export type CountBadgeProps = Omit<BoxProps, 'children'> & {
+  /**
+   * The number to show. In numeric mode a count of 0 (or less, or missing)
+   * renders nothing unless `showZero`. In dot mode a count is optional — pass
+   * one to hide the dot when it reaches 0.
+   */
+  count?: number;
+  /**
+   * Largest number shown as-is; anything above renders as `"{max}+"`.
+   * @default 99
+   */
+  max?: number;
+  /** Dot mode: a small circle with no number ("something new"). */
+  dot?: boolean;
+  /** Render `0` (numeric) / the dot (dot mode) even when `count` is 0. */
+  showZero?: boolean;
+  /**
+   * Accessible name. In numeric mode it is read INSTEAD of the bare number
+   * (e.g. "읽지 않은 알림 120개" rather than "99+"); in dot mode it is what
+   * makes the dot visible to assistive tech at all — without it the dot is
+   * `aria-hidden`. `aria-label` is accepted as an alias.
+   *
+   * Inside an element that has its own `aria-label` (an icon-only button) it
+   * is never announced — that `aria-label` replaces the subtree. Put the
+   * count in the button's `aria-label` there instead.
+   */
+  label?: string;
+  /** @default 'md' */
+  size?: CountBadgeSize;
+};

package/src/components/CountBadge/index.ts

@@ -0,0 +1,2 @@
+export { CountBadge } from './CountBadge';
+export type { CountBadgeProps, CountBadgeSize } from './CountBadge.types';

package/src/components/DatePicker/RangeDatePicker.tsx

@@ -44,7 +44,7 @@ export const RangeDatePicker = ({
           ...propsConfigs?.triggerBtnProps,
         },
         inputProps: {
-          color: 'primary.dark',
+          color: 'fg.default',
           ...propsConfigs?.inputProps,
         },
         popoverCompProps: {
@@ -80,7 +80,7 @@ export const RangeDatePicker = ({
             px: 6,
             py: 4,
             borderWidth: '1px',
-            borderColor: 'primary.extralight',
+            borderColor: 'border.default',
             borderRadius: 16,
             bg: 'bg.surface',
             ...propsConfigs?.calendarPanelProps?.contentProps,
@@ -110,17 +110,18 @@ export const RangeDatePicker = ({
             color: 'fg.default',
             fontWeight: 'regular',
             _hover: {
-              background: 'primary.extralight',
+              background: 'primary.wash',
               ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps?._hover,
             },
             ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps,
           },
           todayBtnProps: {
             fontWeight: 'semibold',
+            boxShadow: 'inset 0 0 0 1px var(--chakra-colors-border-strong)',
             ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps,
           },
           selectedBtnProps: {
-            color: 'white',
+            color: 'fg.onPrimary',
             background: 'primary.main',
             fontWeight: 'semibold',
             position: 'relative',
@@ -129,8 +130,8 @@ export const RangeDatePicker = ({
             ...propsConfigs?.dayOfMonthBtnProps?.selectedBtnProps,
           },
           isInRangeBtnProps: {
-            color: 'primary.main',
-            background: 'primary.extralight',
+            color: 'fg.default',
+            background: 'primary.selected',
             borderRadius: 'none',
             css: {
               // pressed="true" 직전의 pressed="false" 요소에 borderRight
@@ -161,8 +162,7 @@ export const RangeDatePicker = ({
         <Popover.Trigger asChild>
           <Button
             pl={2}
-            colorPalette="neutral"
-            variant="outline"
+            variant="secondary"
             {...(propsConfigs?.triggerBtnProps as ButtonProps)}
           >
             <MdOutlineCalendarToday