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

package/src/components/Popover/Popover.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
   render: args => (
     <Popover {...args}>
       <Popover.Trigger asChild>
-        <Button variant="outline">Open Popover</Button>
+        <Button variant="secondary">Open Popover</Button>
       </Popover.Trigger>
       <Popover.Content>
         <Popover.Arrow>
@@ -44,7 +44,7 @@ export const WithForm: Story = {
   render: args => (
     <Popover {...args}>
       <Popover.Trigger asChild>
-        <Button variant="outline">Settings</Button>
+        <Button variant="secondary">Settings</Button>
       </Popover.Trigger>
       <Popover.Content>
         <Popover.Arrow>
@@ -74,7 +74,7 @@ export const SmallFontSize: Story = {
   render: args => (
     <Popover {...args}>
       <Popover.Trigger asChild>
-        <Button variant="outline">Compact (12px)</Button>
+        <Button variant="secondary">Compact (12px)</Button>
       </Popover.Trigger>
       <Popover.Content>
         <Popover.Arrow>
@@ -94,7 +94,7 @@ export const LargeFontSize: Story = {
   render: args => (
     <Popover {...args}>
       <Popover.Trigger asChild>
-        <Button variant="outline">Spacious (18px)</Button>
+        <Button variant="secondary">Spacious (18px)</Button>
       </Popover.Trigger>
       <Popover.Content>
         <Popover.Arrow>
@@ -123,7 +123,7 @@ export const Comparison: Story = {
       {(['12px', '14px', '18px'] as const).map(size => (
         <Popover key={size} baseFontSize={size} open>
           <Popover.Trigger asChild>
-            <Button variant="outline" size="sm">{size}</Button>
+            <Button variant="secondary" size="sm">{size}</Button>
           </Popover.Trigger>
           <Popover.Content>
             <Popover.Arrow>

package/src/components/ProgressBar/ProgressBar.tsx

@@ -18,7 +18,7 @@ export const ProgressBar = ({
     // boolean keeps that spelling out of every call site.
     <ChakraProgress.Root value={indeterminate ? null : value} {...rest}>
       <ChakraProgress.Track
-        bgColor="bg.muted"
+        bgColor="bg.track"
         height={styles.height}
         borderRadius={styles.borderRadius}
         overflow="hidden"

package/src/components/Pulse/Pulse.stories.tsx

@@ -34,7 +34,7 @@ export const Default: Story = {
           +50 크레딧
         </Button>
         <Pulse trigger={balance}>
-          <Tag colorPalette="primary" variant="soft">
+          <Tag>
             {balance.toLocaleString()} 크레딧
           </Tag>
         </Pulse>

package/src/components/RadialProgress/RadialProgress.tsx

@@ -19,7 +19,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
   ...rest
 }) => {
   // useToken은 hook이므로 map 안이 아닌 최상위에서 호출
-  const colorTokens = segments.map((s) => s.color).concat('bg.muted');
+  const colorTokens = segments.map((s) => s.color).concat('bg.track');
   const resolvedColors = useToken('colors', colorTokens);
   const resolveColor = (token: string) =>
     resolvedColors[colorTokens.indexOf(token)] || token;
@@ -54,12 +54,9 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
   // Add gray segment for remaining space if needed
   const allSegments: Segment[] =
     segments.length === 0
-      ? [{ color: 'bg.muted', value: total }] // Full gray circle if no segments
+      ? [{ color: 'bg.track', value: total }] // Full gray circle if no segments
       : remainingValue > 0
-        ? [
-            ...segments,
-            { color: 'bg.muted', value: remainingValue }, // Use token instead of theme.colors.gray[200]
-          ]
+        ? [...segments, { color: 'bg.track', value: remainingValue }]
         : segments;
 
   // Filter out zero-value segments for visible count
@@ -168,7 +165,7 @@ const RadialProgress: React.FC<RadialProgressProps> = ({
               cy={centerY}
               r={radius}
               fill="none"
-              stroke={resolveColor('bg.muted')}
+              stroke={resolveColor('bg.track')}
               strokeWidth={strokeWidth}
             />
           ) : (

package/src/components/RadialProgress/RadialProgress.types.ts

@@ -1,7 +1,7 @@
 import { BoxProps } from '@chakra-ui/react';
 
 export interface Segment {
-  /** Color value - supports hex colors, CSS color names, and Chakra UI color tokens (e.g., 'primary.500', 'red.400') */
+  /** Color value - supports hex colors, CSS color names, and Chakra UI color tokens (e.g., 'primary.main', 'danger.solid') */
   color: string;
   value: number;
 }

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

@@ -248,7 +248,7 @@ export const FormExample: RadioGroupStory = {
           </RadioGroup>
         </Box>
 
-        <Box p={4} bg="gray.50" borderRadius="md" w="100%">
+        <Box p={4} bg="bg.subtle" borderRadius="md" w="100%">
           <Box fontWeight="semibold" mb={2}>
             Current Settings:
           </Box>

package/src/components/Radio/RadioControl.indicator.test.tsx

@@ -0,0 +1,72 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Radio } from './Radio';
+import { RadioGroup } from './RadioGroup';
+
+/**
+ * Chakra's `RadioGroup.ItemIndicator` is a second `item-control` (a Radiomark)
+ * that covers the outer control and carries the recipe's own
+ * `border.emphasized` ring and `_disabled: { opacity: 0.5 }`. The visible part
+ * is the indicator, so that is what these read.
+ */
+const renderGroup = (props: { disabled?: boolean } = {}) =>
+  render(
+    <ChakraProvider value={system}>
+      <RadioGroup defaultValue="a" {...props}>
+        <Radio value="a">
+          <Radio.Control />
+          <Radio.Text>A</Radio.Text>
+        </Radio>
+        <Radio value="b">
+          <Radio.Control />
+          <Radio.Text>B</Radio.Text>
+        </Radio>
+      </RadioGroup>
+    </ChakraProvider>
+  );
+
+const indicators = (container: HTMLElement) =>
+  Array.from(
+    container.querySelectorAll<HTMLElement>(
+      '[data-part="item-control"] [data-part="item-control"]'
+    )
+  );
+
+describe('Radio indicator', () => {
+  it('unchecked ring is border.control, not the recipe border.emphasized', () => {
+    const { container } = renderGroup();
+    const [, unchecked] = indicators(container);
+    const style = getComputedStyle(unchecked);
+    expect(style.borderColor).toContain('--chakra-colors-border-control');
+    expect(style.getPropertyValue('background')).toContain(
+      '--chakra-colors-bg-surface'
+    );
+  });
+
+  it('checked fill is primary.main with an fg.onPrimary dot', () => {
+    const { container } = renderGroup();
+    const [checked] = indicators(container);
+    expect(checked).toHaveAttribute('data-state', 'checked');
+    const style = getComputedStyle(checked);
+    expect(style.getPropertyValue('background')).toContain(
+      '--chakra-colors-primary-main'
+    );
+    expect(style.color).toContain('--chakra-colors-fg-on-primary');
+    expect(checked.querySelector('.dot')).not.toBeNull();
+  });
+
+  it('disabled is full-opacity disabled.* colours', () => {
+    const { container } = renderGroup({ disabled: true });
+    for (const mark of indicators(container)) {
+      const style = getComputedStyle(mark);
+      expect(style.opacity).toBe('1');
+      expect(style.getPropertyValue('background')).toContain(
+        '--chakra-colors-disabled-bg'
+      );
+      expect(style.color).toContain('--chakra-colors-disabled-fg');
+    }
+  });
+});

package/src/components/Radio/RadioControl.tsx

@@ -1,10 +1,35 @@
 import { forwardRef, useId } from 'react';
 import { RadioGroup, RadioGroupItemControlProps } from '@chakra-ui/react';
 
+import { disabledControl } from '@/utils/disabledControl';
 import { focusRing } from '@/utils/focusRing';
+import { mergeCss } from '@/utils/mergeCss';
 
 import { dotPop } from './Radio.styles';
 
+/**
+ * Same treatment as Checkbox: `border.control` is the 3:1 non-text-contrast
+ * token for input/checkbox/radio borders, on the same raised surface as Input,
+ * replacing Chakra's `border.emphasized`. Disabled is the fixed `disabled.*`
+ * pair at full opacity, never the recipe's `opacity: 0.5`.
+ *
+ * Applied to both the outer control and the indicator that covers it.
+ */
+const markStyles = {
+  bg: 'bg.surface',
+  borderWidth: '1px',
+  borderColor: 'border.control',
+  _checked: {
+    bg: 'primary.main',
+    borderColor: 'primary.main',
+    // The dot is `currentColor`.
+    color: 'fg.onPrimary',
+  },
+  _disabled: { ...disabledControl, cursor: 'not-allowed' },
+} as const;
+
+const indicatorCss = mergeCss(markStyles, dotPop);
+
 export const RadioControl = forwardRef<
   HTMLDivElement,
   RadioGroupItemControlProps
@@ -24,17 +49,20 @@ export const RadioControl = forwardRef<
   return (
     <RadioGroup.ItemControl
       ref={ref}
-      // The outer ring is fully covered by the indicator below, but it carries
-      // the same checked fill — left untimed it would snap behind the one that
-      // eases.
+      {...markStyles}
+      // Timed like the indicator so the two never drift apart mid-transition.
       animationStyle="feedback"
       transitionProperty="background-color, border-color"
       {...focusRing}
       {...props}
     >
-      {/* `ItemIndicator` is the mark that actually holds `.dot`; it renders its
-          own `ItemControl` internally, which is why this is nested. */}
-      <RadioGroup.ItemIndicator id={indicatorId} css={dotPop} />
+      {/* `ItemIndicator` is the part you actually see: it renders Chakra's
+          `Radiomark` as a second `ItemControl` with the recipe's `itemControl`
+          styles (`border.emphasized`, `_disabled: { opacity: 0.5 }`), sized to
+          cover this outer control completely. Styling only the outer part left
+          those recipe values on screen, so the mark styles go here too — `css`
+          is applied after the recipe styles, so it wins. */}
+      <RadioGroup.ItemIndicator id={indicatorId} css={indicatorCss} />
     </RadioGroup.ItemControl>
   );
 });

package/src/components/Radio/RadioGroup.tsx

@@ -12,7 +12,7 @@ export const RadioGroup = ({ css, ...rest }: RadioGroupRootProps) => {
           '--chakra-colors-color-palette-solid':
             'var(--chakra-colors-primary-main)',
           '--chakra-colors-color-palette-contrast':
-            'var(--chakra-colors-white)',
+            'var(--chakra-colors-fg-on-primary)',
         },
         css
       )}

package/src/components/Reveal/Reveal.stories.tsx

@@ -36,7 +36,11 @@ export const Default: Story = {
           </Text>
         </Card>
 
-        <Button size="xs" variant="outline" onClick={() => setShown((v) => !v)}>
+        <Button
+          size="xs"
+          variant="secondary"
+          onClick={() => setShown((v) => !v)}
+        >
           {shown ? '숨기기' : '근거 보기'}
         </Button>
 

package/src/components/ScaledContext/ScaledContext.stories.tsx

@@ -19,8 +19,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const SampleContent = () => (
-  <Stack gap={3} p={3} borderWidth="1px" borderColor="gray.300" borderRadius="md">
-    <Button variant="outline">Button</Button>
+  <Stack
+    gap={3}
+    p={3}
+    borderWidth="1px"
+    borderColor="border.default"
+    borderRadius="md"
+  >
+    <Button variant="secondary">Button</Button>
     <Checkbox>
       <Checkbox.Control />
       <Checkbox.Label>Checkbox</Checkbox.Label>
@@ -30,7 +36,7 @@ const SampleContent = () => (
 
 export const Default: Story = {
   args: { fontSize: '1rem' },
-  render: args => (
+  render: (args) => (
     <ScaledContext {...args}>
       <SampleContent />
     </ScaledContext>
@@ -49,9 +55,9 @@ export const ScalingRem: Story = {
   },
   render: () => (
     <HStack align="start" gap={8} flexWrap="wrap">
-      {(['0.75rem', '1rem', '1.25rem', '1.5rem'] as const).map(size => (
+      {(['0.75rem', '1rem', '1.25rem', '1.5rem'] as const).map((size) => (
         <Box key={size}>
-          <Text fontSize="xs" color="gray.500" mb={2} fontFamily="mono">
+          <Text fontSize="xs" color="fg.muted" mb={2} fontFamily="mono">
             {size}
           </Text>
           <ScaledContext fontSize={size}>
@@ -68,15 +74,16 @@ export const ScalingPx: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'px values work too — spacing tokens still scale relative to the given font size.',
+        story:
+          'px values work too — spacing tokens still scale relative to the given font size.',
       },
     },
   },
   render: () => (
     <HStack align="start" gap={8} flexWrap="wrap">
-      {(['12px', '14px', '16px', '20px', '24px'] as const).map(size => (
+      {(['12px', '14px', '16px', '20px', '24px'] as const).map((size) => (
         <Box key={size}>
-          <Text fontSize="xs" color="gray.500" mb={2} fontFamily="mono">
+          <Text fontSize="xs" color="fg.muted" mb={2} fontFamily="mono">
             {size}
           </Text>
           <ScaledContext fontSize={size}>
@@ -103,26 +110,26 @@ export const NestedScaling: Story = {
       fontSize="0.875rem"
       p={4}
       borderWidth="1px"
-      borderColor="gray.200"
+      borderColor="border.subtle"
       borderRadius="md"
     >
       <Stack gap={3}>
-        <Text fontSize="xs" color="gray.500" fontFamily="mono">
+        <Text fontSize="xs" color="fg.muted" fontFamily="mono">
           Outer: 0.875rem (compact)
         </Text>
-        <Button variant="outline">Outer Button</Button>
+        <Button variant="secondary">Outer Button</Button>
         <ScaledContext
           fontSize="1.25rem"
           p={3}
           borderWidth="1px"
-          borderColor="primary.light"
+          borderColor="border.strong"
           borderRadius="md"
         >
           <Stack gap={3}>
-            <Text fontSize="xs" color="gray.500" fontFamily="mono">
+            <Text fontSize="xs" color="fg.muted" fontFamily="mono">
               Inner: 1.25rem (spacious)
             </Text>
-            <Button variant="outline">Inner Button</Button>
+            <Button variant="secondary">Inner Button</Button>
             <Checkbox>
               <Checkbox.Control />
               <Checkbox.Label>Inner Checkbox</Checkbox.Label>

package/src/components/SeeMoreButton/SeeMoreButton.border.test.tsx

@@ -0,0 +1,51 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { SeeMoreButton } from './SeeMoreButton';
+import { seeMoreButtonStyles } from './SeeMoreButton.styles';
+
+/**
+ * SeeMoreButton's only border is a top hairline. Button draws a 1px border on
+ * every side and the ghost recipe's `_disabled` makes it transparent, so the
+ * "all shown" (disabled) state used to lose the hairline while the other three
+ * sides kept invisible 1px borders.
+ */
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+const borders = (el: HTMLElement) => {
+  const cs = getComputedStyle(el);
+  return {
+    top: cs.borderTopWidth,
+    right: cs.borderRightWidth,
+    bottom: cs.borderBottomWidth,
+    left: cs.borderLeftWidth,
+    topColor: cs.borderTopColor,
+  };
+};
+
+describe('SeeMoreButton border', () => {
+  it.each([
+    ['enabled', false],
+    ['disabled (all shown)', true],
+  ])('%s: top hairline only, divider colour', (_state, disabled) => {
+    wrap(<SeeMoreButton currentCount={10} maxCount={10} disabled={disabled} />);
+    const b = borders(screen.getByRole('button'));
+    expect(b.top).toBe('1px');
+    expect(b.right).toBe('0px');
+    expect(b.bottom).toBe('0px');
+    expect(b.left).toBe('0px');
+    expect(b.topColor).toContain('border-subtle');
+  });
+
+  it('keeps the hairline colour under _disabled', () => {
+    // jsdom does not expand the `border-color` shorthand the ghost recipe's
+    // `_disabled` sets, so the colour override is checked on the style object:
+    // it must be a top-only longhand, applied after the recipe's shorthand.
+    expect(seeMoreButtonStyles._disabled).toEqual({
+      borderTopColor: 'border.subtle',
+    });
+  });
+});

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

@@ -47,3 +47,11 @@ export const Default: Story = {
     );
   },
 };
+
+/**
+ * Renders the ghost Button recipe — same hover wash, press and disabled
+ * colours. Disabled once everything is shown.
+ */
+export const AllShown: Story = {
+  args: { currentCount: 10, maxCount: 10, disabled: true },
+};

package/src/components/SeeMoreButton/SeeMoreButton.styles.ts

@@ -1,12 +1,20 @@
+/**
+ * Layout only. Colours, hover/press and disabled come from the ghost Button
+ * recipe (`<Button variant="ghost">`), so SeeMoreButton cannot drift from it.
+ * The top hairline is structural (it separates the button from the list it
+ * extends), so it is the ONLY border — Button draws 1px on every side, which
+ * would put transparent borders left/right/bottom — and it survives the
+ * disabled ("all shown") state, where the ghost recipe's `_disabled` would
+ * otherwise turn it transparent.
+ */
 export const seeMoreButtonStyles = {
   alignSelf: 'stretch',
   w: '100%',
-  variant: 'unstyled' as any,
   display: 'flex',
-  borderTop: '1px solid',
   borderRadius: 'none',
-  borderColor: 'border.default',
-  color: 'fg.subtle',
+  borderWidth: '0',
+  borderTopWidth: '1px',
+  borderTopColor: 'border.subtle',
   fontSize: 'subtitle',
-  cursor: 'pointer',
-};
+  _disabled: { borderTopColor: 'border.subtle' },
+} as const;

package/src/components/SeeMoreButton/SeeMoreButton.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Button } from '@chakra-ui/react';
 
+import { Button } from '@/components/Button';
 import { ChevronDownIcon } from '@/components/Icon';
 import { useTranslate } from '@/hooks/useTranslate';
+import { mergeCss } from '@/utils/mergeCss';
 
 import { polymorphic } from '../../types/polymorphic';
 import { seeMoreButtonStyles } from './SeeMoreButton.styles';
@@ -11,6 +12,7 @@ import { SeeMoreButtonOwnProps } from './SeeMoreButton.types';
 /**
  * A button component that allows users to load or see more items.
  * It displays the current count and the maximum count of items.
+ * Rendered with the ghost Button recipe (5.0): same colours and states.
  *
  * @param {object} props - Props for the SeeMoreButton component.
  * @param {number} props.currentCount - The current number of items shown.
@@ -19,12 +21,19 @@ import { SeeMoreButtonOwnProps } from './SeeMoreButton.types';
 const SeeMoreButtonImpl = ({
   currentCount,
   maxCount,
+  _disabled: disabledProp,
   ...rest
 }: SeeMoreButtonOwnProps) => {
   const translate = useTranslate();
 
   return (
-    <Button {...seeMoreButtonStyles} {...rest}>
+    <Button
+      variant="ghost"
+      {...seeMoreButtonStyles}
+      // Merged so a call site's `_disabled` cannot drop the hairline.
+      _disabled={mergeCss(seeMoreButtonStyles._disabled, disabledProp)}
+      {...rest}
+    >
       {translate('see_more')} ({currentCount}/{maxCount}){' '}
       <ChevronDownIcon color="inherit" />
     </Button>

package/src/components/SeeMoreButton/SeeMoreButton.types.ts

@@ -1,10 +1,17 @@
 import type { ElementType } from 'react';
-import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
 
 // Relative, NOT `@/types/*` — see `src/types/polymorphic.ts`.
 import type { PolymorphicProps } from '../../types/polymorphic';
+import type { ButtonOwnProps } from '../Button/Button.types';
 
-export type SeeMoreButtonOwnProps = Omit<ChakraButtonProps, 'as'> & {
+/**
+ * SeeMoreButton always renders the ghost Button recipe, so it takes Button's
+ * props minus the role (`variant` / `isDestructive`).
+ */
+export type SeeMoreButtonOwnProps = Omit<
+  ButtonOwnProps,
+  'variant' | 'isDestructive'
+> & {
   currentCount: number;
   maxCount: number;
 };