@uniai-fe/uds-primitives 0.0.18 → 0.0.20

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;
@@ -10,96 +8,98 @@
   --segmented-label-color: var(--color-label-neutral, #797e86);
   --segmented-label-active-color: var(--color-label-strong, #181a1b);
   --segmented-disabled-opacity: 0.4;
+  --segmented-gap: 2px;
   --segmented-item-padding-x: 22px;
   --segmented-item-padding-y: 4px;
   --segmented-item-font-size: var(--font-heading-xxsmall-size, 15px);
   --segmented-item-font-weight: var(--font-heading-xxsmall-weight, 500);
   --segmented-item-line-height: var(--font-heading-xxsmall-line-height, 1.5);
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-  align-items: stretch;
+  position: relative;
+  display: block;
+  box-sizing: border-box;
   padding: var(--segmented-padding);
   border-radius: var(--segmented-radius);
   background: var(--segmented-bg);
   width: fit-content;
-  height: var(--segmented-height);
-  font-size: 0;
+  min-height: var(--segmented-height);
   isolation: isolate;
-}
-
-.segmented-control:where(.rt-SegmentedControlRoot) {
-  /* Radix Theme 기본 inline-grid를 덮어 동일한 sizing 시스템에서만 layout이 될 수 있도록 한다. */
-  display: grid;
+  overflow: hidden;
 }
 
 .segmented-control:where([data-keep-selected="true"]) {
   --segmented-disabled-opacity: 0.3;
 }
 
-.segmented-control :where(.rt-SegmentedControlIndicator) {
-  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
-  background: transparent;
-  box-shadow: none;
-  overflow: hidden;
-}
-
-.segmented-control :where(.rt-SegmentedControlIndicator)::before {
-  content: "";
+.segmented-control-indicator {
   position: absolute;
-  inset: var(--segmented-padding);
+  top: var(--segmented-padding);
+  bottom: var(--segmented-padding);
+  left: 0;
+  width: 0px;
+  height: calc(100% - (var(--segmented-padding) * 2));
+  margin: 0;
   border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
   background: var(--segmented-indicator-bg);
   box-shadow: var(--segmented-indicator-shadow);
+  transition:
+    transform 0.2s ease,
+    width 0.2s ease,
+    opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 0;
 }
 
-.segmented-control :where(.rt-SegmentedControlItemSeparator) {
-  display: none;
+.segmented-control-indicator[data-visible="false"] {
+  opacity: 0;
 }
 
-.segmented-control :where(.rt-SegmentedControlItem) {
-  background: transparent;
-  padding: 0;
-  border: none;
-  min-width: 0;
+.segmented-control-list {
   display: flex;
+  column-gap: var(--segmented-gap);
+  row-gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  z-index: 1;
 }
 
-.segmented-control :where(.rt-SegmentedControlItemLabel) {
-  gap: 0;
-  height: fit-content;
+.segmented-control-item {
+  list-style: none;
+  margin: 0;
   padding: 0;
-  font-size: 0;
 }
 
-.segmented-control-item {
+.segmented-control-button {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
-  height: 100%;
   border: none;
   background: transparent;
   cursor: pointer;
-  .rt-SegmentedControlItemLabel {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--segmented-item-padding-y) var(--segmented-item-padding-x);
-    border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
-  }
+  min-width: 0;
+  border-radius: calc(var(--segmented-radius) - var(--segmented-padding));
+  padding: var(--segmented-item-padding-y) var(--segmented-item-padding-x);
+  transition: color 0.2s ease;
 }
-.segmented-control-item:where([data-disabled="true"]) {
+
+.segmented-control-button:where([data-disabled="true"]) {
   cursor: not-allowed;
   opacity: var(--segmented-disabled-opacity);
 }
 
-.segmented-control-item:where(:focus-visible) {
+.segmented-control-button:where(:focus-visible) {
   outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
   outline-offset: 2px;
 }
 
-.segmented-control-item-label {
-  // display: flex;
-  // align-items: center;
-  // justify-content: center;
+.segmented-control-button-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: var(--segmented-item-font-size);
   font-weight: var(--segmented-item-font-weight);
   line-height: var(--segmented-item-line-height);
@@ -108,6 +108,7 @@
   transition: color 0.2s ease;
 }
 
-.segmented-control-item:where([data-state="on"]) .segmented-control-item-label {
+.segmented-control-button:where([data-state="on"])
+  .segmented-control-button-label {
   color: var(--segmented-label-active-color);
 }

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

@@ -1,5 +1,11 @@
-import type { ComponentPropsWithoutRef } from "react";
-import type { SegmentedControl as RadixSegmentedControlNamespace } from "@radix-ui/themes";
+import type {
+  ComponentPropsWithoutRef,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
+  MutableRefObject,
+  PointerEvent,
+} from "react";
 
 /**
  * SegmentedControl value 타입. 문자열 value를 사용한다.
@@ -18,21 +24,53 @@ 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 {
+  width: number;
+  left: number;
+}
+
+export interface SegmentedControlIndicatorProps {
+  rect: SegmentedControlIndicatorRect;
+  visible: boolean;
+}
+
+export type SegmentedControlButtonEvent =
+  | MouseEvent<HTMLButtonElement>
+  | PointerEvent<HTMLButtonElement>
+  | KeyboardEvent<HTMLButtonElement>
+  | FocusEvent<HTMLButtonElement>;
+
+export interface SegmentedControlListProps {
+  options: SegmentedControlOption[];
+  keepSelected: boolean;
+  selectedValue?: SegmentedControlValue;
+  focusableIndex: number;
+  fallbackIndex: number;
+  itemRefs: MutableRefObject<Array<HTMLButtonElement | null>>;
+  onSelect: (value: SegmentedControlValue | undefined) => void;
+  onFocusItemAt: (index: number) => void;
+  onArrowNavigate: (
+    event: KeyboardEvent<HTMLButtonElement>,
+    currentIndex: number,
+  ) => void;
 }

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,
-};