@uniai-fe/uds-primitives 0.0.19 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -55,8 +55,6 @@
   "peerDependencies": {
     "@uniai-fe/uds-foundation": "^0.0.1",
     "@uniai-fe/util-functions": "^0.2.3",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "react": ">= 19",
     "react-dom": ">= 19",
@@ -72,13 +70,10 @@
     "@radix-ui/react-primitive": "^2.1.4",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/themes": "^3.2.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19"
   },
   "devDependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.10.2",

package/src/components/alternate/styles/index.scss

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(alternate): 스타일을 SOT 토큰 값으로 정의한다. */

package/src/components/badge/styles/index.scss

@@ -1,7 +1,5 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* Badge 토큰을 foundation 변수에 맞춰 한 번 더 래핑해 override 여지를 둔다. */
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   --theme-badge-height-xsmall: var(--theme-size-small-1, 20px);
   --theme-badge-height-small: var(--theme-size-small-2, 24px);
   --theme-badge-padding-inline-xsmall: var(--spacing-padding-3, 6px);

package/src/components/button/styles/button.scss

@@ -1,4 +1,3 @@
-@use "@uniai-fe/uds-foundation/css";
 @use "sass:map";
 
 :root {

package/src/components/button/styles/round-button.scss

@@ -1,5 +1,3 @@
-@use "@uniai-fe/uds-foundation/css";
-
 .button.button-template-round {
   min-width: auto;
   padding-block: var(

package/src/components/button/styles/text-button.scss

@@ -1,5 +1,3 @@
-@use "@uniai-fe/uds-foundation/css";
-
 .button.button-template-text {
   min-width: auto;
   border-color: transparent;

package/src/components/calendar/styles/index.scss

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(calendar): 스타일을 SOT 토큰 값으로 정의한다. */

package/src/components/checkbox/styles/index.scss

@@ -1,6 +1,4 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   --theme-checkbox-frame-size-medium: 20px;
   --theme-checkbox-frame-size-large: 24px;
   --theme-checkbox-indicator-size-medium: 16px;

package/src/components/chip/styles/index.scss

@@ -1,7 +1,5 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* Chip 기본 토큰 래핑 */
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   --theme-chip-height: var(--theme-size-small-3, 32px);
   --theme-chip-padding-inline: var(--spacing-padding-5, 12px);
   --theme-chip-radius: var(--theme-radius-medium-3, 8px);

package/src/components/drawer/styles/index.scss

@@ -1,6 +1,4 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   // Figma 기준 bottom sheet 여백/톤을 전역 변수로 정리한다.
   --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
   --drawer-surface-bg: var(--color-bg-surface-static-white);

package/src/components/dropdown/styles/index.scss

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(dropdown): 스타일을 SOT 토큰 값으로 정의한다. */

package/src/components/input/styles/index.scss

@@ -1,6 +1,4 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   --theme-input-height-small: var(--theme-size-medium-1);
   --theme-input-height-medium: var(--theme-size-medium-2);
   --theme-input-height-large: var(--theme-size-medium-3);
@@ -196,6 +194,7 @@
     border: none;
     background: transparent;
     color: var(--theme-input-text-color);
+    caret-color: var(--theme-input-text-color);
     font-size: var(--font-body-medium-size);
     line-height: var(--font-body-medium-line-height);
     font-weight: var(--font-body-medium-weight);

package/src/components/label/styles/index.scss

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(label): 스타일을 SOT 토큰 값으로 정의한다. */

package/src/components/navigation/styles/index.scss

@@ -1,6 +1,4 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root, :root) {
+.uds-theme-root {
   --theme-navigation-height: 86px;
   --theme-navigation-padding-inline: 32px;
   --theme-navigation-padding-block-start: 8px;

package/src/components/pagination/styles/index.scss

@@ -1,5 +1,3 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* Pagination native 구현 스타일 */
 
 .pagination {

package/src/components/radio/styles/index.scss

@@ -1,6 +1,4 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root) {
+.uds-theme-root {
   --theme-radio-frame-size-medium: 20px;
   --theme-radio-frame-size-large: 24px;
   --theme-radio-indicator-size-medium: 16px;

package/src/components/scrollbar/styles/index.scss

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(scrollbar): 스타일을 SOT 토큰 값으로 정의한다. */

package/src/components/segmented-control/styles/index.scss

@@ -1,5 +1,3 @@
-@use "@uniai-fe/uds-foundation/css";
-
 .segmented-control {
   --segmented-height: 34px;
   --segmented-padding: 2px;

package/src/components/segmented-control/types/index.ts

@@ -6,7 +6,6 @@ import type {
   MutableRefObject,
   PointerEvent,
 } from "react";
-import type { SegmentedControl as RadixSegmentedControlNamespace } from "@radix-ui/themes";
 
 /**
  * SegmentedControl value 타입. 문자열 value를 사용한다.
@@ -25,23 +24,24 @@ export interface SegmentedControlOption {
   disabled?: boolean;
 }
 
-type RadixSegmentedControlRootProps = ComponentPropsWithoutRef<
-  typeof RadixSegmentedControlNamespace.Root
->;
-
 /**
- * SegmentedControl props. Radix Root props에서 children을 제거하고 options/ariaLabel을 강제한다.
+ * SegmentedControl props. native div props에 options/ariaLabel/keepSelected 등을 확장한다.
  * @property {SegmentedControlOption[]} options 렌더할 옵션 배열.
  * @property {string} ariaLabel 스크린리더용 라벨. 필수.
  * @property {boolean} [keepSelected=true] 선택된 항목을 다시 클릭했을 때 해제하지 않고 유지할지 여부.
  */
-export interface SegmentedControlProps extends Omit<
-  RadixSegmentedControlRootProps,
+type SegmentedControlRootProps = Omit<
+  ComponentPropsWithoutRef<"div">,
   "children"
-> {
+>;
+
+export interface SegmentedControlProps extends SegmentedControlRootProps {
   options: SegmentedControlOption[];
   ariaLabel: string;
   keepSelected?: boolean;
+  value?: SegmentedControlValue;
+  defaultValue?: SegmentedControlValue;
+  onValueChange?: (value: SegmentedControlValue) => void;
 }
 
 export interface SegmentedControlIndicatorRect {

package/src/components/select/styles/index.scss

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(select): 스타일을 SOT 토큰 값으로 정의한다. */

package/src/components/spinner/styles/index.scss

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(spinner): 스타일을 SOT 토큰 값으로 정의한다. */

package/src/components/tab/styles/index.scss

@@ -1,5 +1,3 @@
-@use "@uniai-fe/uds-foundation/css";
-
 .tab-root {
   /* Figma node 694:4619 측정값을 CSS 변수로 고정해 Storybook과 실 서비스 간 시각 편차를 줄인다. */
   --tab-label-font-size: var(--font-heading-xsmall-size, 17px);

package/src/components/table/styles/index.scss

@@ -1,3 +1 @@
-@use "@uniai-fe/uds-foundation/css";
-
 /* TODO(table): 스타일을 SOT 토큰 값으로 정의한다. */

package/src/index.scss

@@ -1,7 +1,5 @@
-@use "@uniai-fe/uds-foundation/css";
-@use "./theme/overrides.scss";
-
-/* 모든 primitives component SCSS를 한 번에 노출해 서비스 import 부담을 줄인다. */
+/* 모든 primitives component SCSS를 한 번에 노출해 서비스 import 부담을 줄인다.
+   ※ foundation CSS(`@uniai-fe/uds-foundation/css`)는 소비자가 별도로 한 번만 로드해야 한다. */
 @use "./components/alternate";
 @use "./components/badge";
 @use "./components/button";

package/src/index.tsx

@@ -1,7 +1,6 @@
 // dayjs 초기화를 가장 먼저 수행해 날짜 계열 컴포넌트가 동일 컨텍스트를 사용한다.
 import "./init/dayjs";
-
-export * from "./theme";
+// ThemeProvider는 foundation provider에서만 export한다(one-source 규칙).
 
 // 루트 배럴: 카테고리별 export를 집계한다.
 export * from "./components/button";

package/src/components/dialog/hooks/index.ts

@@ -1,4 +0,0 @@
-/**
- * TODO(dialog): 접근성/상태 계산 hook을 정의한다.
- */
-export {};

package/src/components/dialog/index.scss

@@ -1 +0,0 @@
-@use "./styles/index.scss";

package/src/components/dialog/index.tsx

@@ -1,6 +0,0 @@
-import "./index.scss";
-
-export * from "./markup";
-export * from "./hooks";
-export type * from "./types";
-export * from "./utils";

package/src/components/dialog/markup/ConfirmDialog.tsx

@@ -1,339 +0,0 @@
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import clsx from "clsx";
-import { createContext, forwardRef, useContext, useState } from "react";
-import type {
-  ConfirmDialogActionProps,
-  ConfirmDialogCancelProps,
-  ConfirmDialogContentProps,
-  ConfirmDialogDescriptionProps,
-  ConfirmDialogOverlayProps,
-  ConfirmDialogSectionProps,
-  ConfirmDialogTitleProps,
-  ConfirmDialogRootProps,
-} from "../types";
-import type { PointerEvent } from "react";
-
-type ConfirmDialogInternalContextValue = {
-  requestClose: () => void;
-};
-
-const ConfirmDialogInternalContext = createContext<
-  ConfirmDialogInternalContextValue | undefined
->(undefined);
-
-const useConfirmDialogInternalContext = () => {
-  const context = useContext(ConfirmDialogInternalContext);
-  if (!context) {
-    throw new Error(
-      "ConfirmDialog components must be used within ConfirmDialogRoot",
-    );
-  }
-  return context;
-};
-
-/**
- * ConfirmDialogRoot; AlertDialog 루트
- * @component
- * @param {ConfirmDialogRootProps} props
- * @param {boolean} [props.open] 제어형 open 상태.
- * @param {boolean} [props.defaultOpen] 비제어 초기 open 상태.
- * @param {(open: boolean) => void} [props.onOpenChange] open 변경 콜백.
- */
-const ConfirmDialogRoot = ({
-  open: openProp,
-  defaultOpen,
-  onOpenChange,
-  children,
-  ...restProps
-}: ConfirmDialogRootProps) => {
-  const isControlled = openProp !== undefined;
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(
-    defaultOpen ?? false,
-  );
-  const resolvedOpen = isControlled ? openProp : uncontrolledOpen;
-
-  const handleOpenChange = (nextOpen: boolean) => {
-    if (!isControlled) {
-      setUncontrolledOpen(nextOpen);
-    }
-    onOpenChange?.(nextOpen);
-  };
-
-  return (
-    <ConfirmDialogInternalContext.Provider
-      value={{
-        requestClose: () => handleOpenChange(false),
-      }}
-    >
-      <AlertDialogPrimitive.Root
-        {...restProps}
-        open={resolvedOpen}
-        onOpenChange={handleOpenChange}
-      >
-        {children}
-      </AlertDialogPrimitive.Root>
-    </ConfirmDialogInternalContext.Provider>
-  );
-};
-const ConfirmDialogTrigger = AlertDialogPrimitive.Trigger;
-const ConfirmDialogPortal = AlertDialogPrimitive.Portal;
-
-/**
- * ConfirmDialogOverlay; 취소 성격의 바깥 dim
- * @component
- * @param {ConfirmDialogOverlayProps} props
- * @param {string} [props.className] overlay className.
- * @param {boolean} [props.disableOutsideClose=false] dim 클릭으로 닫힘 방지 여부.
- */
-const ConfirmDialogOverlay = forwardRef<
-  HTMLDivElement,
-  ConfirmDialogOverlayProps
->(
-  (
-    { className, disableOutsideClose = false, onPointerDown, ...props },
-    forwardedRef,
-  ) => {
-    const { requestClose } = useConfirmDialogInternalContext();
-
-    const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
-      onPointerDown?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (disableOutsideClose) {
-        return;
-      }
-      requestClose();
-    };
-
-    return (
-      <AlertDialogPrimitive.Overlay
-        {...props}
-        ref={forwardedRef}
-        className={clsx("dialog-overlay confirm-dialog-overlay", className)}
-        data-variant="confirm"
-        onPointerDown={handlePointerDown}
-      />
-    );
-  },
-);
-
-ConfirmDialogOverlay.displayName = "ConfirmDialogOverlay";
-
-/**
- * ConfirmDialogContent; AlertDialog 패널
- * @component
- * @param {ConfirmDialogContentProps} props
- * @param {string} [props.className] content className.
- * @param {React.ReactNode} [props.children] 패널 내용.
- */
-const ConfirmDialogContent = forwardRef<
-  HTMLDivElement,
-  ConfirmDialogContentProps
->(({ className, children, ...props }, forwardedRef) => (
-  <AlertDialogPrimitive.Content
-    {...props}
-    ref={forwardedRef}
-    className={clsx("dialog-content confirm-dialog-content", className)}
-    data-variant="confirm"
-  >
-    {children}
-  </AlertDialogPrimitive.Content>
-));
-
-ConfirmDialogContent.displayName = "ConfirmDialogContent";
-
-/**
- * ConfirmDialogTitle; AlertDialog 제목
- * @component
- * @param {ConfirmDialogTitleProps} props
- * @param {string} [props.className] title className.
- * @param {boolean} [props.visuallyHidden=false] 제목 시각적 숨김 여부.
- * @param {React.ReactNode} [props.children] 제목 텍스트.
- */
-const ConfirmDialogTitle = forwardRef<
-  HTMLHeadingElement,
-  ConfirmDialogTitleProps
->(({ className, visuallyHidden = false, children, ...props }, forwardedRef) => {
-  const titleNode = (
-    <AlertDialogPrimitive.Title
-      {...props}
-      ref={forwardedRef}
-      className={clsx("dialog-title confirm-dialog-title", className)}
-      data-variant="confirm"
-    >
-      {children}
-    </AlertDialogPrimitive.Title>
-  );
-
-  if (visuallyHidden) {
-    return <VisuallyHidden asChild>{titleNode}</VisuallyHidden>;
-  }
-
-  return titleNode;
-});
-
-ConfirmDialogTitle.displayName = "ConfirmDialogTitle";
-
-/**
- * ConfirmDialogDescription; AlertDialog 설명
- * @component
- * @param {ConfirmDialogDescriptionProps} props
- * @param {string} [props.className] description className.
- * @param {boolean} [props.visuallyHidden=false] 설명 시각적 숨김 여부.
- * @param {React.ReactNode} [props.children] 설명 텍스트.
- */
-const ConfirmDialogDescription = forwardRef<
-  HTMLParagraphElement,
-  ConfirmDialogDescriptionProps
->(({ className, visuallyHidden = false, children, ...props }, forwardedRef) => {
-  const descriptionNode = (
-    <AlertDialogPrimitive.Description
-      {...props}
-      ref={forwardedRef}
-      className={clsx(
-        "dialog-description confirm-dialog-description",
-        className,
-      )}
-      data-variant="confirm"
-    >
-      {children}
-    </AlertDialogPrimitive.Description>
-  );
-
-  if (visuallyHidden) {
-    return <VisuallyHidden asChild>{descriptionNode}</VisuallyHidden>;
-  }
-
-  return descriptionNode;
-});
-
-ConfirmDialogDescription.displayName = "ConfirmDialogDescription";
-
-/**
- * ConfirmDialogHeader; 헤더 영역
- * @component
- * @param {ConfirmDialogSectionProps} props
- * @param {string} [props.className] 섹션 className.
- * @param {React.ReactNode} [props.children] 헤더 콘텐츠.
- */
-const ConfirmDialogHeader = forwardRef<
-  HTMLDivElement,
-  ConfirmDialogSectionProps
->(({ className, ...props }, forwardedRef) => (
-  <div
-    {...props}
-    ref={forwardedRef}
-    className={clsx("dialog-section confirm-dialog-header", className)}
-    data-section="header"
-  />
-));
-
-ConfirmDialogHeader.displayName = "ConfirmDialogHeader";
-
-/**
- * ConfirmDialogBody; 본문 영역
- * @component
- * @param {ConfirmDialogSectionProps} props
- * @param {string} [props.className] 섹션 className.
- * @param {React.ReactNode} [props.children] 본문 콘텐츠.
- */
-const ConfirmDialogBody = forwardRef<HTMLDivElement, ConfirmDialogSectionProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <div
-      {...props}
-      ref={forwardedRef}
-      className={clsx("dialog-section confirm-dialog-body", className)}
-      data-section="body"
-    />
-  ),
-);
-
-ConfirmDialogBody.displayName = "ConfirmDialogBody";
-
-/**
- * ConfirmDialogActions; 버튼 영역
- * @component
- * @param {ConfirmDialogSectionProps} props
- * @param {string} [props.className] 섹션 className.
- * @param {React.ReactNode} [props.children] 버튼 콘텐츠.
- */
-const ConfirmDialogActions = forwardRef<
-  HTMLDivElement,
-  ConfirmDialogSectionProps
->(({ className, ...props }, forwardedRef) => (
-  <div
-    {...props}
-    ref={forwardedRef}
-    className={clsx("dialog-section confirm-dialog-actions", className)}
-    data-section="actions"
-  />
-));
-
-ConfirmDialogActions.displayName = "ConfirmDialogActions";
-
-/**
- * ConfirmDialogCancelButton; AlertDialog Cancel wrapper
- * @component
- * @param {ConfirmDialogCancelProps} props
- * @param {string} [props.className] button className.
- * @param {boolean} [props.asChild=false] slot mode 사용 여부.
- */
-const ConfirmDialogCancel = forwardRef<
-  HTMLButtonElement,
-  ConfirmDialogCancelProps
->(({ className, asChild, ...props }, forwardedRef) => (
-  <AlertDialogPrimitive.Cancel
-    {...props}
-    asChild={asChild}
-    ref={forwardedRef}
-    className={clsx(
-      !asChild && "dialog-button confirm-dialog-cancel",
-      className,
-    )}
-    data-native-element={asChild ? undefined : "true"}
-  />
-));
-
-ConfirmDialogCancel.displayName = "ConfirmDialogCancel";
-
-/**
- * ConfirmDialogActionButton; AlertDialog Action wrapper
- * @component
- * @param {ConfirmDialogActionProps} props
- * @param {string} [props.className] button className.
- * @param {boolean} [props.asChild=false] slot mode 사용 여부.
- */
-const ConfirmDialogAction = forwardRef<
-  HTMLButtonElement,
-  ConfirmDialogActionProps
->(({ className, asChild, ...props }, forwardedRef) => (
-  <AlertDialogPrimitive.Action
-    {...props}
-    asChild={asChild}
-    ref={forwardedRef}
-    className={clsx(
-      !asChild && "dialog-button confirm-dialog-action",
-      className,
-    )}
-    data-native-element={asChild ? undefined : "true"}
-  />
-));
-
-ConfirmDialogAction.displayName = "ConfirmDialogAction";
-
-export {
-  ConfirmDialogRoot,
-  ConfirmDialogTrigger,
-  ConfirmDialogPortal,
-  ConfirmDialogOverlay,
-  ConfirmDialogContent,
-  ConfirmDialogTitle,
-  ConfirmDialogDescription,
-  ConfirmDialogHeader,
-  ConfirmDialogBody,
-  ConfirmDialogActions,
-  ConfirmDialogCancel,
-  ConfirmDialogAction,
-};