@uniai-fe/uds-primitives 0.2.8 → 0.2.10

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

@@ -6,13 +6,16 @@ import RemoveIcon from "../../img/remove.svg";
 import type { SelectMultipleChipProps } from "../../types/multiple";
 
 /**
- * Select multi chip; 선택된 값을 chip 형태로 표시하고 필요 시 제거 버튼을 노출한다.
+ * Select Markup; Multiple 선택값 Chip 렌더링 컴포넌트
  * @component
  * @param {SelectMultipleChipProps} props chip props
  * @param {React.ReactNode} props.label chip 라벨
  * @param {React.ReactNode} [props.suffix] 라벨 뒤에 붙는 서브 라벨
- * @param {boolean} [props.removable] remove 버튼 노출 여부
+ * @param {boolean} [props.removable=true] remove 버튼 노출 여부
  * @param {() => void} [props.onRemove] remove 클릭 핸들러
+ * @param {"value" | "summary"} [props.kind="value"] chip 용도 구분
+ * @example
+ * <SelectMultipleSelectedChip label="Apple" removable onRemove={() => {}} />
  */
 export function SelectMultipleSelectedChip({
   label,

package/src/components/select/styles/select.scss

@@ -109,6 +109,14 @@
     }
   }
 
+  &[data-priority="table"] {
+    // 변경: table priority는 input table과 동일하게 기본 border/background를 최소화한다.
+    border-radius: var(--select-table-radius);
+    border-color: var(--select-table-border-default-color);
+    background-color: var(--select-table-surface-color);
+    --select-icon-fill: var(--select-table-icon-color-default);
+  }
+
   &:not([data-priority="secondary"])[data-state="focused"],
   &:not([data-priority="secondary"])[data-open="true"],
   &:not([data-priority="secondary"]):focus-visible {
@@ -117,6 +125,14 @@
     --select-icon-fill: var(--select-icon-color-focused);
   }
 
+  &[data-priority="table"][data-state="focused"],
+  &[data-priority="table"][data-open="true"],
+  &[data-priority="table"]:focus-visible {
+    border-color: var(--select-table-border-focus-color);
+    border-width: var(--select-primary-border-width-focus);
+    --select-icon-fill: var(--select-table-icon-color-focused);
+  }
+
   // &:not([data-priority="secondary"]):hover:not(:disabled) {
   // }
 
@@ -138,6 +154,14 @@
       height: var(--select-secondary-underline-width-default);
     }
   }
+
+  &[data-priority="table"][data-state="disabled"],
+  &[data-priority="table"]:disabled {
+    border-color: var(--select-table-border-disabled-color);
+    background-color: var(--select-table-surface-disabled-color);
+    cursor: not-allowed;
+    --select-icon-fill: var(--select-table-icon-color-disabled);
+  }
 }
 
 .select-value {
@@ -165,6 +189,10 @@
     color: var(--select-secondary-color-text);
   }
 
+  .select-button[data-priority="table"] & {
+    color: var(--select-table-color-text);
+  }
+
   .select-button[data-state="focused"] &,
   .select-button[data-open="true"] & {
     color: var(--select-primary-color-text-focused);
@@ -185,6 +213,10 @@
   .select-button[data-priority="secondary"] & {
     color: var(--select-secondary-color-placeholder);
   }
+
+  .select-button[data-priority="table"] & {
+    color: var(--select-table-color-placeholder);
+  }
 }
 
 .select-button[data-size="small"] .select-label {
@@ -194,6 +226,12 @@
   font-weight: var(--select-text-small-weight);
 }
 
+.select-button[data-priority="table"][data-size="small"] .select-label {
+  font-size: var(--select-table-text-small-size);
+  line-height: var(--select-table-text-small-line-height);
+  font-weight: var(--select-table-text-small-weight);
+}
+
 .select-button[data-size="large"] .select-label {
   font-size: var(--select-text-large-size);
   line-height: var(--select-text-large-line-height);
@@ -201,6 +239,18 @@
   font-weight: var(--select-text-large-weight);
 }
 
