@tipp/ui 2.5.0 → 2.7.0

package/src/atoms/blockquote.tsx

@@ -1 +1,31 @@
-export { Blockquote, type BlockquoteProps } from '@radix-ui/themes';
+import {
+  Blockquote as RadixBlockquote,
+  type BlockquoteProps as RadixBlockquoteProps,
+} from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
+
+export type BlockquoteProps = Omit<RadixBlockquoteProps, 'color'> & {
+  color?: UiColor;
+};
+
+export const Blockquote = forwardRef<
+  React.ComponentRef<typeof RadixBlockquote>,
+  BlockquoteProps
+>((props, ref): React.ReactNode => {
+  const { color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = resolveColor(color);
+
+  return (
+    <RadixBlockquote
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={radixColor}
+      ref={ref}
+    />
+  );
+});
+
+Blockquote.displayName = 'Blockquote';

package/src/atoms/button.tsx

@@ -2,11 +2,12 @@ import React, { forwardRef, useMemo } from 'react';
 import { Button as RadixButton } from '@radix-ui/themes';
 import { clsx } from 'clsx';
 import { convertSize } from '../utils/convert-button-size';
+import { resolveColor } from '../utils/resolve-color';
 import type { ButtonProps } from './button.type';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref): React.ReactNode => {
-    const { size, style, variant, ...restProps } = props;
+    const { size, style, variant, color, ...restProps } = props;
 
     const radixSize = useMemo(() => {
       return convertSize(size);
@@ -17,9 +18,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       return variant;
     }, [variant]);
 
+    const { color: radixColor, className: colorClassName } = useMemo(
+      () => resolveColor(color),
+      [color]
+    );
+
     const className = useMemo(() => {
-      return clsx(props.className, { transparent: variant === 'transparent' });
-    }, [props.className, variant]);
+      return clsx(props.className, colorClassName, {
+        transparent: variant === 'transparent',
+      });
+    }, [props.className, colorClassName, variant]);
 
     return (
       <RadixButton
@@ -28,6 +36,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         variant={radixVariant}
         {...restProps}
         className={className}
+        color={radixColor}
         ref={ref}
         size={radixSize}
       />

package/src/atoms/button.type.ts

@@ -3,10 +3,15 @@ import {
   type ButtonProps as RadixButtonProps,
 } from '@radix-ui/themes';
 import type { Responsive } from '@radix-ui/themes/props';
+import type { UiColor } from '../utils/resolve-color';
 
-export type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {
+export type ButtonProps = Omit<
+  RadixButtonProps,
+  'size' | 'variant' | 'color'
+> & {
   size?: Responsive<'small' | 'medium' | 'large'>;
   variant?: RadixButtonProps['variant'] | 'transparent';
+  color?: UiColor;
 };
 
 export type { Responsive } from '@radix-ui/themes/props';

package/src/atoms/call-out.tsx

@@ -1 +1,48 @@
-export { Callout } from '@radix-ui/themes';
+import { Callout as RadixCallout } from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef, useMemo } from 'react';
+import {
+  resolveColor,
+  type DistributiveOmit,
+  type UiColor,
+} from '../utils/resolve-color';
+
+type CalloutRootProps = DistributiveOmit<
+  React.ComponentPropsWithoutRef<typeof RadixCallout.Root>,
+  'color'
+> & {
+  color?: UiColor;
+};
+
+const Root = forwardRef<
+  React.ElementRef<typeof RadixCallout.Root>,
+  CalloutRootProps
+>((props, ref) => {
+  const { color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = useMemo(
+    () => resolveColor(color),
+    [color]
+  );
+
+  // custom color(black)는 className의 변수 override만 사용한다. fallback color를 함께 넘기면
+  // 자식 요소가 `data-accent-color`로 gray를 다시 적용해 조상 className override를 덮을 수 있다.
+  const appliedColor = colorClassName ? undefined : radixColor;
+
+  return (
+    <RadixCallout.Root
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={appliedColor}
+      ref={ref}
+    />
+  );
+});
+
+Root.displayName = 'Callout.Root';
+
+export const Callout = {
+  ...RadixCallout,
+  Root,
+};
+

package/src/atoms/check-box-card.tsx

@@ -1 +1,51 @@
-export { CheckboxCards } from '@radix-ui/themes';
+import { CheckboxCards as RadixCheckboxCards } from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef, useMemo } from 'react';
+import {
+  resolveColor,
+  type DistributiveOmit,
+  type UiColor,
+} from '../utils/resolve-color';
+
+type CheckboxCardsRootProps = DistributiveOmit<
+  React.ComponentPropsWithoutRef<typeof RadixCheckboxCards.Root>,
+  'color'
+> & {
+  color?: UiColor;
+};
+
+const Root = forwardRef<
+  React.ElementRef<typeof RadixCheckboxCards.Root>,
+  CheckboxCardsRootProps
+>((props, ref) => {
+  const { color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = useMemo(
+    () => resolveColor(color),
+    [color]
+  );
+
+  // custom color(black)는 className의 변수 override만 사용한다. fallback color를 함께 넘기면
+  // CheckboxCards가 그 color를 자식 Item으로 전파하고, 각 Item이 자기 `data-accent-color`로
+  // gray를 다시 적용해 조상 className override를 자식 스코프에서 덮어버린다.
+  const appliedColor = colorClassName ? undefined : radixColor;
+
+  return (
+    <RadixCheckboxCards.Root
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={appliedColor}
+      ref={ref}
+    />
+  );
+});
+
+Root.displayName = 'CheckboxCards.Root';
+
+export const CheckboxCards: Omit<typeof RadixCheckboxCards, 'Root'> & {
+  Root: typeof Root;
+} = {
+  ...RadixCheckboxCards,
+  Root,
+};
+

package/src/atoms/check-box-group.tsx

@@ -1,15 +1,22 @@
 import { CheckboxGroup as RadixCheckboxGroup } from '@radix-ui/themes';
+import { clsx } from 'clsx';
 import React, { forwardRef, useMemo } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
 
 type RadixCheckboxGroupProps = React.ComponentPropsWithoutRef<
   typeof RadixCheckboxGroup.Root
 >;
 type CheckboxGroupProps = Omit<RadixCheckboxGroupProps, 'size'> & {
   size?: 'small' | 'medium' | 'large';
+  /**
+   * CheckboxGroup은 Radix color prop이 없어 per-instance로는 custom accent(black 등)만
+   * className override로 적용된다. semantic/radix color는 theme accent로만 가능.
+   */
+  color?: UiColor;
 };
 
 const Root = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {
-  const { children, size = 'medium', ...rest } = props;
+  const { children, size = 'medium', color, className, ...rest } = props;
 
   const groupSize = useMemo<RadixCheckboxGroupProps['size']>(() => {
     switch (size) {
@@ -23,8 +30,18 @@ const Root = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {
     }
   }, [size]);
 
+  const { className: colorClassName } = useMemo(
+    () => resolveColor(color),
+    [color]
+  );
+
   return (
-    <RadixCheckboxGroup.Root {...rest} ref={ref} size={groupSize}>
+    <RadixCheckboxGroup.Root
+      {...rest}
+      className={clsx(colorClassName, className)}
+      ref={ref}
+      size={groupSize}
+    >
       {children}
     </RadixCheckboxGroup.Root>
   );

package/src/atoms/check-box.tsx

@@ -2,15 +2,18 @@ import {
   Checkbox as RadixCheckbox,
   type CheckboxProps as RadixCheckboxProps,
 } from '@radix-ui/themes';
+import { clsx } from 'clsx';
 import { useMemo, forwardRef } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
 
-export type CheckboxProps = Omit<RadixCheckboxProps, 'size'> & {
+export type CheckboxProps = Omit<RadixCheckboxProps, 'size' | 'color'> & {
   size?: 'small' | 'medium' | 'large';
+  color?: UiColor;
 };
 
 export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
   (props, ref): React.ReactNode => {
-    const { size = 'medium', ...rest } = props;
+    const { size = 'medium', color, className, ...rest } = props;
 
     const radixSize = useMemo<RadixCheckboxProps['size']>(() => {
       switch (size) {
@@ -23,7 +26,18 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
       }
     }, [size]);
 
-    return <RadixCheckbox {...rest} ref={ref} size={radixSize} />;
+    const { color: radixColor, className: colorClassName } =
+      resolveColor(color);
+
+    return (
+      <RadixCheckbox
+        {...rest}
+        className={clsx(colorClassName, className)}
+        color={radixColor}
+        ref={ref}
+        size={radixSize}
+      />
+    );
   }
 );
 

package/src/atoms/code.tsx

@@ -1 +1,31 @@
-export { Code, type CodeProps } from '@radix-ui/themes';
+import {
+  Code as RadixCode,
+  type CodeProps as RadixCodeProps,
+} from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
+
+export type CodeProps = Omit<RadixCodeProps, 'color'> & {
+  color?: UiColor;
+};
+
+export const Code = forwardRef<React.ComponentRef<typeof RadixCode>, CodeProps>(
+  (props, ref): React.ReactNode => {
+    const { color, className, ...rest } = props;
+
+    const { color: radixColor, className: colorClassName } =
+      resolveColor(color);
+
+    return (
+      <RadixCode
+        {...rest}
+        className={clsx(colorClassName, className)}
+        color={radixColor}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Code.displayName = 'Code';

package/src/atoms/data-list.tsx

@@ -1 +1,47 @@
-export { DataList } from '@radix-ui/themes';
+import { DataList as RadixDataList } from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import React, { forwardRef, useMemo } from 'react';
+import {
+  resolveColor,
+  type DistributiveOmit,
+  type UiColor,
+} from '../utils/resolve-color';
+
+// DataList의 color prop은 Root가 아니라 Label에 있다. 또한 Label은 Text/Heading처럼
+// `data-accent-color`가 있어야 accent를 참조하므로(없으면 gray 고정), Root className override가
+// 아닌 Label 자체를 래핑해 resolveColor를 적용한다. (Label은 단일 요소라 fallback color +
+// className이 같은 요소에 실려 black이 정상 동작한다.)
+type DataListLabelProps = DistributiveOmit<
+  React.ComponentPropsWithoutRef<typeof RadixDataList.Label>,
+  'color'
+> & {
+  color?: UiColor;
+};
+
+const Label = forwardRef<
+  React.ElementRef<typeof RadixDataList.Label>,
+  DataListLabelProps
+>((props, ref) => {
+  const { color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = useMemo(
+    () => resolveColor(color),
+    [color]
+  );
+
+  return (
+    <RadixDataList.Label
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={radixColor}
+      ref={ref}
+    />
+  );
+});
+
+Label.displayName = 'DataList.Label';
+
+export const DataList = {
+  ...RadixDataList,
+  Label,
+};

package/src/atoms/dropdown-menu.tsx

@@ -1,30 +1,57 @@
 import { DropdownMenu as RadixDropdownMenu } from '@radix-ui/themes';
-import { forwardRef, useMemo } from 'react';
+import { createContext, forwardRef, useContext, useMemo } from 'react';
+import {
+  resolveColor,
+  type DistributiveOmit,
+  type UiColor,
+} from '../utils/resolve-color';
+import { ThemeAccentContext } from '../theme/theme-provider';
 
-type ContentProps = RadixDropdownMenu.ContentProps & {
+const DropdownMenuContext = createContext<{ color?: UiColor }>({});
+
+type ContentProps = DistributiveOmit<
+  RadixDropdownMenu.ContentProps,
+  'color'
+> & {
   isNavigation?: boolean;
   onOpenAutoFocus?: (event: Event) => void;
+  color?: UiColor;
 };
 
 const Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {
-  const { isNavigation, className, ...rest } = props;
+  const { isNavigation, className, color, ...rest } = props;
+  const { color: contextColor } = useContext(DropdownMenuContext);
+  const themeAccent = useContext(ThemeAccentContext);
+
+  // Content는 Portal로 렌더돼 theme의 className override를 못 받으므로, per-instance/Root color가
+  // 없으면 theme custom accent(black)를 fallback으로 적용해 Portal 안에서도 black을 유지한다.
+  const { color: radixColor, className: colorClassName } = useMemo(
+    () => resolveColor(color ?? contextColor ?? themeAccent),
+    [color, contextColor, themeAccent],
+  );
+
+  // custom color(black)는 className override만 사용 — fallback color를 함께 넘기면 자식 Item이
+  // 자기 data-accent-color로 gray를 다시 적용해 override를 덮는다.
+  const appliedColor = colorClassName ? undefined : radixColor;
+
   const contentClassName = useMemo(() => {
     const cls = isNavigation ? 'dropdown-navigation' : '';
-    return [cls, className].join(' ');
-  }, [isNavigation, className]);
+    return [cls, colorClassName, className].filter(Boolean).join(' ');
+  }, [isNavigation, colorClassName, className]);
 
   return (
     <RadixDropdownMenu.Content
       ref={ref}
       {...rest}
       className={contentClassName}
+      color={appliedColor}
     />
   );
 });
 
 Content.displayName = 'DropdownMenu.Content';
 
-/** @radix-ui/themes의 DropdownMenu.Trigger는 asChild 타입이 누락되어 있어 별도로 확장 */
+// @radix-ui/themes의 DropdownMenu.Trigger는 asChild 타입이 누락되어 있어 별도로 확장
 type TriggerProps = RadixDropdownMenu.TriggerProps & { asChild?: boolean };
 
 const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(
@@ -35,8 +62,28 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(
 
 Trigger.displayName = 'DropdownMenu.Trigger';
 
+type RootProps = RadixDropdownMenu.RootProps & {
+  /** Content에 일괄 적용할 color. Content에서 color prop으로 개별 override 가능. */
+  color?: UiColor;
+};
+
+function Root(props: RootProps): React.ReactNode {
+  const { color, ...rest } = props;
+
+  const value = useMemo(() => ({ color }), [color]);
+
+  return (
+    <DropdownMenuContext.Provider value={value}>
+      <RadixDropdownMenu.Root {...rest} />
+    </DropdownMenuContext.Provider>
+  );
+}
+
+Root.displayName = 'DropdownMenu.Root';
+
 export const DropdownMenu = {
   ...RadixDropdownMenu,
+  Root,
   Content,
   Trigger,
 };

package/src/atoms/heading.tsx

@@ -3,8 +3,14 @@ import {
   type HeadingProps as RadixHeadingProps,
 } from '@radix-ui/themes';
 import type { Responsive } from '@radix-ui/themes/props';
+import { clsx } from 'clsx';
 import { useMemo } from 'react';
 import { mapWithResponsive } from '@/utils/map-with-responsive';
+import {
+  resolveColor,
+  type DistributiveOmit,
+  type UiColor,
+} from '../utils/resolve-color';
 
 export { Heading as RadixHeading } from '@radix-ui/themes';
 type HeadingVariant =
@@ -13,8 +19,9 @@ type HeadingVariant =
   | 'heading3'
   | 'heading4'
   | 'heading5';
-export type HeadingProps = RadixHeadingProps & {
+export type HeadingProps = DistributiveOmit<RadixHeadingProps, 'color'> & {
   variant?: Responsive<HeadingVariant>;
+  color?: UiColor;
 };
 
 type HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
@@ -37,7 +44,13 @@ const mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {
 };
 
 export function Heading(props: HeadingProps): React.ReactNode {
-  const { size, children, variant, ...rest } = props;
+  const { size, children, variant, color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = useMemo(
+    () => resolveColor(color),
+    [color]
+  );
+
   const radixSize = useMemo<RadixHeadingProps['size']>(() => {
     return variant
       ? mapWithResponsive({
@@ -45,11 +58,16 @@ export function Heading(props: HeadingProps): React.ReactNode {
           mapFn: mapVariant,
         })
       : size;
- 
+
   }, [size, variant]);
 
   return (
-    <RadixHeading {...rest} size={radixSize}>
+    <RadixHeading
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={radixColor}
+      size={radixSize}
+    >
       {children}
     </RadixHeading>
   );

package/src/atoms/hover-card.tsx

@@ -1 +1,37 @@
-export { HoverCard } from '@radix-ui/themes';
+import { HoverCard as RadixHoverCard } from '@radix-ui/themes';
+import { clsx } from 'clsx';
+import { forwardRef, useContext, useMemo } from 'react';
+import { resolveColor, type UiColor } from '../utils/resolve-color';
+import { ThemeAccentContext } from '../theme/theme-provider';
+
+type ContentProps = RadixHoverCard.ContentProps & {
+  /** Portal 내부에 적용할 color. 미지정 시 theme custom accent(black)를 상속한다. */
+  color?: UiColor;
+};
+
+const Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {
+  const { className, color, ...rest } = props;
+  const themeAccent = useContext(ThemeAccentContext);
+
+  // Content는 Portal(body)로 렌더돼 theme의 className override를 못 받으므로, per-instance color가
+  // 없으면 theme custom accent(black)를 fallback으로 적용해 Portal 안에서도 black을 유지한다.
+  const { className: colorClassName } = useMemo(
+    () => resolveColor(color ?? themeAccent),
+    [color, themeAccent]
+  );
+
+  return (
+    <RadixHoverCard.Content
+      ref={ref}
+      {...rest}
+      className={clsx(colorClassName, className)}
+    />
+  );
+});
+
+Content.displayName = 'HoverCard.Content';
+
+export const HoverCard = {
+  ...RadixHoverCard,
+  Content,
+};

package/src/atoms/icon-button.tsx

@@ -2,12 +2,13 @@ import React, { forwardRef, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { IconButton as RadixIconButton } from '@radix-ui/themes';
 import { convertSize } from '../utils/convert-icon-button-size';
+import { resolveColor } from '../utils/resolve-color';
 import type { ButtonProps } from './button.type';
 
 export type IconButtonProps = ButtonProps;
 export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref): React.ReactNode => {
-    const { size, style, variant, ...restProps } = props;
+    const { size, style, variant, color, ...restProps } = props;
 
     const radixSize = useMemo(() => {
       return convertSize(size);
@@ -18,9 +19,16 @@ export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(
       return variant;
     }, [variant]);
 
+    const { color: radixColor, className: colorClassName } = useMemo(
+      () => resolveColor(color),
+      [color]
+    );
+
     const className = useMemo(() => {
-      return clsx(props.className, { transparent: variant === 'transparent' });
-    }, [props.className, variant]);
+      return clsx(props.className, colorClassName, {
+        transparent: variant === 'transparent',
+      });
+    }, [props.className, colorClassName, variant]);
 
     return (
       <RadixIconButton
@@ -29,6 +37,7 @@ export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(
         variant={radixVariant}
         {...restProps}
         className={className}
+        color={radixColor}
         ref={ref}
         size={radixSize}
       />

package/src/atoms/link.tsx

@@ -2,16 +2,29 @@ import {
   Link as RadixLink,
   type LinkProps as RadixLinkProps,
 } from '@radix-ui/themes';
+import { clsx } from 'clsx';
 import { useMemo } from 'react';
+import {
+  resolveColor,
+  type DistributiveOmit,
+  type UiColor,
+} from '../utils/resolve-color';
 
 export { Heading as RadixHeading } from '@radix-ui/themes';
 
-export type LinkProps = RadixLinkProps & {
+export type LinkProps = DistributiveOmit<RadixLinkProps, 'color'> & {
   variant?: 'caption' | 'body' | 'subtitle';
+  color?: UiColor;
 };
 
 export function Link(props: LinkProps): React.ReactNode {
-  const { size, children, variant, ...rest } = props;
+  const { size, children, variant, color, className, ...rest } = props;
+
+  const { color: radixColor, className: colorClassName } = useMemo(
+    () => resolveColor(color),
+    [color]
+  );
+
   const radixSize = useMemo<RadixLinkProps['size']>(() => {
     switch (variant) {
       case 'caption':
@@ -26,7 +39,12 @@ export function Link(props: LinkProps): React.ReactNode {
   }, [size, variant]);
 
   return (
-    <RadixLink {...rest} size={radixSize}>
+    <RadixLink
+      {...rest}
+      className={clsx(colorClassName, className)}
+      color={radixColor}
+      size={radixSize}
+    >
       {children}
     </RadixLink>
   );