@uniai-fe/uds-primitives 0.12.5 → 0.12.7

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

@@ -1,18 +1,14 @@
 import type { ElementType } from "react";
 
 /**
- * Form; field container width option
- * - full: 상위 영역을 100%로 채움
- * - fit: 콘텐츠 너비에 맞춤
- * - fill: flex-grow 1 분배
- * - auto: 기본 width(auto)
- * - number: px 단위 입력, rem으로 환산
- * - string: CSS width 문자열
+ * Form Types; field container width option
+ * @desc `"full" | "fit" | "fill" | "auto" | number | string`을 허용한다. number는 px 기준 rem으로 환산하고 preset이 아닌 string은 CSS width로 사용한다.
  */
 export type FormFieldWidth = "full" | "fit" | "fill" | "auto" | number | string;
 
 /**
- * Form; field state option
+ * Form Types; field state option
+ * @desc `"default" | "error"`를 허용하며 field helper의 visual state를 지정한다.
  */
 export type FormFieldState = "default" | "error";
 
@@ -26,6 +22,7 @@ export type FormFieldState = "default" | "error";
  * @property {React.HTMLAttributes<HTMLElement>} [labelProps] label 태그 속성
  * @property {boolean} [required] 필수 표시
  * @property {React.ReactNode} [children] description 등 추가 요소