+.select-button[data-priority="table"][data-size="medium"] .select-label {
+  font-size: var(--select-table-text-medium-size);
+  line-height: var(--select-table-text-medium-line-height);
+  font-weight: var(--select-table-text-medium-weight);
+}
+
+.select-button[data-priority="table"][data-size="large"] .select-label {
+  font-size: var(--select-table-text-large-size);
+  line-height: var(--select-table-text-large-line-height);
+  font-weight: var(--select-table-text-large-weight);
+}
+
 .select-button[data-priority="secondary"][data-size="large"] .select-label {
   font-weight: 600;
 }

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

@@ -24,6 +24,32 @@
   --select-secondary-gap: var(--spacing-gap-2);
   --select-secondary-underline-width-default: 1px;
   --select-secondary-underline-width-focus: 1.4px;
+  --select-table-radius: var(--input-table-radius-base);
+  --select-table-border-default-color: var(--input-border-table-default-color);
+  --select-table-border-focus-color: var(--input-border-active-color);
+  --select-table-border-disabled-color: var(--input-border-disabled-color);
+  --select-table-surface-color: transparent;
+  --select-table-surface-disabled-color: var(--input-surface-disabled-color);
+  --select-table-color-text: var(--input-text-color);
+  --select-table-color-placeholder: var(--input-placeholder-color);
+  --select-table-icon-color-default: var(--select-icon-color-default);
+  --select-table-icon-color-focused: var(--select-icon-color-focused);
+  --select-table-icon-color-disabled: var(--select-icon-color-disabled);
+  --select-table-text-small-size: var(--input-table-text-small-size);
+  --select-table-text-small-line-height: var(
+    --input-table-text-small-line-height
+  );
+  --select-table-text-small-weight: var(--input-table-text-small-weight);
+  --select-table-text-medium-size: var(--input-table-text-medium-size);
+  --select-table-text-medium-line-height: var(
+    --input-table-text-medium-line-height
+  );
+  --select-table-text-medium-weight: var(--input-table-text-medium-weight);
+  --select-table-text-large-size: var(--input-table-text-large-size);
+  --select-table-text-large-line-height: var(
+    --input-table-text-large-line-height
+  );
+  --select-table-text-large-weight: var(--input-table-text-large-weight);
   --select-text-small-size: 15px;
   --select-text-small-line-height: 1.4;
   --select-text-small-letter-spacing: 0.2px;

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

@@ -1,10 +1,11 @@
 /**
  * Select priority scale
- * @typedef {"primary" | "secondary"} SelectPriority
+ * @typedef {"primary" | "secondary" | "table"} SelectPriority
  * - primary: input primary 스타일과 동일한 기본 형태
  * - secondary: borderless + underline 스타일
+ * - table: input table과 동일한 셀 임베드 스타일
  */
-export type SelectPriority = "primary" | "secondary";
+export type SelectPriority = "primary" | "secondary" | "table";
 
 /**
  * Select size scale

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

@@ -14,19 +14,20 @@ export type SelectIconSizeMap = Record<SelectSize, ElementType>;
  * Select 아이콘 priority 맵
  * @property {SelectIconSizeMap} primary primary priority용 아이콘 컬렉션
  * @property {SelectIconSizeMap} secondary secondary priority용 아이콘 컬렉션
+ * @property {SelectIconSizeMap} table table priority용 아이콘 컬렉션
  */
 export type SelectIconPriorityMap = Record<SelectPriority, SelectIconSizeMap>;
 
 /**
  * Select multi remove priority 맵
  * @property {SelectIconSizeMap} primary primary priority remove 아이콘
+ * @property {SelectIconSizeMap} secondary secondary priority remove 아이콘
+ * @property {SelectIconSizeMap} table table priority remove 아이콘
  */
