@uniai-fe/uds-primitives 0.2.0 → 0.2.1

package/dist/styles.css

@@ -214,7 +214,7 @@
   --dropdown-text-medium-size: 16px;
   --dropdown-text-medium-line-height: 24px;
   --dropdown-text-medium-letter-spacing: 0;
-  --dropdown-text-large-size: 17px;
+  --dropdown-text-large-size: 19px;
   --dropdown-text-large-line-height: 26px;
   --dropdown-text-large-letter-spacing: 0;
   --dropdown-text-weight: 400;
@@ -222,9 +222,9 @@
   --dropdown-description-color: var(--color-label-neutral);
   --dropdown-description-size: 14px;
   --dropdown-description-line-height: 22px;
-  --dropdown-option-height-small: 32px;
-  --dropdown-option-height-medium: 40px;
-  --dropdown-option-height-large: 48px;
+  --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
+  --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
+  --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
   /* Input sizing tokens; Button 변수 규칙과 동일한 prefix 패턴을 맞춘다. */
   --input-default-height-small: var(--theme-size-medium-1);
   --input-default-height-medium: var(--theme-size-medium-2);
@@ -1545,8 +1545,8 @@ figure.chip {
   color: var(--dropdown-option-color-disabled);
 }
 
-.dropdown-menu-item-prefix,
-.dropdown-menu-item-suffix {
+.dropdown-menu-item-left,
+.dropdown-menu-item-right {
   display: inline-flex;
   align-items: center;
   color: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/dropdown/markup/Template.tsx

@@ -19,7 +19,7 @@ const DropdownTemplate = ({
   selectedIds = [],
   onSelect,
   size = "medium",
-  matchTriggerWidth = true,
+  width = "match",
   rootProps,
   containerProps,
   menuListProps,
@@ -27,11 +27,7 @@ const DropdownTemplate = ({
   return (
     <DropdownRoot {...rootProps}>
       <DropdownTrigger asChild>{trigger}</DropdownTrigger>
-      <DropdownContainer
-        {...containerProps}
-        size={size}
-        matchTriggerWidth={matchTriggerWidth}
-      >
+      <DropdownContainer {...containerProps} size={size} width={width}>
         <DropdownMenuList {...menuListProps}>
           {items.map(item => (
             <DropdownMenuItem
@@ -39,8 +35,8 @@ const DropdownTemplate = ({
               label={item.label}
               description={item.description}
               disabled={item.disabled}
-              leftSlot={item.leftSlot}
-              rightSlot={item.rightSlot}
+              left={item.left}
+              right={item.right}
               multiple={item.multiple}
               isSelected={selectedIds?.includes(item.id)}
               onSelect={event => {

package/src/components/dropdown/markup/foundation/Container.tsx

@@ -2,7 +2,7 @@
 
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import clsx from "clsx";
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 
 import type { DropdownContainerProps } from "../../types/props";
 import { useDropdownContext } from "./Provider";
@@ -11,8 +11,8 @@ import { useDropdownContext } from "./Provider";
  * Dropdown container; trigger width 동기화 및 portal 관리
  * @component
  * @param {DropdownContainerProps} props Dropdown container props
- * @param {boolean} [props.matchTriggerWidth=true] trigger width 맞춤 여부
- * @param {DropdownContainerProps["size"]} [props.size="medium"] option height scale
+ * @param {DropdownPanelWidth} [props.width="match"] panel width 옵션
+ * @param {DropdownSize} [props.size="medium"] option height scale
  */
 const DropdownContainer = forwardRef<HTMLDivElement, DropdownContainerProps>(
   (
@@ -20,7 +20,7 @@ const DropdownContainer = forwardRef<HTMLDivElement, DropdownContainerProps>(
       children,
       className,
       size = "medium",
-      matchTriggerWidth = true,
+      width = "match",
       portalContainer,
       align = "start",
       side = "bottom",
@@ -33,9 +33,34 @@ const DropdownContainer = forwardRef<HTMLDivElement, DropdownContainerProps>(
   ) => {
     const { triggerRef } = useDropdownContext("Dropdown.Container");
     const [panelWidth, setPanelWidth] = useState<number>();
+    const shouldMatchTriggerWidth = width === "match";
+
+    const resolvedMinWidth = useMemo(() => {
+      if (shouldMatchTriggerWidth) {
+        return undefined;
+      }
+
+      if (typeof width === "number") {
+        return `${width}px`;
+      }
+
+      if (typeof width === "string") {
+        if (width === "fit-content") {
+          return "fit-content";
+        }
+        if (width === "max-content") {
+          return "max-content";
+        }
+        if (width.trim().length > 0 && width !== "match") {
+          return width;
+        }
+      }
+
+      return undefined;
+    }, [shouldMatchTriggerWidth, width]);
 
     useEffect(() => {
-      if (!matchTriggerWidth) {
+      if (!shouldMatchTriggerWidth) {
         return;
       }
 
@@ -60,7 +85,7 @@ const DropdownContainer = forwardRef<HTMLDivElement, DropdownContainerProps>(
       return () => {
         observer.disconnect();
       };
-    }, [matchTriggerWidth, triggerRef]);
+    }, [shouldMatchTriggerWidth, triggerRef]);
 
     const content = (
       <DropdownMenu.Content
@@ -73,7 +98,10 @@ const DropdownContainer = forwardRef<HTMLDivElement, DropdownContainerProps>(
         className={clsx("dropdown-panel", `dropdown-panel-${size}`, className)}
         style={{
           ...style,
-          width: matchTriggerWidth && panelWidth ? panelWidth : style?.width,
+          width:
+            shouldMatchTriggerWidth && panelWidth ? panelWidth : style?.width,
+          minWidth:
+            resolvedMinWidth !== undefined ? resolvedMinWidth : style?.minWidth,
         }}
       >
         {children}

package/src/components/dropdown/markup/foundation/MenuItem.tsx

@@ -20,8 +20,8 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
     {
       label,
       description,
-      leftSlot,
-      rightSlot,
+      left,
+      right,
       isSelected = false,
       multiple = false,
       className,
@@ -34,9 +34,9 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
   ) => {
     const labelContent = label ?? children;
     const hasDescription = Boolean(description);
-    const shouldRenderCheckbox = multiple && !leftSlot;
+    const shouldRenderCheckbox = multiple && !left;
 
-    const renderPrefix = () => {
+    const renderLeft = () => {
       if (shouldRenderCheckbox) {
         const checkboxClassName = clsx(
           "dropdown-menu-item-checkbox",
@@ -53,14 +53,14 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
         } as CheckboxProps;
 
         return (
-          <span className="dropdown-menu-item-prefix" aria-hidden="true">
+          <span className="dropdown-menu-item-left" aria-hidden="true">
             <Checkbox size="medium" {...checkboxAdditionalProps} />
           </span>
         );
       }
 
-      if (leftSlot) {
-        return <span className="dropdown-menu-item-prefix">{leftSlot}</span>;
+      if (left) {
+        return <span className="dropdown-menu-item-left">{left}</span>;
       }
 
       return null;
@@ -82,7 +82,7 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
             onSelectHandler?.(event);
           }}
         >
-          {renderPrefix()}
+          {renderLeft()}
           <span className="dropdown-menu-item-body">
             {labelContent ? (
               <span className="dropdown-menu-item-label">{labelContent}</span>
@@ -93,8 +93,8 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
               </span>
             ) : null}
           </span>
-          {rightSlot ? (
-            <span className="dropdown-menu-item-suffix">{rightSlot}</span>
+          {right ? (
+            <span className="dropdown-menu-item-right">{right}</span>
           ) : null}
         </DropdownMenu.Item>
       </li>

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

@@ -107,8 +107,8 @@
   }
 }
 
-.dropdown-menu-item-prefix,
-.dropdown-menu-item-suffix {
+.dropdown-menu-item-left,
+.dropdown-menu-item-right {
   display: inline-flex;
   align-items: center;
   color: inherit;

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

@@ -25,7 +25,7 @@
   --dropdown-text-medium-size: 16px;
   --dropdown-text-medium-line-height: 24px;
   --dropdown-text-medium-letter-spacing: 0;
-  --dropdown-text-large-size: 17px;
+  --dropdown-text-large-size: 19px;
   --dropdown-text-large-line-height: 26px;
   --dropdown-text-large-letter-spacing: 0;
   --dropdown-text-weight: 400;
@@ -34,7 +34,7 @@
   --dropdown-description-size: 14px;
   --dropdown-description-line-height: 22px;
 
-  --dropdown-option-height-small: 32px;
-  --dropdown-option-height-medium: 40px;
-  --dropdown-option-height-large: 48px;
+  --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
+  --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
+  --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
 }

package/src/components/dropdown/types/base.ts

@@ -6,6 +6,19 @@ import type { DropdownMenuProps } from "@radix-ui/react-dropdown-menu";
  */
 export type DropdownSize = "small" | "medium" | "large";
 
+/**
+ * Dropdown panel width 옵션
+ * - "match": trigger width 추적
+ * - "fit-content" | "max-content": 고정 넓이 프리셋
+ * - string/number: min-width 커스텀 값
+ */
+export type DropdownPanelWidth =
+  | "match"
+  | "fit-content"
+  | "max-content"
+  | string
+  | number;
+
 /**
  * Dropdown root props
  * @property {boolean} [modal] Radix modal 모드 여부

package/src/components/dropdown/types/props.ts

@@ -6,23 +6,22 @@ import type {
 import type { HTMLAttributes, MutableRefObject, ReactNode } from "react";
 
 import type { CheckboxProps } from "../../checkbox/types";
-import type { DropdownRootProps, DropdownSize } from "./base";
+import type {
+  DropdownPanelWidth,
+  DropdownRootProps,
+  DropdownSize,
+} from "./base";
 
 /**
  * Dropdown trigger props
  * @property {boolean} [asChild=true] trigger를 asChild 패턴으로 감쌀지 여부
  */
-export interface DropdownTriggerProps extends DropdownMenuTriggerProps {
-  /**
-   * trigger를 asChild 패턴으로 감쌀지 여부
-   */
-  asChild?: DropdownMenuTriggerProps["asChild"];
-}
+export type DropdownTriggerProps = DropdownMenuTriggerProps;
 
 /**
  * Dropdown Container props
  * @property {DropdownSize} [size="medium"] option 높이 스케일
- * @property {boolean} [matchTriggerWidth=true] trigger 너비에 맞춰 dropdown 너비를 맞출지 여부
+ * @property {DropdownPanelWidth} [width="match"] dropdown panel width 옵션
  * @property {HTMLElement | null} [portalContainer] portal을 렌더링할 DOM 컨테이너
  */
 export interface DropdownContainerProps extends DropdownMenuContentProps {
@@ -33,7 +32,7 @@ export interface DropdownContainerProps extends DropdownMenuContentProps {
   /**
    * trigger 너비에 맞춰 dropdown 너비를 맞출지 여부
    */
-  matchTriggerWidth?: boolean;
+  width?: DropdownPanelWidth;
   /**
    * portal을 렌더링할 DOM 컨테이너
    */
@@ -44,8 +43,8 @@ export interface DropdownContainerProps extends DropdownMenuContentProps {
  * Dropdown menu item props
  * @property {ReactNode} [label] 옵션 라벨
  * @property {ReactNode} [description] 보조 텍스트
- * @property {ReactNode} [leftSlot] 좌측 슬롯
- * @property {ReactNode} [rightSlot] 우측 슬롯
+ * @property {ReactNode} [left] 좌측 콘텐츠
+ * @property {ReactNode} [right] 우측 콘텐츠
  * @property {boolean} [isSelected] 선택 상태 여부
  * @property {boolean} [multiple] multi select 스타일 여부
  * @property {CheckboxProps} [checkboxProps] multiple 시 Checkbox 커스터마이징 옵션
@@ -60,13 +59,13 @@ export interface DropdownMenuItemProps extends RadixDropdownMenuItemProps {
    */
   description?: ReactNode;
   /**
-   * 좌측 슬롯
+   * 좌측 콘텐츠
    */
-  leftSlot?: ReactNode;
+  left?: ReactNode;
   /**
-   * 우측 슬롯
+   * 우측 콘텐츠
    */
-  rightSlot?: ReactNode;
+  right?: ReactNode;
   /**
    * 선택 상태 여부
    */
@@ -103,8 +102,8 @@ export interface DropdownContextValue {
  * @property {ReactNode} label 옵션 라벨
  * @property {ReactNode} [description] 보조 텍스트
  * @property {boolean} [disabled] 비활성 여부
- * @property {ReactNode} [leftSlot] 좌측 슬롯
- * @property {ReactNode} [rightSlot] 우측 슬롯
+ * @property {ReactNode} [left] 좌측 콘텐츠
+ * @property {ReactNode} [right] 우측 콘텐츠
  * @property {boolean} [multiple] multi select 스타일 여부
  */
 export interface DropdownTemplateItem {
@@ -125,13 +124,13 @@ export interface DropdownTemplateItem {
    */
   disabled?: boolean;
   /**
-   * 좌측 슬롯
+   * 좌측 콘텐츠
    */
-  leftSlot?: ReactNode;
+  left?: ReactNode;
   /**
-   * 우측 슬롯
+   * 우측 콘텐츠
    */
-  rightSlot?: ReactNode;
+  right?: ReactNode;
   /**
    * multi select 스타일 여부
    */
@@ -144,7 +143,7 @@ export interface DropdownTemplateItem {
  * @property {DropdownTemplateItem[]} items 렌더링할 menu item 리스트
  * @property {string[]} [selectedIds] 선택된 item id 배열
  * @property {DropdownSize} [size="medium"] surface height scale
- * @property {boolean} [matchTriggerWidth=true] trigger width 동기화 여부
+ * @property {DropdownPanelWidth} [width="match"] panel width 옵션
  * @property {DropdownRootProps} [rootProps] Root 에 전달할 props
  * @property {DropdownContainerProps} [containerProps] Container 에 전달할 props
  * @property {DropdownMenuListProps} [menuListProps] MenuList 에 전달할 props
@@ -155,7 +154,7 @@ export interface DropdownTemplateProps {
   selectedIds?: string[];
   onSelect?: (item: DropdownTemplateItem) => void;
   size?: DropdownSize;
-  matchTriggerWidth?: boolean;
+  width?: DropdownPanelWidth;
   /**
    * Root 에 전달할 props
    */
@@ -163,10 +162,7 @@ export interface DropdownTemplateProps {
   /**
    * Container 에 전달할 props
    */
-  containerProps?: Omit<
-    DropdownContainerProps,
-    "children" | "size" | "matchTriggerWidth"
-  >;
+  containerProps?: Omit<DropdownContainerProps, "children" | "size" | "width">;
   /**
    * MenuList 에 전달할 props
    */

package/src/components/select/markup/Default.tsx

@@ -43,7 +43,7 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
       selectedOptionIds,
       onOptionSelect,
       dropdownSize,
-      dropdownMatchTriggerWidth = true,
+      dropdownWidth = "match",
       dropdownRootProps,
       dropdownContainerProps,
       dropdownMenuListProps,
@@ -117,7 +117,7 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
             <Dropdown.Container
               {...dropdownContainerProps}
               size={panelSize}
-              matchTriggerWidth={dropdownMatchTriggerWidth}
+              width={dropdownWidth}
             >
               <Dropdown.Menu.List {...dropdownMenuListProps}>
                 {/* Dropdown menu option들을 그대로 매핑해 선택 이벤트를 전달한다. */}
@@ -127,8 +127,8 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
                     label={option.label}
                     description={option.description}
                     disabled={option.disabled}
-                    leftSlot={option.leftSlot}
-                    rightSlot={option.rightSlot}
+                    left={option.left}
+                    right={option.right}
                     multiple={Boolean(option.multiple)}
                     isSelected={resolvedSelectedIds.includes(option.id)}
                     onSelect={event => {

package/src/components/select/markup/multiple/Multiple.tsx

@@ -45,7 +45,7 @@ const SelectMultipleTrigger = forwardRef<
       selectedOptionIds,
       onOptionSelect,
       dropdownSize,
-      dropdownMatchTriggerWidth = true,
+      dropdownWidth = "match",
       dropdownRootProps,
       dropdownContainerProps,
       dropdownMenuListProps,
@@ -168,7 +168,7 @@ const SelectMultipleTrigger = forwardRef<
             <Dropdown.Container
               {...dropdownContainerProps}
               size={panelSize}
-              matchTriggerWidth={dropdownMatchTriggerWidth}
+              width={dropdownWidth}
             >
               <Dropdown.Menu.List {...dropdownMenuListProps}>
                 {/* multi select 전용 옵션을 Dropdown.Menu.Item으로 노출한다. */}
@@ -178,8 +178,8 @@ const SelectMultipleTrigger = forwardRef<
                     label={option.label}
                     description={option.description}
                     disabled={option.disabled}
-                    leftSlot={option.leftSlot}
-                    rightSlot={option.rightSlot}
+                    left={option.left}
+                    right={option.right}
                     multiple
                     isSelected={resolvedSelectedIds.includes(option.id)}
                     onSelect={event => {

package/src/components/select/types/index.ts

@@ -3,3 +3,4 @@ export type * from "./icon";
 export type * from "./props";
 export type * from "./trigger";
 export type * from "./multiple";
+export type * from "./option";

package/src/components/select/types/option.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+
+/**
+ * Select option 값 타입
+ * @typedef {string | number} SelectOptionValue
+ */
+export type SelectOptionValue = string | number;
+
+/**
+ * Select option 데이터 구조; legacy SelectDataType과 호환되는 구조다.
+ * @property {string} key 렌더링 키
+ * @property {SelectOptionValue} value 실제 값
+ * @property {ReactNode} optionName 사용자 노출 라벨
+ * @property {boolean} [selected] 선택 여부
+ * @property {boolean} [disabled] 비활성 여부
+ * @property {OptionData} [data] 추가 데이터 payload
+ */
+export interface SelectOption<OptionData = unknown> {
+  /**
+   * 렌더링 키
+   */
+  key: string;
+  /**
+   * 실제 값
+   */
+  value: SelectOptionValue;
+  /**
+   * 사용자 노출 라벨
+   */
+  optionName: ReactNode;
+  /**
+   * 선택 여부
+   */
+  selected?: boolean;
+  /**
+   * 비활성 여부
+   */
+  disabled?: boolean;
+  /**
+   * 추가 데이터 payload
+   */
+  data?: OptionData;
+}

package/src/components/select/types/props.ts

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import type {
   DropdownContainerProps,
   DropdownMenuListProps,
+  DropdownPanelWidth,
   DropdownRootProps,
   DropdownTemplateItem,
 } from "../../dropdown/types";
@@ -116,7 +117,7 @@ export interface SelectDropdownOption extends DropdownTemplateItem {}
  * @property {string[]} [selectedOptionIds] 선택된 option id 리스트
  * @property {(option: SelectDropdownOption) => void} [onOptionSelect] option 선택 콜백
  * @property {SelectSize} [dropdownSize] dropdown surface size 스케일
- * @property {boolean} [dropdownMatchTriggerWidth] trigger width 동기화 여부
+ * @property {DropdownPanelWidth} [dropdownWidth="match"] dropdown panel width 옵션
  * @property {DropdownRootProps} [dropdownRootProps] Dropdown.Root 전달 props(제어 props 제외)
  * @property {DropdownContainerProps} [dropdownContainerProps] Dropdown.Container 전달 props(children/size 제외)
  * @property {DropdownMenuListProps} [dropdownMenuListProps] Dropdown.Menu.List 전달 props
@@ -139,9 +140,9 @@ export interface SelectDropdownConfigProps {
    */
   dropdownSize?: SelectSize;
   /**
-   * trigger width 동기화 여부
+   * dropdown panel width 옵션
    */
-  dropdownMatchTriggerWidth?: boolean;
+  dropdownWidth?: DropdownPanelWidth;
   /**
    * Dropdown.Root 전달 props(제어 props 제외)
    */
@@ -154,7 +155,7 @@ export interface SelectDropdownConfigProps {
    */
   dropdownContainerProps?: Omit<
     DropdownContainerProps,
-    "children" | "size" | "matchTriggerWidth"
+    "children" | "size" | "width"
   >;
   /**
    * Dropdown.Menu.List 전달 props