@uniai-fe/uds-primitives 0.1.13 → 0.2.1

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

@@ -4,42 +4,39 @@
 $round-size-map: (
   small: (
     min-height: var(
-        --theme-button-round-min-height-small,
+        --button-round-height-small,
         var(--theme-size-small-2, 24px)
       ),
     padding-inline: var(
-        --theme-button-round-padding-inline-small,
+        --button-round-padding-inline-small,
         var(--spacing-padding-5, 12px)
       ),
-    radius: var(
-        --theme-button-round-radius-small,
-        var(--theme-radius-xlarge-2, 16px)
-      ),
+    radius: var(--button-round-radius-small, var(--theme-radius-xlarge-2, 16px)),
   ),
   medium: (
     min-height: var(
-        --theme-button-round-min-height-medium,
+        --button-round-height-medium,
         var(--theme-size-small-3, 32px)
       ),
     padding-inline: var(
-        --theme-button-round-padding-inline-medium,
+        --button-round-padding-inline-medium,
         var(--spacing-padding-6, 16px)
       ),
     radius: var(
-        --theme-button-round-radius-medium,
+        --button-round-radius-medium,
         var(--theme-radius-xlarge-2, 16px)
       ),
   ),
   large: (
     min-height: var(
-        --theme-button-round-min-height-large,
+        --button-round-height-large,
         var(--theme-size-medium-1, 40px)
       ),
     padding-inline: var(
-        --theme-button-round-padding-inline-large,
+        --button-round-padding-inline-large,
         var(--spacing-padding-7, 20px)
       ),
-    radius: var(--theme-button-round-radius-large, 30px),
+    radius: var(--button-round-radius-large, 30px),
   ),
 );
 
@@ -47,11 +44,11 @@ $round-size-map: (
   &:where(.button-template-round) {
     min-width: auto;
     padding-block: var(
-      --theme-button-round-padding-block,
+      --button-round-padding-block-base,
       var(--spacing-padding-2, 4px)
     );
     padding-inline: var(
-      --theme-button-round-padding-inline-medium,
+      --button-round-padding-inline-medium,
       var(--spacing-padding-6, 16px)
     );
     gap: var(--spacing-gap-2, 8px);

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

@@ -3,32 +3,26 @@
 // 텍스트 버튼 사이즈 토큰을 맵으로 정의해 가독성을 높인다
 $text-size-map: (
   small: (
-    min-height: var(
-        --theme-button-text-min-height-small,
-        var(--theme-size-small-1, 20px)
-      ),
+    min-height: var(--button-text-height-small, var(--theme-size-small-1, 20px)),
     padding-inline: var(
-        --theme-button-text-padding-inline-small,
+        --button-text-padding-inline-small,
         var(--spacing-padding-4, 8px)
       ),
   ),
   medium: (
     min-height: var(
-        --theme-button-text-min-height-medium,
+        --button-text-height-medium,
         var(--theme-size-small-2, 24px)
       ),
     padding-inline: var(
-        --theme-button-text-padding-inline-medium,
+        --button-text-padding-inline-medium,
         var(--spacing-padding-5, 12px)
       ),
   ),
   large: (
-    min-height: var(
-        --theme-button-text-min-height-large,
-        var(--theme-size-small-3, 32px)
-      ),
+    min-height: var(--button-text-height-large, var(--theme-size-small-3, 32px)),
     padding-inline: var(
-        --theme-button-text-padding-inline-large,
+        --button-text-padding-inline-large,
         var(--spacing-padding-5, 12px)
       ),
   ),
@@ -40,17 +34,17 @@ $text-size-map: (
     border-color: transparent;
     background-color: transparent;
     padding-block: var(
-      --theme-button-text-padding-block,
+      --button-text-padding-block-base,
       var(--spacing-padding-4, 8px)
     );
     padding-inline: var(
-      --theme-button-text-padding-inline-small,
+      --button-text-padding-inline-small,
       var(--spacing-padding-4, 8px)
     );
     border-width: 0;
     gap: var(--spacing-gap-1, 4px);
     border-radius: var(
-      --theme-button-text-radius,
+      --button-text-radius-base,
       var(--theme-radius-small, 4px)
     );
   }
@@ -69,38 +63,44 @@ $text-size-map: (
 
   &:where(.button-template-text.button-priority-secondary) {
     color: var(
-      --theme-button-color-primary-default,
+      --button-text-secondary-foreground,
       var(--color-primary-default)
     );
 
     &:hover:not(:disabled),
     &[data-user-action="hover"]:not(:disabled) {
       background-color: var(
-        --color-bg-alternative-cool-gray,
-        var(--color-cool-gray-95)
+        --button-text-secondary-hover-bg,
+        var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95))
       );
     }
 
     &:active:not(:disabled),
     &[data-user-action="pressed"]:not(:disabled) {
-      background-color: var(--color-secondary-strong, var(--color-blue-90));
+      background-color: var(
+        --button-text-secondary-pressed-bg,
+        var(--color-secondary-strong, var(--color-blue-90))
+      );
     }
   }
 
   &:where(.button-template-text.button-priority-tertiary) {
-    color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
+    color: var(--button-text-tertiary-foreground, var(--color-cool-gray-10));
 
     &:hover:not(:disabled),
     &[data-user-action="hover"]:not(:disabled) {
       background-color: var(
-        --color-bg-alternative-cool-gray,
-        var(--color-cool-gray-95)
+        --button-text-tertiary-hover-bg,
+        var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95))
       );
     }
 
     &:active:not(:disabled),
     &[data-user-action="pressed"]:not(:disabled) {
-      background-color: var(--color-surface-strong, var(--color-cool-gray-20));
+      background-color: var(
+        --button-text-tertiary-pressed-bg,
+        var(--color-surface-strong, var(--color-cool-gray-20))
+      );
     }
   }
 }

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