-export interface SelectIconRemovePriorityMap {
-  /**
-   * primary priority remove 아이콘
-   */
-  primary: SelectIconSizeMap;
-}
+export type SelectIconRemovePriorityMap = Record<
+  SelectPriority,
+  SelectIconSizeMap
+>;
 
 /**
  * Select 아이콘 전체 컬렉션

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

@@ -1,5 +1,6 @@
 export type * from "./base";
 export type * from "./icon";
+export type * from "./interaction";
 export type * from "./props";
 export type * from "./trigger";
 export type * from "./multiple";

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

@@ -0,0 +1,30 @@
+import type { SelectDropdownBehaviorProps } from "./props";
+
+/**
+ * Select Hook Types; Dropdown open state hook 입력 파라미터
+ * @property {boolean} [open] 외부 제어형 open 상태
+ * @property {boolean} [defaultOpen] 비제어형 초기 open 상태
+ * @property {(open: boolean) => void} [onOpenChange] open 상태 변경 콜백
+ */
+export interface UseSelectDropdownOpenStateParams extends SelectDropdownBehaviorProps {}
+
+/**
+ * Select Hook Types; Dropdown open state hook 반환값
+ * @property {boolean} open 최종 open 상태
+ * @property {(nextOpen: boolean) => void} setOpen open 상태 업데이트 함수
+ * @property {boolean} isControlled open prop 기반 제어형 여부
+ */
+export interface UseSelectDropdownOpenStateReturn {
+  /**
+   * 최종 open 상태
+   */
+  open: boolean;
+  /**
+   * open 상태 업데이트 함수
+   */
+  setOpen: (nextOpen: boolean) => void;
+  /**
+   * open prop 기반 제어형 여부
+   */
+  isControlled: boolean;
+}

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