+ * @desc field label, 필수 표시와 header 추가 콘텐츠를 구성한다.
  */
 export interface FormFieldHeaderProps extends React.HTMLAttributes<HTMLElement> {
   /**
@@ -33,7 +30,7 @@ export interface FormFieldHeaderProps extends React.HTMLAttributes<HTMLElement>
    */
   className?: string;
   /**
-   * label heading 태그
+   * label heading 태그를 지정한다.
    */
   labelAs?: ElementType;
   /**
@@ -41,11 +38,11 @@ export interface FormFieldHeaderProps extends React.HTMLAttributes<HTMLElement>
    */
   labelId?: string;
   /**
-   * 기본 label 텍스트
+   * 기본 label 텍스트를 지정한다.
    */
   label?: string;
   /**
-   * 커스텀 label JSX
+   * label보다 우선하는 커스텀 label JSX를 지정한다.
    */
   labelJsx?: React.ReactNode;
   /**
@@ -66,6 +63,7 @@ export interface FormFieldHeaderProps extends React.HTMLAttributes<HTMLElement>
  * Form.Field Footer props; `Footer.tsx`에서 helper/action 영역을 담당한다.
  * @property {string} [className] footer className
  * @property {React.ReactNode} [children] footer 내용
+ * @desc field helper 또는 action을 footer 영역에 렌더링한다.
  */
 export interface FormFieldFooterProps extends React.HTMLAttributes<HTMLElement> {
   /**
@@ -81,10 +79,12 @@ export interface FormFieldFooterProps extends React.HTMLAttributes<HTMLElement>
 /**
  * Form.Field Container props; `Container.tsx`에서 wrapper와 width 옵션을 제어한다.
  * @property {string} [className] container className
- * @property {React.ElementType} [as] container 태그
- * @property {FormFieldWidth} [width] width 옵션(full/fit/fill/auto/custom)
- * @property {FormFieldState} [state] visual state
+ * @property {ElementType} [as] container 태그
+ * @property {"full" | "fit" | "fill" | "auto" | number | string} [width] width preset 또는 custom width
+ * @property {"default" | "error"} [state] visual state
  * @property {React.ReactNode} children Body에 전달될 콘텐츠
+ * @see React.HTMLAttributes<HTMLElement>
+ * @desc semantic wrapper, width와 helper visual state를 제어한다.
  */
 export interface FormFieldContainerProps extends React.HTMLAttributes<HTMLElement> {
   /**
@@ -96,11 +96,11 @@ export interface FormFieldContainerProps extends React.HTMLAttributes<HTMLElemen
    */
   as?: ElementType;
   /**
-   * width 옵션
+   * `"full" | "fit" | "fill" | "auto" | number | string` width 옵션을 지정한다.
    */
   width?: FormFieldWidth;
   /**
-   * visual state
+   * `"default" | "error"` visual state를 지정한다.
    */
   state?: FormFieldState;
   /**
@@ -115,10 +115,12 @@ export interface FormFieldContainerProps extends React.HTMLAttributes<HTMLElemen
  * @property {FormFieldHeaderProps} [headerProps] Header props
  * @property {FormFieldFooterProps} [footerProps] Footer props
  * @property {string} [className] container className
- * @property {React.ElementType} [as] container 태그
- * @property {FormFieldWidth} [width] width 옵션(full/fit/fill/auto/custom)
- * @property {FormFieldState} [state] visual state
+ * @property {ElementType} [as] container 태그
+ * @property {"full" | "fit" | "fill" | "auto" | number | string} [width] width preset 또는 custom width
+ * @property {"default" | "error"} [state] visual state
  * @property {React.ReactNode} children Body에 전달될 콘텐츠
+ * @see FormFieldContainerProps
+ * @desc Container props를 상속하고 Header, Body와 선택적 Footer를 조합한다.
  */
 export interface FormFieldTemplateProps extends FormFieldContainerProps {
   /**

package/src/components/form/utils/form-field.ts

@@ -6,8 +6,9 @@ const WIDTH_PRESETS = new Set<FormFieldWidth>(["full", "fit", "fill", "auto"]);
 /**
  * Form.Field width attr helper; preset이면 그대로 반환하고 custom이면 "custom"/기본값은 "auto".
  * @function
- * @param {FormFieldWidth} [width]
- * @returns {string}
+ * @param {"full" | "fit" | "fill" | "auto" | number | string} [width] width preset 또는 custom width
+ * @desc Form.Field width를 data-width attribute 값으로 변환한다.
+ * @return {string} preset, "custom" 또는 "auto"
  */
 export const getFormFieldWidthAttr = (width?: FormFieldWidth): string => {
   if (typeof width === "string" && WIDTH_PRESETS.has(width)) {
@@ -24,8 +25,9 @@ export const getFormFieldWidthAttr = (width?: FormFieldWidth): string => {
 /**
  * Form.Field width style helper; number/string custom 값을 CSS width 문자열로 환산한다.
  * @function
- * @param {FormFieldWidth} [width]
- * @returns {string | undefined}
+ * @param {"full" | "fit" | "fill" | "auto" | number | string} [width] width preset 또는 custom width
+ * @desc 유한한 number는 rem으로 환산하고 preset이 아닌 string은 그대로 반환한다.
+ * @return {string | undefined} custom CSS width 또는 preset/미지정일 때 undefined
  */
 export const getFormFieldWidthValue = (
   width?: FormFieldWidth,

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

@@ -102,7 +102,7 @@
 
   .button-label {
     font-size: var(--font-body-xxsmall-size);
-    line-height: 1.4;
+    line-height: 1em;
     font-weight: var(--font-body-medium-weight);
     letter-spacing: 0;
   }

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

@@ -82,7 +82,7 @@
 
   .button-label {
     font-size: var(--font-body-xxsmall-size);
-    line-height: var(--font-body-xxsmall-line-height);
+    line-height: 1em;
     letter-spacing: var(--font-body-xxsmall-letter-spacing);
     font-weight: var(--font-body-xxsmall-weight);
   }

package/src/components/slot/index.tsx

@@ -1,9 +1,6 @@
-/**
- * Slot; polymorphic/text slot 카테고리 배럴
- * @desc
- * - `Slot.Base`: as 기반 polymorphic 마크업 래퍼다.
- * - `Slot.Text`: 텍스트 children만 래핑하는 공통 슬롯이다.
- * - `SlotComponentProps`, `SlotTextProps`: public type 계약이다.
+/*
+ * Slot public entry. Runtime namespace는 ./markup, public prop type은 ./types의
+ * 원본 선언이 계약을 소유한다.
  */
 export * from "./markup";
 export type * from "./types";

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

@@ -1,23 +1,158 @@
-import { createElement, forwardRef, type ElementType } from "react";
+import clsx from "clsx";
+import {
+  Children,
+  cloneElement,
+  createElement,
+  Fragment,
+  forwardRef,
+  type ElementType,
+  type ReactElement,
+  type Ref,
+} from "react";
 import type {
   PolymorphicRef,
   SlotComponentProps,
   SlotComponentType,
+  SlotElementProps,
 } from "../types/props";
 
 /**
- * SlotComponent; as prop으로 요소를 교체할 수 있는 얇은 추상화.
+ * Ref utility; callback 또는 object ref에 현재 node를 전달한다.
+ * @function
+ * @param {React.Ref<unknown> | undefined} ref 갱신할 callback 또는 object ref.
+ * @param {unknown} node ref에 전달할 현재 node 또는 null.
+ * @desc callback ref가 반환한 React 19 cleanup을 그대로 보존하고 object ref는 current를 직접 갱신한다.
+ * @return {void | (() => void)} callback cleanup이 있으면 해당 함수, 그 외에는 void.
+ */
+const setRef = (
+  ref: Ref<unknown> | undefined,
+  node: unknown,
+): void | (() => void) => {
+  if (typeof ref === "function") return ref(node);
+  if (ref && typeof ref === "object") {
+    (ref as { current: unknown }).current = node;
+  }
+};
+
+/**
+ * Ref utility; child ref와 전달된 ref를 하나의 callback ref로 병합한다.
+ * @function
+ * @param {Array<React.Ref<unknown> | undefined>} refs 함께 갱신할 callback 또는 object ref 목록.
+ * @desc React 19 callback cleanup이 있으면 cleanup 없는 나머지 ref도 같은
+ * unmount에서 null로 해제한다.
+ * @return {React.RefCallback<unknown> | undefined} ref가 없으면 undefined, 있으면 병합된 callback ref.
+ */
+const mergeRefs = (...refs: (Ref<unknown> | undefined)[]) => {
+  if (refs.every(ref => ref == null)) return undefined;
+
+  return (node: unknown) => {
+    const cleanups = refs.map(ref => setRef(ref, node));
+
+    // React 19 callback ref 하나라도 cleanup을 반환하면 나머지 ref도 같은 unmount에서 해제한다.
+    if (!cleanups.some(cleanup => typeof cleanup === "function")) return;
+
+    return () => {
+      cleanups.forEach((cleanup, index) => {
+        if (typeof cleanup === "function") cleanup();
+        else setRef(refs[index], null);
+      });
+    };
+  };
+};
+
+/**
+ * Props utility; Slot과 child가 소유한 props를 asChild 계약에 따라 병합한다.
+ * @function
+ * @param {SlotElementProps} slotProps Slot.Base에 전달된 props.
+ * @param {SlotElementProps} childProps 단일 child element가 소유한 props.
+ * @desc
+ * - 일반 props와 같은 style property는 child가 우선하고, className은 Slot 다음
+ *   child 순서로 합친다.
+ * - 같은 event handler는 모든 인자를 child, Slot 순서로 전달하고 child 반환값을
+ *   보존한다. 첫 번째 인자의 defaultPrevented가 true일 때만 Slot handler를 생략한다.
+ * @return {SlotElementProps} child에 전달할 병합 props.
+ */
+const mergeSlotProps = (
+  slotProps: SlotElementProps,
+  childProps: SlotElementProps,
+): SlotElementProps => {
+  const mergedProps: SlotElementProps = { ...slotProps, ...childProps };
+
+  Object.keys(slotProps).forEach(key => {
+    const slotHandler = slotProps[key];
+    const childHandler = childProps[key];
+
+    if (
+      /^on[A-Z]/.test(key) &&
+      typeof slotHandler === "function" &&
+      typeof childHandler === "function"
+    ) {
+      mergedProps[key] = (...args: unknown[]) => {
+        const result = childHandler(...args);
+        const event = args[0];
+        const defaultPrevented =
+          typeof event === "object" &&
+          event !== null &&
+          "defaultPrevented" in event &&
+          event.defaultPrevented === true;
+
+        if (!defaultPrevented) slotHandler(...args);
+        return result;
+      };
+    }
+  });
+
+  mergedProps.className =
+    clsx(slotProps.className, childProps.className) || undefined;
+  if (slotProps.style || childProps.style) {
+    mergedProps.style = { ...slotProps.style, ...childProps.style };
+  }
+
+  return mergedProps;
+};
+
+/**
+ * SlotComponent; as로 요소를 교체하거나 asChild로 단일 child를 직접 렌더링하는 추상화.
  * @component
- * @param {SlotComponentProps} props
- * @param {ElementType} [props.as="div"] 교체할 요소.
- * @param {React.ReactNode} [props.children] children 그대로 전달된다.
- * @param {string} [props.className] className.
+ * @property {ElementType} [as="div"] asChild가 false일 때 교체할 요소.
+ * @property {true | false} [asChild=false] true이면 단일 child를 wrapper 없이 렌더링하고, false이면 as 요소를 렌더링한다.
+ * @property {React.ReactElement | React.ReactNode} [children] asChild가 true이면 필수인 단일 non-Fragment ReactElement, false이면 선택적인 ReactNode.
+ * @property {string} [className] 추가 className.
+ * @param {React.Ref<unknown>} [ref] 렌더링된 요소에 병합할 ref.
+ * @desc
+ * - asChild에서는 child의 일반 props를 우선하고 Slot className 다음에 child className을 합치며, 같은 style property는 child가 우선한다.
+ * - 같은 event handler는 모든 인자를 child, Slot 순서로 전달하고 child 반환값을 보존하며, 첫 번째 인자의 defaultPrevented가 true일 때만 Slot handler를 생략한다.
+ * - child ref와 전달된 ref를 합치며 React 19 callback cleanup이 있으면 cleanup 없는 나머지 ref는 null로 해제한다.
+ * - asChild의 child가 단일 non-Fragment ReactElement가 아니면 예외를 던진다.
+ * @return {React.ReactNode} 렌더링된 노드.
  */
 const SlotComponent = forwardRef(
   (
-    { as, children, className, ...rest }: SlotComponentProps<ElementType>,
+    {
+      as,
+      asChild,
+      children,
+      className,
+      ...rest
+    }: SlotComponentProps<ElementType>,
     ref?: PolymorphicRef<ElementType>,
   ) => {
+    if (asChild) {
+      const child = Children.only(children) as ReactElement<SlotElementProps>;
+
+      if (child.type === Fragment) {
+        throw new TypeError(
+          "Slot.Base asChild requires one non-Fragment React element.",
+        );
+      }
+
+      const childProps = child.props as SlotElementProps;
+      return cloneElement(child, {
+        ...mergeSlotProps({ ...rest, className }, childProps),
+        ref: mergeRefs(childProps.ref, ref as Ref<unknown>),
+      });
+    }
+
     const Component = (as ?? "div") as ElementType;
     return createElement(
       Component,
@@ -29,6 +164,8 @@ const SlotComponent = forwardRef(
       children,
     );
   },
-) as unknown as SlotComponentType;
+);
+
+SlotComponent.displayName = "SlotBase";
 
-export default SlotComponent;
+export default SlotComponent as unknown as SlotComponentType;

package/src/components/slot/markup/index.tsx

@@ -2,10 +2,8 @@ import SlotBase from "./Base";
 import SlotText from "./Text";
 
 /**
- * Slot; polymorphic/text slot namespace
- * @desc
- * - `Slot.Base`: as 기반 polymorphic 마크업 래퍼다.
- * - `Slot.Text`: 텍스트 children만 래핑하는 공통 슬롯이다.
+ * Slot; public markup namespace
+ * @desc Slot markup component의 public entry다.
  */
 export const Slot = {
   Base: SlotBase,

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

@@ -1,25 +1,29 @@
 import type {
+  CSSProperties,
   ComponentPropsWithRef,
   ComponentPropsWithoutRef,
   ElementType,
+  HTMLAttributes,
+  ReactElement,
   ReactNode,
+  Ref,
 } from "react";
 
 /**
- * SlotComponentRestProps; as/children/className을 제외한 원본 요소 props.
+ * SlotComponentRestProps; as/asChild/children/className을 제외한 원본 요소 props.
  * @typedef SlotComponentRestProps
  * @template C
  * @desc
  * - HTML/React 공통 속성과 data-* 커스텀 속성을 그대로 포함한다.
- * - SlotComponent 내부에서 as/children/className을 재정의하기 위해 제외한다.
+ * - SlotComponent 내부에서 as/asChild/children/className을 재정의하기 위해 제외한다.
  */
 export type SlotComponentRestProps<C extends ElementType> = Omit<
   ComponentPropsWithoutRef<C>,
-  "as" | "children" | "className"
+  "as" | "asChild" | "children" | "className"
 >;
 
 /**
- * PolymorphicRef; 전달된 as 요소의 ref 타입.
+ * PolymorphicRef; as로 렌더링된 요소의 ref 타입.
  * @typedef PolymorphicRef
  * @template C
  */
@@ -27,40 +31,132 @@ export type PolymorphicRef<C extends ElementType> =
   ComponentPropsWithRef<C>["ref"];
 
 /**
- * SlotComponentProps; as 기반 슬롯 래퍼 공통 props.
- * @typedef SlotComponentProps
+ * SlotElementProps; asChild 병합에 사용하는 element props
+ * @property {string} [className] 병합할 className.
+ * @property {React.Ref<unknown>} [ref] 병합할 callback 또는 object ref.
+ * @property {React.CSSProperties} [style] 병합할 inline style.
+ * @desc Slot과 child의 임의 props를 보존하면서 className, ref와 style 병합 계약을 명시한다.
+ */
+export type SlotElementProps = Record<string, unknown> & {
+  /**
+   * 병합할 className.
+   */
+  className?: string;
+  /**
+   * 병합할 callback 또는 object ref.
+   */
+  ref?: Ref<unknown>;
+  /**
+   * 병합할 inline style.
+   */
+  style?: CSSProperties;
+};
+
+/**
+ * SlotAsChildProps; 단일 child를 wrapper 없이 렌더링하는 Slot props
+ * @property {true} asChild wrapper 제거를 활성화하는 discriminator.
+ * @property {never} [as] asChild variant에서 허용하지 않는 렌더 요소 override.
+ * @property {React.ReactElement} children props와 ref를 병합할 단일 non-Fragment ReactElement.
+ * @property {string} [className] Slot className 다음에 child className을 합칠 값.
+ * @desc React.HTMLAttributes<HTMLElement>를 Slot-side 공통 속성으로 제공하고 element 전용 속성은 child가 소유한다.
+ */
+export type SlotAsChildProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  "children" | "className"
+> & {
+  /**
+   * literal true이면 단일 ReactElement를 wrapper 없이 렌더링한다.
+   */
+  asChild: true;
+  /**
+   * asChild가 true이면 as를 함께 사용할 수 없다.
+   */
+  as?: never;
+  /**
+   * props를 병합할 단일 non-Fragment ReactElement. 그 외 입력은 runtime에서 예외를 던진다.
+   */
+  children: ReactElement;
+  /**
+   * Slot className 다음에 child className을 합친다.
+   */
+  className?: string;
+};
+
+/**
+ * SlotAsElementProps; as 요소를 렌더링하는 Slot props
  * @template C
- * @property {ElementType} [as] 렌더링할 요소. 기본값은 div.
- * @property {React.ReactNode} [children] 그대로 전달되는 children.
- * @property {string} [className] 추가 className.
- * @desc
- * - ComponentPropsWithoutRef<C>를 확장하므로 React/HTML 공통 속성과 사용자 정의 data 속성 모두 전달된다.
- * - as/children/className은 Slot에서 직접 제어하기 위해 재정의한다.
+ * @property {false} [asChild] as 기반 렌더링을 유지하는 discriminator.
+ * @property {C} [as="div"] 렌더링할 요소.
+ * @property {React.ReactNode} [children] 렌더링할 children.
+ * @property {string} [className] 렌더링한 요소에 전달할 className.
+ * @desc SlotComponentRestProps<C>를 확장해 as 요소의 native props를 보존한다.
  */
-export type SlotComponentProps<C extends ElementType> =
+export type SlotAsElementProps<C extends ElementType> =
   SlotComponentRestProps<C> & {
     /**
-     * 교체할 요소. 기본은 'div'.
+     * literal false 또는 생략이면 as 요소를 렌더링한다.
+     */
+    asChild?: false;
+    /**
+     * 교체할 요소. 기본은 div.
      */
     as?: C;
     /**
-     * 전달할 children.
+     * 전달할 ReactNode.
      */
     children?: ReactNode;
     /**
-     * 추가 className.
+     * 렌더링한 요소에 전달할 className.
      */
     className?: string;
   };
 
+/**
+ * SlotComponentProps; as 또는 asChild 기반 슬롯 렌더링 props.
+ * @typedef SlotComponentProps
+ * @template C
+ * @property {ElementType} [as] asChild가 false일 때 렌더링할 요소. 기본값은 div이며 true variant에서는 허용하지 않는다.
+ * @property {true | false} [asChild] true이면 단일 ReactElement를 wrapper 없이 렌더링하고, false 또는 생략이면 as 요소를 렌더링한다.
+ * @property {React.ReactElement | React.ReactNode} [children] asChild가 true이면 필수인 단일 non-Fragment ReactElement, false 또는 생략이면 선택적인 ReactNode.
+ * @property {string} [className] 두 variant의 공통 className. asChild에서는 Slot className 다음에 child className을 합친다.
+ * @desc
+ * - asChild가 true이면 Slot-side props는 React.HTMLAttributes<HTMLElement>로 제한하고, anchor/button 같은 element 전용 props는 child에 둔다.
+ * - asChild가 false이면 ComponentPropsWithoutRef<C>를 확장하므로 as 요소의 React/HTML 속성을 전달한다.
+ * - as/asChild/children/className은 Slot에서 직접 제어하기 위해 재정의한다.
+ * - asChild와 as는 함께 사용할 수 없다.
+ * - asChild의 일반 props와 같은 style property는 child가 우선한다.
+ * - 같은 event handler는 모든 인자를 child, Slot 순서로 전달하고 child 반환값을 보존하며, 첫 번째 인자의 defaultPrevented가 true일 때만 Slot handler를 생략한다.
+ * - child ref와 전달된 ref를 합치며 React 19 callback cleanup이 있으면 cleanup 없는 나머지 ref는 null로 해제한다.
+ */
+export type SlotComponentProps<C extends ElementType> =
+  SlotAsChildProps | SlotAsElementProps<C>;
+
 /**
  * SlotComponentType; SlotComponent의 forwardRef 타입 시그니처.
  * @typedef SlotComponentType
- * @template C
- * @param {SlotComponentProps<C>} props 공통 슬롯 props.
- * @param {PolymorphicRef<C>} [props.ref] 전달될 ref.
- * @returns {React.ReactNode} 렌더링된 노드.
+ * @desc asChild와 as variant의 public callable contract를 각각 제공한다.
  */
-export type SlotComponentType = <C extends ElementType = "div">(
-  props: SlotComponentProps<C> & { ref?: PolymorphicRef<C> },
-) => ReactNode;
+export type SlotComponentType = {
+  /**
+   * SlotComponentType; asChild로 단일 HTML child를 렌더링하는 signature.
+   * @property {true} asChild wrapper 제거를 활성화한다.
+   * @property {React.ReactElement} children props와 ref를 병합할 단일 non-Fragment ReactElement.
+   * @property {React.Ref<HTMLElement>} [ref] 실제 HTML element까지 전달할 ref.
+   * @desc Slot-side props는 표준 HTMLAttributes로 제한하고 element 전용 props는 child가 소유한다.
+   * @return {React.ReactNode} 병합된 단일 child.
+   */
+  (props: SlotAsChildProps & { ref?: Ref<HTMLElement> }): ReactNode;
+  /**
+   * SlotComponentType; as로 렌더링 요소를 교체하는 signature.
+   * @template C
+   * @property {C} [as="div"] 렌더링할 요소.
+   * @property {false} [asChild=false] as 기반 렌더링을 유지한다.
+   * @property {React.ReactNode} [children] 렌더링할 children.
+   * @property {PolymorphicRef<C>} [ref] as 요소에 전달할 ref.
+   * @desc as 요소의 ComponentPropsWithoutRef<C>와 ref type을 보존한다.
+   * @return {React.ReactNode} as 요소로 렌더링된 노드.
+   */
+  <C extends ElementType = "div">(
+    props: SlotAsElementProps<C> & { ref?: PolymorphicRef<C> },
+  ): ReactNode;
+};

package/src/components/table/types/foundation.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithoutRef, ElementType } from "react";
-import type { SlotComponentProps, SlotTextProps } from "../../slot";
+import type { SlotComponentRestProps, SlotTextProps } from "../../slot";
 
 export const TABLE_CELL_ALIGN_OPTIONS = ["left", "center", "right"] as const;
 export const TABLE_CELL_ALIGN_Y_OPTIONS = ["top", "center", "bottom"] as const;
@@ -155,7 +155,7 @@ export interface TableColumnData<
  * @property {boolean} [scrollable=false] true면 외부 스크롤 래퍼를 추가한다.
  * @property {"x" | "y" | "both"} [scrollAxis="x"] scrollable일 때 스크롤 축
  * @property {ElementType} [scrollAs="div"] scrollable wrapper element
- * @property {Omit<SlotComponentProps<ElementType>, "as" | "children" | "className">} [scrollProps] scrollable wrapper native props
+ * @property {SlotComponentRestProps<ElementType> & { asChild?: never }} [scrollProps] asChild를 허용하지 않아 wrapper element를 보존하는 scrollable wrapper native props
  * @property {string} [scrollClassName] 스크롤 래퍼 className
  * @property {React.ReactNode} [footer] footer 노드
  * @property {React.ReactNode} [children] body 콘텐츠
@@ -184,12 +184,14 @@ export interface TableContainerProps<
    */
   scrollAs?: ElementType;
   /**
-   * scrollable wrapper native props
+   * asChild를 허용하지 않아 wrapper element를 보존하는 scrollable wrapper native props
    */
-  scrollProps?: Omit<
-    SlotComponentProps<ElementType>,
-    "as" | "children" | "className"
-  >;
+  scrollProps?: SlotComponentRestProps<ElementType> & {
+    /**
+     * Table scroll wrapper에서는 wrapper 제거를 허용하지 않는다.
+     */
+    asChild?: never;
+  };
   /**
    * 스크롤 래퍼 className
    */

package/src/index.scss

@@ -15,10 +15,8 @@
 @use "./components/pagination";
 @use "./components/pop-over";
 @use "./components/radio";
-@use "./components/scrollbar";
 @use "./components/segmented-control";
 @use "./components/select";
-@use "./components/spinner";
 @use "./components/switch";
 @use "./components/tab";
 @use "./components/table";

package/src/index.tsx

@@ -20,15 +20,21 @@ export * from "./components/navigation";
 export * from "./components/pagination";
 export * from "./components/pop-over";
 export * from "./components/radio";
-export * from "./components/scrollbar";
 export * from "./components/segmented-control";
 export * from "./components/select";
 export * from "./components/slot";
-export * from "./components/spinner";
 export * from "./components/switch";
 export * from "./components/tab";
 export * from "./components/table";
 export * from "./components/time-picker";
 export * from "./components/toast";
 export * from "./components/tooltip";
+export {
+  isSameSelectedValue,
+  isSameSelectedValueList,
+  normalizeSelectedValuesByMode,
+  normalizeSingleSelectedValue,
+  toSelectedValueKey,
+} from "./utils";
 export type * from "./types";
+export type { SelectedValue } from "./utils";

package/src/types/index.ts

@@ -1,4 +1 @@
-/**
- * shared types placeholder: variant/slot 타입을 정의하고 각 카테고리에서 import한다.
- */
-export * from "./form-field";
+export type * from "./form-field";

package/src/utils/index.ts

@@ -1,4 +1,8 @@
-/**
- * shared utils placeholder: 토큰 매핑 및 className 헬퍼를 정의한다.
- */
-export * from "./selected-values";
+export {
+  isSameSelectedValue,
+  isSameSelectedValueList,
+  normalizeSelectedValuesByMode,
+  normalizeSingleSelectedValue,
+  toSelectedValueKey,
+} from "./selected-values";
+export type { SelectedValue } from "./selected-values";