@@ -0,0 +1,145 @@
+/* 버튼 전용 토큰은 theme root에서 한 번만 정의하며, size 기반 규칙(--button-{type}-{property}-{size})을 따른다. */
+:root {
+  /* default button spacing (size 기반) */
+  --button-default-gap-small: var(--spacing-gap-1);
+  --button-default-gap-medium: var(--spacing-gap-2);
+  --button-default-gap-large: var(--spacing-gap-3);
+
+  --button-default-padding-inline-base: var(--spacing-padding-4);
+  --button-default-padding-inline-small: var(--spacing-padding-6);
+  --button-default-padding-inline-medium: var(--spacing-padding-7);
+  --button-default-padding-inline-large: var(--spacing-padding-9);
+  --button-default-padding-block-base: 0px;
+  --button-default-padding-block-small: 0px;
+  --button-default-padding-block-medium: 0px;
+  --button-default-padding-block-large: 0px;
+
+  /* default button sizing */
+  --button-default-width-min-base: var(--theme-size-small-2);
+
+  --button-default-height-small: var(--theme-size-small-3, 32px);
+  --button-default-height-medium: var(--theme-size-medium-1, 40px);
+  --button-default-height-large: var(--theme-size-medium-2, 48px);
+  --button-default-height-xlarge: var(--theme-size-medium-3, 56px);
+
+  --button-default-radius-small: var(--theme-radius-medium-3);
+  --button-default-radius-medium: var(--theme-radius-medium-3);
+  --button-default-radius-large: var(--theme-radius-large-1);
+  --button-default-radius-xlarge: var(--theme-radius-large-2);
+
+  /* text buttons */
+  --button-text-padding-block-base: var(--spacing-padding-4, 8px);
+  --button-text-padding-inline-small: var(--spacing-padding-4, 8px);
+  --button-text-padding-inline-medium: var(--spacing-padding-5, 12px);
+  --button-text-padding-inline-large: var(--spacing-padding-5, 12px);
+  --button-text-height-small: var(--theme-size-small-1, 20px);
+  --button-text-height-medium: var(--theme-size-small-2, 24px);
+  --button-text-height-large: var(--theme-size-small-3, 32px);
+  --button-text-radius-base: var(--theme-radius-small, 4px);
+
+  /* round buttons */
+  --button-round-padding-inline-small: var(--spacing-padding-5, 12px);
+  --button-round-padding-inline-medium: var(--spacing-padding-6, 16px);
+  --button-round-padding-inline-large: var(--spacing-padding-7, 20px);
+  --button-round-padding-block-base: var(--spacing-padding-2, 4px);
+  --button-round-height-small: var(--theme-size-small-2, 24px);
+  --button-round-height-medium: var(--theme-size-small-3, 32px);
+  --button-round-height-large: var(--theme-size-medium-1, 40px);
+  --button-round-radius-small: var(--theme-radius-xlarge-2, 16px);
+  --button-round-radius-medium: var(--theme-radius-xlarge-2, 16px);
+  --button-round-radius-large: 30px;
+
+  /* typography */
+  --button-default-font-body-medium-family: var(--font-body-medium-family);
+  --button-default-font-body-medium-size: var(--font-body-medium-size);
+  --button-default-font-body-medium-weight: var(--font-body-medium-weight);
+  --button-default-font-body-medium-line-height: var(
+    --font-body-medium-line-height
+  );
+  --button-default-font-body-medium-letter-spacing: var(
+    --font-body-medium-letter-spacing
+  );
+  --button-default-font-label-medium-size: var(--font-label-medium-size);
+  --button-default-font-label-medium-weight: var(--font-label-medium-weight);
+  --button-default-font-label-medium-line-height: var(
+    --font-label-medium-line-height
+  );
+  --button-default-font-label-medium-letter-spacing: var(
+    --font-label-medium-letter-spacing
+  );
+  --button-default-font-label-large-size: var(--font-label-large-size);
+  --button-default-font-label-large-weight: var(--font-label-large-weight);
+  --button-default-font-label-large-line-height: var(
+    --font-label-large-line-height
+  );
+  --button-default-font-label-large-letter-spacing: var(
+    --font-label-large-letter-spacing
+  );
+  --button-default-font-body-large-size: var(--font-body-large-size);
+  --button-default-font-body-large-weight: var(--font-body-large-weight);
+  --button-default-font-body-large-line-height: var(
+    --font-body-large-line-height
+  );
+  --button-default-font-body-large-letter-spacing: var(
+    --font-body-large-letter-spacing
+  );
+  --button-default-font-weight: 400;
+
+  /* default button colors (priority 기반) */
+  --button-default-neutral-foreground: var(--color-neutral-20);
+  --button-default-neutral-disabled-bg: var(--color-surface-standard);
+  --button-default-neutral-disabled-foreground: var(--color-label-disabled);
+
+  --button-default-primary-solid-bg: var(--color-primary-default);
+  --button-default-primary-solid-hover-bg: var(--color-blue-50);
+  --button-default-primary-solid-active-bg: var(--color-blue-45);
+  --button-default-primary-solid-foreground: var(--color-common-100);
+  --button-default-primary-outline-border: var(--color-primary-default);
+  --button-default-primary-outline-foreground: var(--color-primary-default);
+  --button-default-primary-outline-hover-bg: var(--color-primary-default);
+  --button-default-primary-outline-hover-foreground: var(--color-common-100);
+  --button-default-primary-overlay-outlined-bg: var(--color-blue-90);
+
+  --button-default-secondary-solid-bg: var(--color-blue-95, #e5eeff);
+  --button-default-secondary-solid-hover-bg: #dbe9ff;
+  --button-default-secondary-solid-active-bg: #ccdeff;
+  --button-default-secondary-solid-foreground: var(--color-primary-default);
+  --button-default-secondary-outline-border: var(--color-cool-gray-90);
+  --button-default-secondary-outline-foreground: var(--color-primary-default);
+  --button-default-secondary-outline-hover-bg: var(--color-blue-90);
+  --button-default-secondary-outline-hover-foreground: var(
+    --color-primary-heavy
+  );
+  --button-default-secondary-overlay-outlined-bg: var(--color-cool-gray-95);
+
+  --button-default-tertiary-solid-bg: var(--color-surface-neutral);
+  --button-default-tertiary-solid-hover-bg: var(--color-surface-strong);
+  --button-default-tertiary-solid-active-bg: var(--color-surface-strong);
+  --button-default-tertiary-solid-foreground: var(--color-label-neutral);
+  --button-default-tertiary-outline-border: var(--color-cool-gray-90);
+  --button-default-tertiary-outline-foreground: var(--color-cool-gray-10);
+  --button-default-tertiary-outline-hover-bg: var(--color-cool-gray-95);
+  --button-default-tertiary-outline-hover-foreground: var(--color-neutral-20);
+  --button-default-tertiary-overlay-outlined-bg: var(--color-cool-gray-95);
+  --button-default-tertiary-overlay-solid-bg: var(--color-surface-strong);
+
+  /* text button colors */
+  --button-text-secondary-foreground: var(--color-primary-default);
+  --button-text-secondary-hover-bg: var(
+    --color-bg-alternative-cool-gray,
+    var(--color-cool-gray-95)
+  );
+  --button-text-secondary-pressed-bg: var(
+    --color-secondary-strong,
+    var(--color-blue-90)
+  );
+  --button-text-tertiary-foreground: var(--color-cool-gray-10);
+  --button-text-tertiary-hover-bg: var(
+    --color-bg-alternative-cool-gray,
+    var(--color-cool-gray-95)
+  );
+  --button-text-tertiary-pressed-bg: var(
+    --color-surface-strong,
+    var(--color-cool-gray-20)
+  );
+}

package/src/components/dropdown/index.tsx

@@ -1,4 +1,4 @@
-/**
- * dropdown 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
- */
+import "./index.scss";
+
 export * from "./markup";
+export * from "./types";

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

@@ -0,0 +1,57 @@
+"use client";
+
+import type { DropdownTemplateProps } from "../types/props";
+
+import DropdownRoot from "./foundation/Root";
+import DropdownContainer from "./foundation/Container";
+import DropdownMenuItem from "./foundation/MenuItem";
+import DropdownMenuList from "./foundation/MenuList";
+import DropdownTrigger from "./foundation/Trigger";
+
+/**
+ * Dropdown reference template; trigger/panel/menu 조합을 제공한다.
+ * @component
+ * @param {DropdownTemplateProps} props Dropdown template props
+ */
+const DropdownTemplate = ({
+  trigger,
+  items,
+  selectedIds = [],
+  onSelect,
+  size = "medium",
+  width = "match",
+  rootProps,
+  containerProps,
+  menuListProps,
+}: DropdownTemplateProps) => {
+  return (
+    <DropdownRoot {...rootProps}>
+      <DropdownTrigger asChild>{trigger}</DropdownTrigger>
+      <DropdownContainer {...containerProps} size={size} width={width}>
+        <DropdownMenuList {...menuListProps}>
+          {items.map(item => (
+            <DropdownMenuItem
+              key={item.id}
+              label={item.label}
+              description={item.description}
+              disabled={item.disabled}
+              left={item.left}
+              right={item.right}
+              multiple={item.multiple}
+              isSelected={selectedIds?.includes(item.id)}
+              onSelect={event => {
+                if (item.disabled) {
+                  event.preventDefault();
+                  return;
+                }
+                onSelect?.(item);
+              }}
+            />
+          ))}
+        </DropdownMenuList>
+      </DropdownContainer>
+    </DropdownRoot>
+  );
+};
+
+export default DropdownTemplate;

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

@@ -0,0 +1,125 @@
+"use client";
+
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import clsx from "clsx";
+import { forwardRef, useEffect, useMemo, useState } from "react";
+
+import type { DropdownContainerProps } from "../../types/props";
+import { useDropdownContext } from "./Provider";
+
+/**
+ * Dropdown container; trigger width 동기화 및 portal 관리
+ * @component
+ * @param {DropdownContainerProps} props Dropdown container props
+ * @param {DropdownPanelWidth} [props.width="match"] panel width 옵션
+ * @param {DropdownSize} [props.size="medium"] option height scale
+ */
+const DropdownContainer = forwardRef<HTMLDivElement, DropdownContainerProps>(
+  (
+    {
+      children,
+      className,
+      size = "medium",
+      width = "match",
+      portalContainer,
+      align = "start",
+      side = "bottom",
+      sideOffset = 4,
+      alignOffset,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    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 (!shouldMatchTriggerWidth) {
+        return;
+      }
+
+      const node = triggerRef.current;
+      if (!node) {
+        return;
+      }
+
+      const updateWidth = () => {
+        setPanelWidth(node.getBoundingClientRect().width);
+      };
+
+      updateWidth();
+
+      if (typeof ResizeObserver === "undefined") {
+        return;
+      }
+
+      const observer = new ResizeObserver(() => updateWidth());
+      observer.observe(node);
+
+      return () => {
+        observer.disconnect();
+      };
+    }, [shouldMatchTriggerWidth, triggerRef]);
+
+    const content = (
+      <DropdownMenu.Content
+        {...rest}
+        ref={ref}
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        className={clsx("dropdown-panel", `dropdown-panel-${size}`, className)}
+        style={{
+          ...style,
+          width:
+            shouldMatchTriggerWidth && panelWidth ? panelWidth : style?.width,
+          minWidth:
+            resolvedMinWidth !== undefined ? resolvedMinWidth : style?.minWidth,
+        }}
+      >
+        {children}
+      </DropdownMenu.Content>
+    );
+
+    if (portalContainer === null) {
+      return content;
+    }
+
+    return (
+      <DropdownMenu.Portal container={portalContainer ?? undefined}>
+        {content}
+      </DropdownMenu.Portal>
+    );
+  },
+);
+
+DropdownContainer.displayName = "DropdownContainer";
+
+export default DropdownContainer;

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