@@ -24,6 +24,7 @@ import type {
 export interface SelectStyleOptions {
   /**
    * priority scale
+   * - table 우선순위는 width 미지정 시 기본 block(full)로 동작한다.
    */
   priority?: SelectPriority;
   /**
@@ -142,6 +143,7 @@ export type SelectProps = SelectStyleOptions &
  * @property {DropdownMenuProps} [dropdownRootProps] Dropdown.Root 전달 props(제어 props 제외)
  * @property {DropdownContainerProps} [dropdownContainerProps] Dropdown.Container 전달 props(children/size 제외)
  * @property {DropdownMenuListProps} [dropdownMenuListProps] Dropdown.Menu.List 전달 props
+ * @property {ReactNode} [alt] option이 비어 있을 때 렌더링할 alternate 콘텐츠
  */
 export interface SelectDropdownConfigProps {
   /**
@@ -183,6 +185,10 @@ export interface SelectDropdownConfigProps {
    * Dropdown.Menu.List 전달 props
    */
   dropdownMenuListProps?: DropdownMenuListProps;
+  /**
+   * option이 비어 있을 때 렌더링할 alternate 콘텐츠
+   */
+  alt?: ReactNode;
 }
 
 /**
@@ -227,6 +233,7 @@ export interface SelectDropdownBehaviorProps {
  * @property {Omit<DropdownMenuProps, "open" | "defaultOpen" | "onOpenChange">} [dropdownRootProps] Dropdown.Root 전달 props
  * @property {Omit<DropdownContainerProps, "children" | "size" | "width">} [dropdownContainerProps] Dropdown.Container 전달 props
  * @property {DropdownMenuListProps} [dropdownMenuListProps] Dropdown.Menu.List 전달 props
+ * @property {ReactNode} [alt] option이 비어 있을 때 렌더링할 alternate 콘텐츠
  * @property {boolean} [open] dropdown open 상태
  * @property {boolean} [defaultOpen] uncontrolled 초기 open 상태
  * @property {(open: boolean) => void} [onOpenChange] open state change 콜백
@@ -257,6 +264,7 @@ export type SelectDefaultComponentProps = SelectTriggerDefaultProps &
  * @property {Omit<DropdownMenuProps, "open" | "defaultOpen" | "onOpenChange">} [dropdownRootProps] Dropdown.Root 전달 props
  * @property {Omit<DropdownContainerProps, "children" | "size" | "width">} [dropdownContainerProps] Dropdown.Container 전달 props
  * @property {DropdownMenuListProps} [dropdownMenuListProps] Dropdown.Menu.List 전달 props
+ * @property {ReactNode} [alt] option이 비어 있을 때 렌더링할 alternate 콘텐츠
  * @property {boolean} [open] dropdown open 상태
  * @property {boolean} [defaultOpen] uncontrolled 초기 open 상태
  * @property {(open: boolean) => void} [onOpenChange] open state change 콜백

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

@@ -26,6 +26,7 @@ export interface SelectTriggerBaseProps extends HTMLAttributes<HTMLElement> {
    * priority scale
    * - primary
    * - secondary
+   * - table
    */
   priority?: SelectPriority;
   /**
@@ -90,6 +91,7 @@ export interface SelectTriggerDefaultProps extends HTMLAttributes<HTMLElement> {
    * priority scale
    * - primary
    * - secondary
+   * - table
    */
   priority?: SelectPriority;
   /**
@@ -144,6 +146,8 @@ export interface SelectTriggerMultipleProps extends HTMLAttributes<HTMLElement>
   /**
    * priority scale
    * - primary
+   * - secondary
+   * - table
    */
   priority?: SelectPriority;
   /**

package/src/components/table/hooks/index.ts

@@ -1,4 +1 @@
-/**
- * TODO(table): 접근성/상태 계산 hook을 정의한다.
- */
 export {};

package/src/components/table/index.tsx

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

package/src/components/table/markup/Container.tsx

@@ -0,0 +1,126 @@
+import { forwardRef } from "react";
+import type { TableTemplateColumn, TableTemplateProps } from "../types";
+import TableBody from "./foundation/Body";
+import TableCell from "./foundation/Cell";
+import TableHead from "./foundation/Head";
+import TableTh from "./foundation/Th";
+import TableRoot from "./foundation/Root";
+import TableRow from "./foundation/Row";
+
+const resolveHeadContent = (column: TableTemplateColumn): React.ReactNode => {
+  if (typeof column.cellContents !== "undefined") {
+    return column.cellContents;
+  }
+
+  if (typeof column.cellChildren !== "undefined") {
+    return column.cellChildren;
+  }
+
+  if (typeof column.headContent !== "undefined") {
+    return column.headContent;
+  }
+
+  if (typeof column.dataName !== "undefined") {
+    return column.dataName;
+  }
+
+  return column.dataKey;
+};
+
+/**
+ * Table Preset; 기본 Container 조합 컴포넌트
+ * @component
+ * @param {TableTemplateProps} props
+ * @param {TableTemplateColumn[]} [props.columns] colgroup/head 자동 렌더링 column 목록
+ * @param {boolean} [props.isCustomBody=false] true면 body wrapper 없이 children 직접 렌더링
+ * @param {"legacy-rem" | "raw"} [props.widthMode="legacy-rem"] number width 해석 방식
+ * @param {React.ReactNode} [props.footer] footer 노드. `<Table.Foot />`를 직접 전달하는 방식을 권장
+ * @param {React.ReactNode} [props.children] table body 콘텐츠
+ * @example
+ * <Table.Container
+ *   columns={columns}
+ *   footer={
+ *     <Table.Foot>
+ *       <Table.Row>
+ *         <Table.Td colSpan={4}>
+ *           <Table.Cell>합계</Table.Cell>
+ *         </Table.Td>
+ *       </Table.Row>
+ *     </Table.Foot>
+ *   }
+ * >
+ *   {rows}
+ * </Table.Container>
+ */
+const TableContainer = forwardRef<HTMLTableElement, TableTemplateProps>(
+  (
+    {
+      columns,
+      isCustomBody = false,
+      widthMode = "legacy-rem",
+      footer,
+      children,
+      ...tableProps
+    },
+    ref,
+  ) => {
+    const hasColumns = Array.isArray(columns) && columns.length > 0;
+
+    return (
+      <TableRoot {...tableProps} ref={ref}>
+        {hasColumns && (
+          <colgroup>
+            {columns.map(({ key, width, dataKey, className, span }) => {
+              const normalizedWidth =
+                typeof width === "number"
+                  ? widthMode === "legacy-rem"
+                    ? `${width / 10}rem`
+                    : width
+                  : width;
+
+              return (
+                <col
+                  key={`${key}/colgroup`}
+                  className={className}
+                  data-key={dataKey}
+                  span={span}
+                  style={
+                    normalizedWidth
+                      ? {
+                          width: normalizedWidth,
+                        }
+                      : undefined
+                  }
+                  width={typeof width === "number" ? width : undefined}
+                />
+              );
+            })}
+          </colgroup>
+        )}
+
+        {hasColumns && (
+          <TableHead>
+            <TableRow>
+              {columns.map(column => (
+                <TableTh key={`${column.key}/head`} data-key={column.dataKey}>
+                  {/* 변경: 헤더 셀 여백/정렬도 Cell 레이어에서 일관 제어한다. */}
+                  <TableCell section="head" alignX={column.align}>
+                    {resolveHeadContent(column)}
+                  </TableCell>
+                </TableTh>
+              ))}
+            </TableRow>
+          </TableHead>
+        )}
+
+        {isCustomBody ? children : <TableBody>{children}</TableBody>}
+
+        {footer}
+      </TableRoot>
+    );
+  },
+);
+
+TableContainer.displayName = "Table.Container";
+
+export default TableContainer;

package/src/components/table/markup/foundation/Body.tsx

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableBodyProps } from "../../types";
+
+/**
+ * Table Foundation; Tbody 마크업 컴포넌트
+ * @component
+ * @param {TableBodyProps} props
+ * @param {string} [props.className] tbody className
+ * @param {React.ReactNode} [props.children] tbody 내부 콘텐츠
+ */
+const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
+  ({ className, children, ...bodyProps }, ref) => {
+    return (
+      <tbody {...bodyProps} ref={ref} className={clsx("table-body", className)}>
+        {children}
+      </tbody>
+    );
+  },
+);
+
+TableBody.displayName = "TableFoundation.Body";
+
+export default TableBody;

