@uniai-fe/uds-primitives 0.2.9 → 0.2.10

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/props.ts

@@ -24,6 +24,7 @@ import type {
 export interface SelectStyleOptions {
   /**
    * priority scale
+   * - table 우선순위는 width 미지정 시 기본 block(full)로 동작한다.
    */
   priority?: SelectPriority;
   /**

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;

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

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableRowProps } from "../../types";
+
+/**
+ * Table Foundation; Tr 마크업 컴포넌트
+ * @component
+ * @param {TableRowProps} props
+ * @param {string} [props.className] tr className
+ * @param {React.ReactNode} [props.children] row 내부 콘텐츠
+ */
+const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
+  ({ className, children, section, ...rowProps }, ref) => {
+    return (
+      <tr
+        {...rowProps}
+        ref={ref}
+        className={clsx(
+          "table-row",
+          section && `table-${section}-row`,
+          className,
+        )}
+      >
+        {children}
+      </tr>
+    );
+  },
+);
+
+TableRow.displayName = "TableFoundation.Row";
+
+export default TableRow;

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

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TableTdProps } from "../../types";
+
+/**
+ * Table Foundation; Td 마크업 컴포넌트
+ * @component
+ * @param {TableTdProps} props
+ * @param {string} [props.className] td className
+ * @param {React.ReactNode} [props.children] 셀 콘텐츠
+ */
+const TableTd = forwardRef<HTMLTableCellElement, TableTdProps>(
+  ({ className, children, style, ...cellProps }, ref) => {
+    return (
+      <td
+        {...cellProps}
+        ref={ref}
+        className={clsx("table-native-cell", "table-td", className)}
+        // 변경: th/td 레벨 text-align은 기본 left 고정으로 유지한다.
+        style={{ ...style, textAlign: "left" }}
+      >
+        {/* 변경: 태그 셀렉터 의존을 피하기 위해 className 기반 텍스트 노드를 사용한다. */}
+        {typeof children === "string" || typeof children === "number" ? (
+          <span className={clsx("table-native-cell-text", "table-td-text")}>
+            {children}
+          </span>
+        ) : (
+          children
+        )}
+      </td>
+    );
+  },
+);
+
+TableTd.displayName = "TableFoundation.Td";
+
+export default TableTd;