@uniai-fe/uds-primitives 0.0.18 → 0.0.20

package/src/components/segmented-control/markup/SegmentedControl.tsx

@@ -1,129 +0,0 @@
-import { SegmentedControl as RadixSegmentedControl } from "@radix-ui/themes";
-import clsx from "clsx";
-import {
-  forwardRef,
-  useMemo,
-  useState,
-  type KeyboardEvent,
-  type MouseEvent,
-  type PointerEvent,
-} from "react";
-import type { SegmentedControlProps, SegmentedControlValue } from "../types";
-
-const toNullableValue = (value?: SegmentedControlValue) =>
-  value === undefined || value === "" ? undefined : value;
-
-/**
- * SegmentedControl — Radix SegmentedControl wrapper with keepSelected toggle.
- * @component
- * @param {SegmentedControlProps} props
- * @param {SegmentedControlOption[]} props.options 렌더링할 옵션 배열.
- * @param {string} props.ariaLabel 스크린리더용 라벨(필수).
- * @param {boolean} [props.keepSelected=true] 선택된 항목을 다시 클릭했을 때 해제하지 않고 유지할지 여부.
- * @param {SegmentedControlValue} [props.value] 제어형 value.
- * @param {SegmentedControlValue} [props.defaultValue] 비제어 초기 value.
- * @param {(value: SegmentedControlValue) => void} [props.onValueChange] 값 변경 콜백.
- * @param {string} [props.className] root className.
- */
-const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
-  (
-    {
-      options,
-      ariaLabel,
-      keepSelected = true,
-      className,
-      onValueChange,
-      value: valueProp,
-      defaultValue,
-      ...restProps
-    },
-    forwardedRef,
-  ) => {
-    const isControlled = valueProp !== undefined;
-    const [uncontrolledValue, setUncontrolledValue] = useState<
-      SegmentedControlValue | undefined
-    >(toNullableValue(defaultValue));
-    const selectedValue = toNullableValue(
-      isControlled ? valueProp : uncontrolledValue,
-    );
-
-    const emitChange = (nextValue: SegmentedControlValue | undefined) => {
-      if (!isControlled) {
-        setUncontrolledValue(nextValue);
-      }
-      onValueChange?.(nextValue ?? "");
-    };
-
-    const handleRootValueChange = (nextValue: string) => {
-      emitChange(nextValue);
-    };
-
-    const resolvedValue = useMemo(
-      () => selectedValue ?? undefined,
-      [selectedValue],
-    );
-
-    return (
-      <RadixSegmentedControl.Root
-        {...restProps}
-        ref={forwardedRef}
-        aria-label={ariaLabel}
-        className={clsx("segmented-control", className)}
-        value={resolvedValue}
-        onValueChange={handleRootValueChange}
-        data-keep-selected={keepSelected ? "true" : undefined}
-      >
-        {options.map(option => {
-          const isDisabled = Boolean(option.disabled);
-          const isSelected = selectedValue === option.value;
-
-          const preventDisabledInteraction = (
-            event:
-              | MouseEvent<HTMLButtonElement>
-              | PointerEvent<HTMLButtonElement>
-              | KeyboardEvent<HTMLButtonElement>,
-          ) => {
-            if (!isDisabled) {
-              return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-          };
-
-          const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-            preventDisabledInteraction(event);
-            if (isDisabled) {
-              return;
-            }
-            if (!keepSelected && isSelected) {
-              event.preventDefault();
-              emitChange(undefined);
-            }
-          };
-
-          return (
-            <RadixSegmentedControl.Item
-              key={option.value}
-              value={option.value}
-              className="segmented-control-item"
-              aria-disabled={isDisabled || undefined}
-              data-disabled={isDisabled ? "true" : undefined}
-              tabIndex={isDisabled ? -1 : undefined}
-              onPointerDown={preventDisabledInteraction}
-              onKeyDown={preventDisabledInteraction}
-              onClick={handleClick}
-            >
-              <span className="segmented-control-item-label">
-                {option.label}
-              </span>
-            </RadixSegmentedControl.Item>
-          );
-        })}
-      </RadixSegmentedControl.Root>
-    );
-  },
-);
-
-SegmentedControl.displayName = "SegmentedControl";
-
-export { SegmentedControl };

package/src/theme/ThemeProvider.tsx