package/src/components/table/markup/foundation/Cell.tsx

@@ -0,0 +1,72 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableCellContentProps } from "../../types";
+
+/**
+ * Table Foundation; Cell 콘텐츠 래퍼 컴포넌트
+ * @component
+ * @param {TableCellContentProps} props
+ * @param {"left" | "center" | "right"} [props.alignX] cell 콘텐츠 가로 정렬
+ * @param {"top" | "center" | "bottom"} [props.alignY] cell 콘텐츠 세로 정렬
+ * @param {boolean} [props.noPadding=false] true면 cell 내부 padding 제거
+ * @param {"default" | "none"} [props.padding="default"] cell 내부 padding 제어
+ * @param {"left" | "center" | "right"} [props.align] cell 콘텐츠 가로 정렬(호환 alias)
+ * @param {string} [props.className] cell content className
+ * @param {React.ReactNode} [props.children] 셀 내부 콘텐츠
+ */
+const TableCell = forwardRef<HTMLDivElement, TableCellContentProps>(
+  (
+    {
+      className,
+      children,
+      section,
+      alignX,
+      alignY,
+      noPadding = false,
+      padding = "default",
+      align,
+      ...cellProps
+    },
+    ref,
+  ) => {
+    const resolvedAlignX = alignX ?? align ?? "left";
+    const resolvedAlignY = alignY ?? "center";
+    // 변경: noPadding boolean이 주어지면 padding 옵션보다 우선해 none으로 고정한다.
+    const resolvedPadding = noPadding ? "none" : padding;
+
+    return (
+      <div
+        {...cellProps}
+        ref={ref}
+        data-align-x={resolvedAlignX}
+        data-align-y={resolvedAlignY}
+        data-padding={resolvedPadding}
+        data-no-padding={noPadding ? "true" : undefined}
+        className={clsx(
+          "table-cell",
+          section && `table-${section}-cell`,
+          "table-cell-content",
+          className,
+        )}
+      >
+        {/* 변경: 텍스트 콘텐츠는 slot 전용 className으로 감싸 스타일 적용 범위를 고정한다. */}
+        {typeof children === "string" || typeof children === "number" ? (
+          <span
+            className={clsx(
+              "table-cell-text",
+              section && `table-${section}-cell-text`,
+            )}
+          >
+            {children}
+          </span>
+        ) : (
+          children
+        )}
+      </div>
+    );
+  },
+);
+
+TableCell.displayName = "TableFoundation.Cell";
+
+export default TableCell;

