@uniai-fe/uds-primitives 0.2.0 → 0.2.2

package/dist/styles.css

@@ -11,6 +11,9 @@
   --theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
   --theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
   --theme-badge-dot-size: var(--spacing-gap-3, 8px);
+  /* layout presets */
+  --button-width: fit-content;
+  --button-flex: 0 0 auto;
   /* default button spacing (size 기반) */
   --button-default-gap-small: var(--spacing-gap-1);
   --button-default-gap-medium: var(--spacing-gap-2);
@@ -214,7 +217,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 +225,12 @@
   --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);
+  /* Layout presets */
+  --input-width: 100%;
+  --input-flex: 0 1 auto;
   /* Input sizing tokens; Button 변수 규칙과 동일한 prefix 패턴을 맞춘다. */
   --input-default-height-small: var(--theme-size-medium-1);
   --input-default-height-medium: var(--theme-size-medium-2);
@@ -260,6 +266,9 @@
   --input-surface-color: var(--color-common-100);
   --input-surface-muted-color: var(--color-neutral-99);
   --input-surface-disabled-color: var(--color-neutral-95);
+  /* layout presets */
+  --select-width: 100%;
+  --select-flex: 0 1 auto;
   --select-primary-height-small: var(--input-default-height-small);
   --select-primary-height-medium: var(--input-default-height-medium);
   --select-primary-height-large: var(--input-default-height-large);
@@ -644,7 +653,8 @@
   align-items: center;
   justify-content: center;
   gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px));
-  width: fit-content;
+  width: var(--button-width);
+  flex: var(--button-flex);
   min-width: var(--button-default-width-min-base, var(--theme-size-small-2, 24px));
   min-height: var(--button-min-height, auto);
   padding-inline: var(--button-padding-inline, var(--button-default-padding-inline-base, var(--spacing-padding-4, 16px)));
@@ -672,8 +682,24 @@
   align-items: center;
   justify-content: center;
 }