@@ -1,25 +0,0 @@
-import { Theme } from "@radix-ui/themes";
-import "@radix-ui/themes/styles.css";
-import type { PropsWithChildren } from "react";
-import { defaultThemeOptions, type ThemeProviderProps } from "./config";
-
-// foundation CSS와 overrides.scss는 @uniai-fe/uds-primitives/styles에서 전역 import한다.
-
-/**
- * Radix Theme와 foundation 토큰을 한 번에 초기화하는 Provider.
- * Storybook 데코레이터 및 애플리케이션 루트에서 활용한다.
- */
-function ThemeProvider({
-  children,
-  theme = defaultThemeOptions,
-  className,
-}: PropsWithChildren<ThemeProviderProps>) {
-  const composedClass = className ?? "theme-root";
-  return (
-    <Theme {...theme} className={composedClass}>
-      {children}
-    </Theme>
-  );
-}
-
-export { ThemeProvider };

package/src/theme/config.ts

@@ -1,29 +0,0 @@
-import type { ThemeProps } from "@radix-ui/themes";
-
-/**
- * Radix Theme 설정 옵션. foundation 토큰과 매핑할 예정이므로
- * appearance/accentColor 등은 추후 토큰 담당자와 확정 후 업데이트한다.
- */
-export type ThemeOptions = ThemeProps;
-
-/**
- * foundation 토큰 → Radix Theme 옵션 초기 매핑.
- * 현재는 Radix Theme 기본 키를 사용하고, CSS override(`overrides.scss`)에서
- * 실제 색상/폰트/간격 값을 foundation 토큰으로 덮어쓴다.
- */
-export const defaultThemeOptions: ThemeOptions = {
-  appearance: "light",
-  accentColor: "blue",
-  grayColor: "gray",
-  scaling: "95%",
-  radius: "medium",
-};
-
-/**
- * Theme Provider에 전달할 props 타입.
- * `children`은 React node이며, `theme`를 전달하지 않으면 `defaultThemeOptions`가 사용된다.
- */
-export type ThemeProviderProps = {
-  theme?: ThemeOptions;
-  className?: string;
-};

package/src/theme/index.ts

@@ -1,3 +0,0 @@
-export { ThemeProvider } from "./ThemeProvider";
-export type { ThemeOptions, ThemeProviderProps } from "./config";
-export { defaultThemeOptions } from "./config";

package/src/theme/overrides.scss