package/src/components/table/markup/foundation/Col.tsx

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableColProps } from "../../types";
+
+/**
+ * Table Foundation; Col 마크업 컴포넌트
+ * @component
+ * @param {TableColProps} props
+ * @param {string} [props.className] col className
+ * @deprecated `Table.Template` 또는 native `<col />` 사용을 권장한다.
+ */
+const TableCol = forwardRef<HTMLTableColElement, TableColProps>(
+  ({ className, ...colProps }, ref) => {
+    return (
+      <col {...colProps} ref={ref} className={clsx("table-col", className)} />
+    );
+  },
+);
+
+TableCol.displayName = "TableFoundation.Col";
+
+export default TableCol;

package/src/components/table/markup/foundation/Colgroup.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableColgroupProps } from "../../types";
+
+/**
+ * Table Foundation; Colgroup 마크업 컴포넌트
+ * @component
+ * @param {TableColgroupProps} props
+ * @param {string} [props.className] colgroup className
+ * @param {React.ReactNode} [props.children] col 목록
+ * @deprecated `Table.Container` 또는 native `<colgroup />` 사용을 권장한다.
+ */
+const TableColgroup = forwardRef<HTMLTableColElement, TableColgroupProps>(
+  ({ className, children, ...colgroupProps }, ref) => {
+    return (
+      <colgroup
+        {...colgroupProps}
+        ref={ref}
+        className={clsx("table-colgroup", className)}
+      >
+        {children}
+      </colgroup>
+    );
+  },
+);
+
+TableColgroup.displayName = "TableFoundation.Colgroup";
+
+export default TableColgroup;

package/src/components/table/markup/foundation/Foot.tsx

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableFootProps } from "../../types";
+
+/**
+ * Table Foundation; Tfoot 마크업 컴포넌트
+ * @component
+ * @param {TableFootProps} props
+ * @param {string} [props.className] tfoot className
+ * @param {React.ReactNode} [props.children] tfoot 내부 콘텐츠
+ */
+const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>(
+  ({ className, children, ...footProps }, ref) => {
+    return (
+      <tfoot {...footProps} ref={ref} className={clsx("table-foot", className)}>
+        {children}
+      </tfoot>
+    );
+  },
+);
+
+TableFoot.displayName = "TableFoundation.Foot";
+
+export default TableFoot;

package/src/components/table/markup/foundation/Head.tsx

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableHeadProps } from "../../types";
+
+/**
+ * Table Foundation; Thead 마크업 컴포넌트
+ * @component
+ * @param {TableHeadProps} props
+ * @param {string} [props.className] thead className
+ * @param {React.ReactNode} [props.children] thead 내부 콘텐츠
+ */
+const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(
+  ({ className, children, ...headProps }, ref) => {
+    return (
+      <thead {...headProps} ref={ref} className={clsx("table-head", className)}>
+        {children}
+      </thead>
+    );
+  },
+);
+
+TableHead.displayName = "TableFoundation.Head";
+
+export default TableHead;

package/src/components/table/markup/foundation/Root.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableRootProps } from "../../types";
+
+/**
+ * Table Foundation; Table Root 마크업 컴포넌트
+ * @component
+ * @param {TableRootProps} props
+ * @param {string} [props.className] table 루트 className
+ * @param {React.ReactNode} [props.children] table 내부 콘텐츠
+ */
+const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(
+  ({ className, children, role, layout = "line", ...tableProps }, ref) => {
+    return (
+      <table
+        {...tableProps}
+        ref={ref}
+        className={clsx("table", "table-container", className)}
+        // 변경: line/grid 스타일 축을 data attribute로 명시해 foundation.scss에서 분기한다.
+        data-layout={layout}
+        // 기본 접근성 role은 table로 고정하고, 외부에서 전달한 role이 있으면 우선한다.
+        role={role ?? "table"}
+      >
+        {children}
+      </table>
+    );
+  },
+);
+
+TableRoot.displayName = "TableFoundation.Root";
+
+export default TableRoot;