-.button.button-block {
-  width: 100%;
+.button[data-width=auto] {
+  --button-width: auto;
+  --button-flex: 0 1 auto;
+}
+.button[data-width=fill] {
+  --button-width: auto;
+  --button-flex: 1 1 0%;
+}
+.button[data-width=full], .button.button-block {
+  --button-width: 100%;
+  --button-flex: 0 0 100%;
+}
+.button[data-width=fit] {
+  --button-width: fit-content;
+  --button-flex: 0 0 auto;
+}
+.button[data-width=custom] {
+  --button-flex: 0 0 auto;
 }
 .button:not(.button-fill-solid):not(.button-fill-outlined) {
   background-color: transparent;
@@ -1545,8 +1571,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;
@@ -1603,9 +1629,30 @@ figure.chip {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-gap-3);
-  width: 100%;
+  width: var(--input-width);
+  flex: var(--input-flex);
+  min-width: 0;
+}
+.input[data-width=auto] {
+  --input-width: auto;
+  --input-flex: 0 1 auto;
+}
+.input[data-width=fill] {
+  --input-width: auto;
+  --input-flex: 1 1 0%;
 }
-.input[data-block=true], .input--block {
+.input[data-width=full], .input[data-block=true] {
+  --input-width: 100%;
+  --input-flex: 0 0 100%;
+}
+.input[data-width=fit] {
+  --input-width: fit-content;
+  --input-flex: 0 0 auto;
+}
+.input[data-width=custom] {
+  --input-flex: 0 0 auto;
+}
+.input--block {
   width: 100%;
 }
 
@@ -2079,18 +2126,63 @@ figure.chip {
   width: 100%;
 }
 
+.input-address-container {
+  width: 100%;
+}
+
+.input-address-row {
+  width: 100%;
+  display: flex;
+  gap: var(--spacing-gap-5);
+}
+
+.input-address-lower {
+  margin-top: var(--spacing-gap-5);
+}
+
+.input-address-upper {
+  align-items: center;
+}
+
+.input-address-field {
+  width: 100%;
+}
+
 /* Select tokens mapped to Input primary tokens for visual parity */
 
 
 .select {
   display: flex;
-  width: 100%;
+  width: var(--select-width);
+  flex: var(--select-flex);
   flex-direction: column;
   gap: var(--spacing-gap-2);
+  min-width: 0;
+}
+
+.select[data-width=auto] {
+  --select-width: auto;
+  --select-flex: 0 1 auto;
+}
+
+.select[data-width=fill] {
+  --select-width: auto;
+  --select-flex: 1 1 0%;
 }
 
+.select[data-width=full],
 .select-block {
-  width: 100%;
+  --select-width: 100%;
+  --select-flex: 0 0 100%;
+}
+
+.select[data-width=fit] {
+  --select-width: fit-content;
+  --select-flex: 0 0 auto;
+}
+
+.select[data-width=custom] {
+  --select-flex: 0 0 auto;
 }
 
 .select-button {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -58,7 +58,8 @@
     "@uniai-fe/util-functions": "^0.2.3",
     "react": "^19",
     "react-dom": "^19",
-    "react-hook-form": "^7"
+    "react-hook-form": "^7",
+    "react-daum-postcode": "^3"
   },
   "dependencies": {
     "@mantine/dates": "^8.3.14",
@@ -68,7 +69,8 @@
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-tabs": "^1.1.13",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.19"
+    "dayjs": "^1.11.19",
+    "react-daum-postcode": "^3.2.0"
   },
   "devDependencies": {
     "@radix-ui/react-visually-hidden": "^1.2.4",

package/src/components/button/index.tsx

@@ -5,8 +5,6 @@ import "./index.scss";
 
 import { ButtonDefault, ButtonText, ButtonRounded } from "./markup";
 
-export { ButtonDefault, ButtonText, ButtonRounded };
-
 export const Button = {
   Default: ButtonDefault,
   Text: ButtonText,

package/src/components/button/markup/Base.tsx

@@ -4,6 +4,10 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import type { ButtonProps } from "../types";
 import { SlotComponent } from "../../slot";
+import {
+  getFormFieldWidthAttr,
+  getFormFieldWidthValue,
+} from "../../form/utils/form-field";
 
 /**
  * uds-foundation 토큰 위에서 block/layout/priority/slot API를 제공하는 기본 Button 컴포넌트.
@@ -41,6 +45,7 @@ const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
       priority,
       state: stateProp = "default",
       block = false,
+      width,
       loading = false,
       className,
       type: typeProp,
@@ -65,6 +70,20 @@ const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
             "aria-disabled": isDisabled || undefined,
           };
 
+    const widthAttr =
+      width !== undefined
+        ? getFormFieldWidthAttr(width)
+        : block
+          ? "full"
+          : undefined;
+    const widthValue =
+      width !== undefined ? getFormFieldWidthValue(width) : undefined;
+    const { style, ...elementRestProps } = restProps;
+    const mergedStyle =
+      widthValue !== undefined
+        ? { ...(style ?? {}), ["--button-width" as const]: widthValue }
+        : style;
+
     return (
       <SlotComponent
         className={clsx(
@@ -83,8 +102,10 @@ const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
         ref={forwardedRef}
         aria-busy={loading || undefined}
         data-user-action={userAction}
+        data-width={widthAttr}
+        style={mergedStyle}
         {...elementSpecificProps}
-        {...restProps}
+        {...elementRestProps}
       >
         {left && (
           <span className="button-left" data-slot="left">

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

@@ -150,7 +150,8 @@ $button-priorities: (
   align-items: center;
   justify-content: center;
   gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px));
-  width: fit-content;
+  width: var(--button-width);
+  flex: var(--button-flex);
   min-width: var(
     --button-default-width-min-base,
     var(--theme-size-small-2, 24px)
@@ -216,8 +217,29 @@ $button-priorities: (
     justify-content: center;
   }
 
+  &[data-width="auto"] {
+    --button-width: auto;
+    --button-flex: 0 1 auto;
+  }
+
+  &[data-width="fill"] {
+    --button-width: auto;
+    --button-flex: 1 1 0%;
+  }
+
+  &[data-width="full"],
   &.button-block {
-    width: 100%;
+    --button-width: 100%;
+    --button-flex: 0 0 100%;
+  }
+
+  &[data-width="fit"] {
+    --button-width: fit-content;
+    --button-flex: 0 0 auto;
+  }
+
+  &[data-width="custom"] {
+    --button-flex: 0 0 auto;
   }
 
   &:not(.button-fill-solid):not(.button-fill-outlined) {

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

@@ -1,5 +1,9 @@
 /* 버튼 전용 토큰은 theme root에서 한 번만 정의하며, size 기반 규칙(--button-{type}-{property}-{size})을 따른다. */
 :root {
+  /* layout presets */
+  --button-width: fit-content;
+  --button-flex: 0 0 auto;
+
   /* default button spacing (size 기반) */
   --button-default-gap-small: var(--spacing-gap-1);
   --button-default-gap-medium: var(--spacing-gap-2);

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

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import type { FormFieldWidth } from "../../form/types";
 
 /**
  * Button; priority 옵션
@@ -91,6 +92,7 @@ type SharedElementProps = Omit<NativeButtonProps, "children"> &
  * @property {ButtonPriority} priority semantic color priority.
  * @property {ButtonState} [state] UI 상태. disabled prop과 조합된다.
  * @property {boolean} [block] width:100% 확장 여부.
+ * @property {FormFieldWidth} [width] width preset. block보다 우선 적용된다.
  * @property {boolean} [loading] true면 readonly 처리 + aria-busy.
  * @property {ReactNode} [left] 라벨 왼쪽 커스텀 슬롯.
  * @property {ReactNode} [right] 라벨 오른쪽 커스텀 슬롯.
@@ -145,6 +147,11 @@ export interface ButtonProps extends SharedElementProps {
    * true면 버튼 폭을 100%로 확장한다.
    */
   block?: boolean;
+  /**
+   * width preset.
+   * block보다 우선 적용된다.
+   */
+  width?: FormFieldWidth;
   /**
    * true면 readonly 상태로 전환하고 aria-busy를 설정한다.
    */

package/src/components/checkbox/markup/Checkbox.tsx

@@ -31,31 +31,32 @@ const getIndicatorIcon = (size: CheckboxSize) =>
  * @example
  * <Checkbox size="medium" checked />
  */
-export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
-  function Checkbox(
-    { size = "medium", className, disabled, ...restProps },
-    ref,
-  ) {
-    const IndicatorIcon = getIndicatorIcon(size);
+const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(
+  { size = "medium", className, disabled, ...restProps },
+  ref,
+) {
+  const IndicatorIcon = getIndicatorIcon(size);
 
-    return (
-      <CheckboxPrimitive.Root
-        ref={ref}
-        disabled={disabled}
-        data-size={size}
-        data-disabled={disabled ? "true" : undefined}
-        className={clsx(CHECKBOX_CLASSNAME, className)}
-        {...restProps}
-      >
-        <span className={CHECKBOX_SURFACE_CLASSNAME} aria-hidden="true">
-          <CheckboxPrimitive.Indicator className={CHECKBOX_INDICATOR_CLASSNAME}>
-            <IndicatorIcon aria-hidden />
-          </CheckboxPrimitive.Indicator>
-        </span>
-      </CheckboxPrimitive.Root>
-    );
-  },
-);
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      disabled={disabled}
+      data-size={size}
+      data-disabled={disabled ? "true" : undefined}
+      className={clsx(CHECKBOX_CLASSNAME, className)}
+      {...restProps}
+    >
+      <span className={CHECKBOX_SURFACE_CLASSNAME} aria-hidden="true">
+        <CheckboxPrimitive.Indicator className={CHECKBOX_INDICATOR_CLASSNAME}>
+          <IndicatorIcon aria-hidden />
+        </CheckboxPrimitive.Indicator>
+      </span>
+    </CheckboxPrimitive.Root>
+  );
+});
+
+// forwardRef Tooltip 유지를 위해 displayName 지정.
+Checkbox.displayName = "Checkbox";
 
 /**
  * 체크박스 필드 컴포넌트; label/helper 텍스트 래퍼
@@ -76,7 +77,7 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
  * @example
  * <CheckboxField label="약관 동의" helperText="필수" checked />
  */
-export const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(
+const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(
   function CheckboxField(
     {
       label,
@@ -146,3 +147,8 @@ export const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(
     );
   },
 );
+
+// forwardRef Tooltip 유지를 위해 displayName 지정.
+CheckboxField.displayName = "CheckboxField";
+
+export { Checkbox, CheckboxField };

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/markup/index.tsx

@@ -2,7 +2,16 @@ import { DropdownFoundation } from "./foundation";
 import DropdownTemplate from "./Template";
 
 /**
- * Dropdown namespace export
+ * Dropdown
+ * - Provider
+ * - Root
+ * - Container
+ * - Menu
+ *     - Item
+ *     - List
+ * - Panel
+ * - Trigger
+ * - Template
  */
 export const Dropdown = {
   ...DropdownFoundation,

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 모드 여부