@@ -0,0 +1,107 @@
+"use client";
+
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import clsx from "clsx";
+import { forwardRef } from "react";
+
+import type { DropdownMenuItemProps } from "../../types/props";
+import { Checkbox } from "../../../checkbox/markup/Checkbox";
+import type { CheckboxProps } from "../../../checkbox/types";
+
+/**
+ * Dropdown menu item; label/description/slot 구성을 처리한다.
+ * @component
+ * @param {DropdownMenuItemProps} props dropdown menu option props
+ * @param {boolean} [props.isSelected] 선택 상태
+ * @param {boolean} [props.multiple] multi select 스타일 여부
+ */
+const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
+  (
+    {
+      label,
+      description,
+      left,
+      right,
+      isSelected = false,
+      multiple = false,
+      className,
+      checkboxProps,
+      children,
+      onSelect: onSelectHandler,
+      ...rest
+    },
+    ref,
+  ) => {
+    const labelContent = label ?? children;
+    const hasDescription = Boolean(description);
+    const shouldRenderCheckbox = multiple && !left;
+
+    const renderLeft = () => {
+      if (shouldRenderCheckbox) {
+        const checkboxClassName = clsx(
+          "dropdown-menu-item-checkbox",
+          checkboxProps?.className,
+        );
+
+        const checkboxAdditionalProps: CheckboxProps = {
+          ...checkboxProps,
+          checked: isSelected,
+          onCheckedChange: checkboxProps?.onCheckedChange ?? (() => {}),
+          tabIndex: -1,
+          "aria-hidden": true,
+          className: checkboxClassName,
+        } as CheckboxProps;
+
+        return (
+          <span className="dropdown-menu-item-left" aria-hidden="true">
+            <Checkbox size="medium" {...checkboxAdditionalProps} />
+          </span>
+        );
+      }
+
+      if (left) {
+        return <span className="dropdown-menu-item-left">{left}</span>;
+      }
+
+      return null;
+    };
+
+    return (
+      <li className="dropdown-menu-item">
+        <DropdownMenu.Item
+          {...rest}
+          ref={ref}
+          className={clsx("dropdown-menu-item-trigger", className)}
+          data-state={isSelected ? "selected" : undefined}
+          data-multiple={multiple ? "true" : undefined}
+          data-has-description={hasDescription ? "true" : undefined}
+          onSelect={event => {
+            if (multiple) {
+              event.preventDefault();
+            }
+            onSelectHandler?.(event);
+          }}
+        >
+          {renderLeft()}
+          <span className="dropdown-menu-item-body">
+            {labelContent ? (
+              <span className="dropdown-menu-item-label">{labelContent}</span>
+            ) : null}
+            {description ? (
+              <span className="dropdown-menu-item-description">
+                {description}
+              </span>
+            ) : null}
+          </span>
+          {right ? (
+            <span className="dropdown-menu-item-right">{right}</span>
+          ) : null}
+        </DropdownMenu.Item>
+      </li>
+    );
+  },
+);
+
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+export default DropdownMenuItem;

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

@@ -0,0 +1,27 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef } from "react";
+
+import type { DropdownMenuListProps } from "../../types/props";
+
+/**
+ * Dropdown option list wrapper
+ * @component
+ * @param {DropdownMenuListProps} props list attributes
+ */
+const DropdownMenuList = forwardRef<HTMLUListElement, DropdownMenuListProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <ul
+        {...rest}
+        ref={ref}
+        className={clsx("dropdown-menu-list", className)}
+      />
+    );
+  },
+);
+
+DropdownMenuList.displayName = "DropdownMenuList";
+
+export default DropdownMenuList;