@@ -1,215 +0,0 @@
-@use "@uniai-fe/uds-foundation/css";
-
-/**
- * Radix Theme가 사용하는 CSS 변수에 foundation 토큰을 연결하기 위한 placeholder.
- * - 추후 토큰 매핑이 확정되면, 실제 색상/타이포/간격 값을 아래에 정의한다.
- */
-/* ThemeProvider 기본 className(theme-root)와 Radix Theme 루트(.radix-themes)에 scope 지정 */
-:where(.radix-themes, .theme-root, :root) {
-  /* Foundation 기본 폰트로 통일 */
-  --default-font-family: var(--font-body-medium-family, "Pretendard");
-
-  /* 서피스/라벨/피드백 계층을 foundation 시멘틱 토큰으로 변환 */
-  --color-background: var(--color-bg-surface-static-white);
-  --color-panel-solid: var(--color-bg-surface-static-white);
-  --color-panel-translucent: var(--color-bg-surface-neutral);
-  --color-surface: var(--color-bg-surface-standard);
-  --color-overlay: var(--color-border-standard-heavy);
-  --color-interaction-static: var(--color-interaction-static);
-  --color-interaction-disabled: var(--color-interaction-disabled);
-  --color-border: var(--color-border-standard-cool-gray);
-  --color-border-strong: var(--color-border-standard-strong);
-  --color-border-heavy: var(--color-border-standard-heavy);
-
-  /* Primary(blue) 팔레트를 foundation blue 단계로 재정의 */
-  --blue-1: var(--color-blue-99);
-  --blue-2: var(--color-blue-95);
-  --blue-3: var(--color-blue-90);
-  --blue-4: var(--color-blue-80);
-  --blue-5: var(--color-blue-70);
-  --blue-6: var(--color-blue-60);
-  --blue-7: var(--color-blue-55);
-  --blue-8: var(--color-blue-50);
-  --blue-9: var(--color-blue-45);
-  --blue-10: var(--color-blue-40);
-  --blue-11: var(--color-blue-30);
-  --blue-12: var(--color-blue-20);
-  --blue-contrast: var(--color-common-100);
-  --blue-surface: var(--color-bg-surface-static-blue);
-  --blue-indicator: var(--color-primary-default);
-  --blue-track: var(--color-secondary-strong);
-
-  /* Secondary(sky) 팔레트 → foundation secondary 토큰 */
-  --sky-1: var(--color-blue-99);
-  --sky-2: var(--color-blue-95);
-  --sky-3: var(--color-blue-90);
-  --sky-4: var(--color-blue-80);
-  --sky-5: var(--color-blue-70);
-  --sky-6: var(--color-blue-60);
-  --sky-7: var(--color-blue-55);
-  --sky-8: var(--color-blue-50);
-  --sky-9: var(--color-secondary-strong);
-  --sky-10: var(--color-secondary-heavy);
-  --sky-11: var(--color-secondary-default);
-  --sky-12: var(--color-blue-45);
-  --sky-contrast: var(--color-primary-heavy);
-  --sky-surface: var(--color-bg-surface-static-blue);
-  --sky-indicator: var(--color-secondary-strong);
-  --sky-track: var(--color-secondary-heavy);
-
-  /* Tertiary(gray) 팔레트 → cool gray 단계 */
-  --gray-1: var(--color-cool-gray-99);
-  --gray-2: var(--color-cool-gray-95);
-  --gray-3: var(--color-cool-gray-90);
-  --gray-4: var(--color-cool-gray-85);
-  --gray-5: var(--color-cool-gray-80);
-  --gray-6: var(--color-cool-gray-75);
-  --gray-7: var(--color-cool-gray-70);
-  --gray-8: var(--color-cool-gray-65);
-  --gray-9: var(--color-cool-gray-60);
-  --gray-10: var(--color-cool-gray-55);
-  --gray-11: var(--color-cool-gray-45);
-  --gray-12: var(--color-cool-gray-20);
-  --gray-contrast: var(--color-label-strong);
-  --gray-surface: var(--color-bg-surface-standard);
-  --gray-indicator: var(--color-label-neutral);
-  --gray-track: var(--color-label-assistive);
-
-  /* 공간 단위(spacing)는 foundation gap/padding 토큰으로 재정의 */
-  --space-1: var(--spacing-gap-1);
-  --space-2: var(--spacing-gap-2);
-  --space-3: var(--spacing-gap-3);
-  --space-4: var(--spacing-gap-4);
-  --space-5: var(--spacing-gap-8);
-  --space-6: var(--spacing-gap-10);
-  --space-7: var(--spacing-gap-11);
-  --space-8: var(--spacing-gap-12);
-  --space-9: var(--spacing-gap-14);
-
-  /* 글꼴 스케일을 foundation 타이포 토큰으로 매핑 */
-  --font-size-1: var(--font-caption-large-size);
-  --font-size-2: var(--font-label-medium-size);
-  --font-size-3: var(--font-label-large-size);
-  --font-size-4: var(--font-heading-xsmall-size);
-  --font-size-5: var(--font-heading-small-size);
-  --font-size-6: var(--font-heading-medium-size);
-  --font-size-7: var(--font-heading-large-size);
-  --font-size-8: var(--font-heading-xlarge-size);
-  --font-size-9: var(--font-display-large-size);
-
-  --line-height-1: var(--font-caption-large-line-height);
-  --line-height-2: var(--font-label-medium-line-height);
-  --line-height-3: var(--font-label-large-line-height);
-  --line-height-4: var(--font-heading-xsmall-line-height);
-  --line-height-5: var(--font-heading-small-line-height);
-  --line-height-6: var(--font-heading-medium-line-height);
-  --line-height-7: var(--font-heading-large-line-height);
-  --line-height-8: var(--font-heading-xlarge-line-height);
-  --line-height-9: var(--font-display-large-line-height);
-
-  --letter-spacing-1: var(--font-caption-large-letter-spacing);
-  --letter-spacing-2: var(--font-label-medium-letter-spacing);
-  --letter-spacing-3: var(--font-label-large-letter-spacing);
-  --letter-spacing-4: var(--font-heading-xsmall-letter-spacing);
-  --letter-spacing-5: var(--font-heading-small-letter-spacing);
-  --letter-spacing-6: var(--font-heading-medium-letter-spacing);
-  --letter-spacing-7: var(--font-heading-large-letter-spacing);
-  --letter-spacing-8: var(--font-heading-xlarge-letter-spacing);
-  --letter-spacing-9: var(--font-display-large-letter-spacing);
-
-  --font-weight-light: var(--font-label-small-weight);
-  --font-weight-regular: var(--font-body-small-weight);
-  --font-weight-medium: var(--font-body-medium-weight);
-  --font-weight-bold: var(--font-display-large-weight);
-
-  --default-font-family: var(--font-body-medium-family, "Pretendard");
-  --default-font-size: var(--font-body-medium-size);
-  --default-font-style: normal;
-  --default-font-weight: var(--font-body-medium-weight);
-  --default-line-height: var(--font-body-medium-line-height);
-  --default-letter-spacing: var(--font-body-medium-letter-spacing);
-  --default-leading-trim-start: 0.42em;
-  --default-leading-trim-end: 0.36em;
-
-  --heading-font-family: var(--font-body-medium-family, "Pretendard");
-  --heading-font-size-adjust: 1;
-  --heading-font-style: normal;
-  --heading-leading-trim-start: var(--default-leading-trim-start);
-  --heading-leading-trim-end: var(--default-leading-trim-end);
-  --heading-letter-spacing: var(--font-heading-small-letter-spacing);
-  --heading-line-height-1: var(--font-heading-xxsmall-line-height);
-  --heading-line-height-2: var(--font-heading-xsmall-line-height);
-  --heading-line-height-3: var(--font-heading-small-line-height);
-  --heading-line-height-4: var(--font-heading-medium-line-height);
-  --heading-line-height-5: var(--font-heading-large-line-height);
-  --heading-line-height-6: var(--font-heading-xlarge-line-height);
-  --heading-line-height-7: var(--font-display-small-line-height, 1.4em);
-  --heading-line-height-8: var(--font-display-medium-line-height);
-  --heading-line-height-9: var(--font-display-large-line-height);
-
-  --code-font-family:
-    "Menlo", "Consolas", "Bitstream Vera Sans Mono", monospace;
-  --code-font-style: normal;
-  --code-letter-spacing: -0.007em;
-  --strong-font-family: var(--font-body-medium-family, "Pretendard");
-  --strong-font-weight: var(--font-display-medium-weight, 700);
-  --em-font-family: "Times New Roman", "Times", serif;
-  --quote-font-family: "Times New Roman", "Times", serif;
-  --tab-active-letter-spacing: var(--font-label-medium-letter-spacing);
-  --tab-inactive-letter-spacing: var(--font-label-medium-letter-spacing);
-  --tab-active-word-spacing: 0em;
-  --tab-inactive-word-spacing: 0em;
-
-  /* 입력/텍스트 요소에서 커서 컬러는 본문 텍스트와 동일하게 유지한다. */
-  input,
-  textarea {
-    caret-color: var(--color-label-strong);
-  }
-
-  /* 커서/컨테이너 기본값 */
-  --cursor-button: default;
-  --cursor-checkbox: default;
-  --cursor-disabled: not-allowed;
-  --cursor-link: pointer;
-  --cursor-menu-item: default;
-  --cursor-radio: default;
-  --cursor-slider-thumb: default;
-  --cursor-slider-thumb-active: default;
-  --cursor-switch: default;
-  --container-1: 448px;
-  --container-2: 688px;
-  --container-3: 880px;
-  --container-4: 1136px;
-  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
-  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
-  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
-  --segmented-control-transition-duration: 100ms;
-  --spinner-animation-duration: 800ms;
-  --spinner-opacity: 0.65;
-  overflow-wrap: break-word;
-  font-family: var(--default-font-family);
-  font-size: var(--default-font-size);
-  font-weight: var(--default-font-weight);
-  font-style: var(--default-font-style);
-  line-height: var(--default-line-height);
-  letter-spacing: var(--default-letter-spacing);
-  -webkit-text-size-adjust: none;
-  text-size-adjust: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: var(--gray-12);
-}
-
-/* Radix Themes reset(`.rt-reset`)이 foundation reset보다 우선하지 않도록 기본 박스 모델 재정의 */
-:where(.radix-themes, .theme-root)
-  :is(.rt-reset, .rt-reset::before, .rt-reset::after) {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}