@uniai-fe/uds-primitives 0.2.9 → 0.2.10

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

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

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

@@ -0,0 +1,30 @@
+import TableBody from "./Body";
+import TableCell from "./Cell";
+import TableCol from "./Col";
+import TableColgroup from "./Colgroup";
+import TableFoot from "./Foot";
+import TableHead from "./Head";
+import TableTh from "./Th";
+import TableRoot from "./Root";
+import TableRow from "./Row";
+import TableTd from "./Td";
+
+/**
+ * Table Foundation; 기초 마크업 컴포넌트 세트
+ */
+export const TableFoundation = {
+  Root: TableRoot,
+  Colgroup: TableColgroup,
+  Col: TableCol,
+  Head: TableHead,
+  Body: TableBody,
+  Foot: TableFoot,
+  Row: TableRow,
+  Cell: TableCell,
+  Thead: TableHead,
+  Tbody: TableBody,
+  Tfoot: TableFoot,
+  Tr: TableRow,
+  Th: TableTh,
+  Td: TableTd,
+};

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

@@ -1,4 +1,10 @@
+import { TableFoundation } from "./foundation";
+import TableContainer from "./Container";
+
 /**
- * TODO(table): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ * Table; 마크업 네임스페이스
  */
-export {};
+export const Table = {
+  ...TableFoundation,
+  Container: TableContainer,
+};

package/src/components/table/styles/foundation.scss

@@ -0,0 +1,247 @@
+.table.table-container {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table.table-container .table-native-cell.table-th,
+.table.table-container .table-native-cell.table-td {
+  vertical-align: middle;
+  background-color: var(--table-cell-background-color);
+  text-align: left;
+}
+
+// 변경: line 타입은 상/하 border 중심과 헤더/바디 높이 축을 고정한다.
+.table.table-container[data-layout="line"] .table-native-cell.table-th,
+.table.table-container[data-layout="line"] .table-native-cell.table-td {
+  // table cell 내부 field full-bleed 계산을 위해 padding 값을 변수로 노출한다.
+  --table-cell-padding-inline: var(--table-line-cell-padding-inline);
+  --table-cell-padding-block: var(--table-line-cell-padding-block);
+  border-bottom: 1px solid var(--table-border-color);
+}
+
+.table.table-container[data-layout="line"]
+  .table-head
+  .table-native-cell.table-th {
+  height: var(--table-line-cell-height-head);
+  border-top: 1px solid var(--table-border-color);
+  background-color: var(--table-line-head-background-color);
+}
+
+.table.table-container[data-layout="line"]
+  .table-body
+  .table-native-cell.table-td,
+.table.table-container[data-layout="line"]
+  .table-foot
+  .table-native-cell.table-td {
+  height: var(--table-line-cell-height-body);
+}
+
+// 변경: grid 타입은 모든 셀 border와 헤더 배경을 기본 제공한다.
+.table.table-container[data-layout="grid"] .table-native-cell.table-th,
+.table.table-container[data-layout="grid"] .table-native-cell.table-td {
+  // table cell 내부 field full-bleed 계산을 위해 padding 값을 변수로 노출한다.
+  --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
+  --table-cell-padding-block: var(--table-grid-cell-padding-block);
+  border: 1px solid var(--table-border-color);
+  height: var(--table-grid-cell-height);
+}
+
+.table.table-container[data-layout="grid"] {
+  border-radius: var(--table-grid-border-radius);
+  overflow: hidden;
+}
+
+.table.table-container[data-layout="grid"]
+  .table-head
+  .table-native-cell.table-th {
+  background-color: var(--table-grid-head-background-color);
+}
+
+// 변경: tag selector 대신 className selector로 텍스트 스타일 적용 범위를 고정한다.
+.table-native-cell.table-th .table-native-cell-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+.table-native-cell.table-td .table-native-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+// Cell 콘텐츠 래퍼는 다양한 입력 컴포넌트 정렬을 위한 공통 슬롯이다.
+.table-cell-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  padding-inline: var(--table-cell-padding-inline);
+  padding-block: var(--table-cell-padding-block);
+}
+
+.table-cell-content[data-padding="none"] {
+  padding: 0;
+}
+
+.table-cell-content[data-no-padding="true"] {
+  padding: 0;
+}
+
+// 변경: table cell 내부에서는 input table이 셀 영역을 가득 채우도록 컨텍스트 규칙을 둔다.
+.table-cell-content[data-padding="default"] .input[data-priority="table"] {
+  width: calc(100% + (var(--table-cell-padding-inline) * 2));
+  height: 100%;
+  min-height: calc(100% + (var(--table-cell-padding-block) * 2));
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+  flex: 1 1 auto;
+}
+
+.table-cell-content[data-padding="default"]
+  :where(.input[data-priority="table"] .input-box),
+.table-cell-content[data-padding="default"]
+  :where(.input[data-priority="table"] .input-field) {
+  width: 100%;
+  height: 100%;
+}
+
+.table-cell-content[data-padding="default"] .input-date-field {
+  width: calc(100% + (var(--table-cell-padding-inline) * 2));
+  height: 100%;
+  min-height: calc(100% + (var(--table-cell-padding-block) * 2));
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+}
+
+.table-cell-content[data-padding="default"] :where(.select.select-container) {
+  width: calc(100% + (var(--table-cell-padding-inline) * 2));
+  height: 100%;
+  min-height: calc(100% + (var(--table-cell-padding-block) * 2));
+  margin-inline: calc(var(--table-cell-padding-inline) * -1);
+  margin-block: calc(var(--table-cell-padding-block) * -1);
+  flex: 1 1 auto;
+}
+
+.table-cell-content[data-padding="default"]
+  :where(.select.select-container .select-button) {
+  width: 100%;
+  height: 100%;
+}
+
+.table-cell-content[data-padding="none"]
+  :where(
+    .input[data-priority="table"],
+    .input[data-priority="table"] .input-box,
+    .input[data-priority="table"] .input-field,
+    .input-date-field,
+    .select.select-container,
+    .select.select-container .select-button
+  ),
+.table-cell-content[data-no-padding="true"]
+  :where(
+    .input[data-priority="table"],
+    .input[data-priority="table"] .input-box,
+    .input[data-priority="table"] .input-field,
+    .input-date-field,
+    .select.select-container,
+    .select.select-container .select-button
+  ) {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+// 변경: Cell 슬롯 텍스트도 className selector로 기본 타이포를 동일하게 맞춘다.
+.table-cell-content .table-cell-text {
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+// 변경: Cell.alignX/alignY로 콘텐츠 정렬을 제어한다.
+.table-cell-content[data-align-x="left"],
+.table-cell-content[data-align="left"] {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.table-cell-content[data-align-x="center"],
+.table-cell-content[data-align="center"] {
+  justify-content: center;
+  text-align: center;
+}
+
+.table-cell-content[data-align-x="right"],
+.table-cell-content[data-align="right"] {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.table-cell-content[data-align-y="top"] {
+  align-items: flex-start;
+}
+
+.table-cell-content[data-align-y="center"] {
+  align-items: center;
+}
+
+.table-cell-content[data-align-y="bottom"] {
+  align-items: flex-end;
+}
+
+// 변경: section 기반 Cell 텍스트는 native cell 토큰과 동일한 스케일을 따르게 한다.
+.table-cell.table-head-cell .table-cell-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+// 변경: table priority input/select는 size와 무관하게 table body 텍스트 스케일(15px)을 사용한다.
+.table-cell .input[data-priority="table"] .input-element,
+.table-cell
+  .select.select-container
+  .select-button[data-priority="table"]
+  .select-label,
+.table-cell
+  .select.select-container
+  .select-button[data-priority="table"]
+  .select-label-placeholder {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+// 변경: radio 라벨은 section 타이포를 따른다(head 13px / body-foot 15px).
+.table-cell.table-head-cell .radio-label-text {
+  color: var(--table-th-text-color);
+  font-size: var(--table-th-text-size);
+  font-weight: var(--table-th-text-weight);
+  line-height: var(--table-th-text-line-height);
+}
+
+.table-cell.table-body-cell .table-cell-text,
+.table-cell.table-foot-cell .table-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+
+// 변경: Cell(body/foot) 컨텍스트에서는 table priority input/select 텍스트를 15px 축으로 강제한다.
+.table-cell.table-body-cell .radio-label-text,
+.table-cell.table-foot-cell .radio-label-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}

package/src/components/table/styles/index.scss

@@ -0,0 +1,2 @@
+@use "./variables.scss";
+@use "./foundation.scss";

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

@@ -0,0 +1,29 @@
+:root {
+  // 변경: Figma(705:12000, 726:14739) 값을 foundation 토큰으로 역매핑한 table 모듈 전용 토큰 레이어.
+  --table-border-color: var(--color-border-standard-cool-gray);
+  --table-line-head-background-color: var(--color-surface-static-cool-gray);
+  --table-grid-head-background-color: var(
+    --color-background-alternative-cool-gray
+  );
+  --table-cell-background-color: var(--color-surface-static-white);
+
+  --table-line-cell-height-head: 44px;
+  --table-line-cell-height-body: 56px;
+  --table-grid-cell-height: 48px;
+  --table-grid-border-radius: var(--theme-radius-large-1);
+
+  --table-line-cell-padding-inline: var(--spacing-padding-6);
+  --table-line-cell-padding-block: 9px;
+  --table-grid-cell-padding-inline: var(--spacing-padding-6);
+  --table-grid-cell-padding-block: 9px;
+
+  --table-th-text-color: var(--color-label-standard);
+  --table-th-text-size: 13px;
+  --table-th-text-weight: var(--font-label-small-weight);
+  --table-th-text-line-height: var(--font-label-small-line-height);
+
+  --table-td-text-color: var(--color-label-standard);
+  --table-td-text-size: 15px;
+  --table-td-text-weight: var(--font-body-xsmall-weight);
+  --table-td-text-line-height: var(--font-body-xsmall-line-height);
+}

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

@@ -0,0 +1,250 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+export const TABLE_CELL_ALIGN_OPTIONS = ["left", "center", "right"] as const;
+export const TABLE_CELL_ALIGN_Y_OPTIONS = ["top", "center", "bottom"] as const;
+export const TABLE_CELL_PADDING_OPTIONS = ["default", "none"] as const;
+export const TABLE_SECTIONS = ["head", "body", "foot"] as const;
+export const TABLE_LAYOUT_OPTIONS = ["line", "grid"] as const;
+
+/**
+ * Table Types; Cell 정렬 값 타입
+ * @typedef {"left" | "center" | "right"} TableCellAlign
+ */
+export type TableCellAlign = (typeof TABLE_CELL_ALIGN_OPTIONS)[number];
+/**
+ * Table Types; Cell 세로 정렬 값 타입
+ * @typedef {"top" | "center" | "bottom"} TableCellAlignY
+ */
+export type TableCellAlignY = (typeof TABLE_CELL_ALIGN_Y_OPTIONS)[number];
+/**
+ * Table Types; Cell padding 제어 타입
+ * @typedef {"default" | "none"} TableCellPadding
+ */
+export type TableCellPadding = (typeof TABLE_CELL_PADDING_OPTIONS)[number];
+/**
+ * Table Types; section 식별 타입
+ * @typedef {"head" | "body" | "foot"} TableSection
+ */
+export type TableSection = (typeof TABLE_SECTIONS)[number];
+/**
+ * Table Types; layout 식별 타입
+ * @typedef {"line" | "grid"} TableLayout
+ */
+export type TableLayout = (typeof TABLE_LAYOUT_OPTIONS)[number];
+
+/**
+ * Table Types; Root props
+ * @property {string} [className] table 루트 className
+ * @property {"line" | "grid"} [layout] 테이블 스타일 축
+ * @property {React.ReactNode} [children] table 내부 콘텐츠
+ */
+export interface TableRootProps extends ComponentPropsWithoutRef<"table"> {
+  /**
+   * 테이블 스타일 축
+   */
+  layout?: TableLayout;
+}
+
+/**
+ * Table Types; Colgroup props
+ * @property {string} [className] colgroup className
+ * @property {React.ReactNode} [children] col 목록
+ */
+export interface TableColgroupProps extends ComponentPropsWithoutRef<"colgroup"> {}
+
+/**
+ * Table Types; Colgroup column item
+ * @property {string} key column 고유 key
+ * @property {number | string} [width] width 값
+ * @property {string} [dataKey] data-key attr 값
+ * @property {string} [className] col className
+ * @property {number} [span] col span 값
+ */
+export interface TableColgroupColumn {
+  /**
+   * column 고유 key
+   */
+  key: string;
+  /**
+   * width 값
+   */
+  width?: number | string;
+  /**
+   * data-key attr 값
+   */
+  dataKey?: string;
+  /**
+   * col className
+   */
+  className?: string;
+  /**
+   * col span 값
+   */
+  span?: number;
+}
+
+/**
+ * Table Types; Template column item
+ * @property {string} key column 고유 key
+ * @property {number | string} [width] width 값
+ * @property {string} [dataKey] data-key attr 값
+ * @property {string} [dataName] 헤더 식별자
+ * @property {React.ReactNode} [headContent] 헤더 셀 콘텐츠
+ * @property {React.ReactNode} [cellContents] ui-legacy 호환 헤더 콘텐츠
+ * @property {React.ReactNode} [cellChildren] 서비스 호환 헤더 콘텐츠
+ * @property {"left" | "center" | "right"} [align] 헤더 정렬
+ */
+export interface TableTemplateColumn extends TableColgroupColumn {
+  /**
+   * 헤더 식별자
+   */
+  dataName?: string;
+  /**
+   * 헤더 셀 콘텐츠
+   */
+  headContent?: React.ReactNode;
+  /**
+   * ui-legacy 호환 헤더 콘텐츠
+   */
+  cellContents?: React.ReactNode;
+  /**
+   * 서비스 호환 헤더 콘텐츠
+   */
+  cellChildren?: React.ReactNode;
+  /**
+   * 헤더 정렬
+   */
+  align?: TableCellAlign;
+}
+
+/**
+ * Table Types; Template props
+ * @property {TableTemplateColumn[]} [columns] colgroup/head 자동 렌더링용 column 데이터
+ * @property {boolean} [isCustomBody] true면 body wrapper 없이 children을 직접 렌더링
+ * @property {"legacy-rem" | "raw"} [widthMode] number width 해석 방식
+ * @property {React.ReactNode} [footer] footer 노드
+ * @property {React.ReactNode} [children] body 콘텐츠
+ */
+export interface TableTemplateProps extends TableRootProps {
+  /**
+   * colgroup/head 자동 렌더링용 column 데이터
+   */
+  columns?: TableTemplateColumn[];
+  /**
+   * true면 body wrapper 없이 children을 직접 렌더링
+   */
+  isCustomBody?: boolean;
+  /**
+   * number width 해석 방식
+   */
+  widthMode?: "legacy-rem" | "raw";
+  /**
+   * footer 노드
+   */
+  footer?: React.ReactNode;
+}
+
+/**
+ * Table Types; Col props
+ * @property {string} [className] col className
+ */
+export interface TableColProps extends ComponentPropsWithoutRef<"col"> {}
+
+/**
+ * Table Types; Thead props
+ * @property {string} [className] thead className
+ * @property {React.ReactNode} [children] thead 내부 콘텐츠
+ */
+export interface TableHeadProps extends ComponentPropsWithoutRef<"thead"> {}
+
+/**
+ * Table Types; Tbody props
+ * @property {string} [className] tbody className
+ * @property {React.ReactNode} [children] tbody 내부 콘텐츠
+ */
+export interface TableBodyProps extends ComponentPropsWithoutRef<"tbody"> {}
+
+/**
+ * Table Types; Tfoot props
+ * @property {string} [className] tfoot className
+ * @property {React.ReactNode} [children] tfoot 내부 콘텐츠
+ */
+export interface TableFootProps extends ComponentPropsWithoutRef<"tfoot"> {}
+
+/**
+ * Table Types; Tr props
+ * @property {"head" | "body" | "foot"} [section] row 상위 섹션
+ * @property {string} [className] tr className
+ * @property {React.ReactNode} [children] row 내부 콘텐츠
+ */
+export interface TableRowProps extends ComponentPropsWithoutRef<"tr"> {
+  /**
+   * row 상위 섹션
+   */
+  section?: TableSection;
+}
+
+/**
+ * Table Types; Th props
+ * @property {string} [className] th className
+ * @property {React.ReactNode} [children] header cell 콘텐츠
+ */
+export interface TableThProps extends ComponentPropsWithoutRef<"th"> {}
+
+/**
+ * Table Types; Td props
+ * @property {string} [className] td className
+ * @property {React.ReactNode} [children] body cell 콘텐츠
+ */
+export interface TableTdProps extends ComponentPropsWithoutRef<"td"> {}
+
+/**
+ * Table Types; Cell content props
+ * @property {"head" | "body" | "foot"} [section] cell 상위 섹션
+ * @property {"left" | "center" | "right"} [alignX] cell 콘텐츠 가로 정렬
+ * @property {"top" | "center" | "bottom"} [alignY] cell 콘텐츠 세로 정렬
+ * @property {boolean} [noPadding] true면 cell 내부 padding 제거
+ * @property {"default" | "none"} [padding] cell 내부 padding 제어
+ * @property {"left" | "center" | "right"} [align] cell 콘텐츠 가로 정렬(호환 alias)
+ * @property {string} [className] cell content className
+ * @property {React.ReactNode} [children] cell 내부 콘텐츠
+ */
+export interface TableCellContentProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * cell 상위 섹션
+   */
+  section?: TableSection;
+  /**
+   * cell 콘텐츠 가로 정렬
+   */
+  alignX?: TableCellAlign;
+  /**
+   * cell 콘텐츠 세로 정렬
+   */
+  alignY?: TableCellAlignY;
+  /**
+   * true면 cell 내부 padding 제거
+   */
+  noPadding?: boolean;
+  /**
+   * cell 내부 padding 제어
+   */
+  padding?: TableCellPadding;
+  /**
+   * cell 콘텐츠 가로 정렬(호환 alias)
+   * @deprecated `alignX` 사용을 권장한다.
+   */
+  align?: TableCellAlign;
+}
+
+/**
+ * Table Types; HeadCell props (deprecated alias)
+ * @deprecated `TableThProps` 사용을 권장한다.
+ */
+export interface TableHeadCellProps extends TableThProps {}
+
+/**
+ * Table Types; Body Cell props (deprecated alias)
+ * @deprecated `TableTdProps` 사용을 권장한다.
+ */
+export interface TableCellProps extends TableTdProps {}

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

@@ -1,4 +1 @@
-/**
- * TODO(table): variant/slot 타입 정의를 작성한다.
- */
-export {};
+export * from "./foundation";

package/src/components/tooltip/img/info.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00004 6.7998C8.29459 6.7998 8.53324 7.03846 8.53324 7.33301V10.6663C8.53324 10.9609 8.29459 11.1995 8.00004 11.1995C7.70549 11.1995 7.46684 10.9609 7.46684 10.6663V7.33301C7.46684 7.03846 7.70549 6.7998 8.00004 6.7998Z" fill="#94989E"/>
+<path d="M8.00004 4.66634C8.36823 4.66634 8.66671 4.96482 8.66671 5.33301C8.66671 5.7012 8.36823 5.99967 8.00004 5.99967C7.63185 5.99967 7.33337 5.7012 7.33337 5.33301C7.33337 4.96482 7.63185 4.66634 8.00004 4.66634Z" fill="#94989E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00004 1.33301C11.6819 1.33301 14.6667 4.31778 14.6667 7.99967C14.6667 11.6816 11.6819 14.6663 8.00004 14.6663C4.31814 14.6663 1.33337 11.6816 1.33337 7.99967C1.33337 4.31778 4.31814 1.33301 8.00004 1.33301ZM8.00004 2.39941C4.90725 2.39941 2.39978 4.90688 2.39978 7.99967C2.39978 11.0925 4.90725 13.5999 8.00004 13.5999C11.0928 13.5999 13.6003 11.0925 13.6003 7.99967C13.6003 4.90688 11.0928 2.39941 8.00004 2.39941Z" fill="#94989E"/>
+</svg>

package/src/components/tooltip/img/information.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon/Information/Line">
+<g id="Union">
+<path d="M8 6.80013C8.29455 6.80013 8.5332 7.03878 8.5332 7.33333V10.6667C8.5332 10.9612 8.29455 11.1999 8 11.1999C7.70545 11.1999 7.4668 10.9612 7.4668 10.6667V7.33333C7.4668 7.03878 7.70545 6.80013 8 6.80013Z" fill="var(--fill-0, #94989E)"/>
+<path d="M8 4.66667C8.36819 4.66667 8.66667 4.96514 8.66667 5.33333C8.66667 5.70152 8.36819 6 8 6C7.63181 6 7.33333 5.70152 7.33333 5.33333C7.33333 4.96514 7.63181 4.66667 8 4.66667Z" fill="var(--fill-0, #94989E)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333ZM8 2.39974C4.90721 2.39974 2.39974 4.90721 2.39974 8C2.39974 11.0928 4.90721 13.6003 8 13.6003C11.0928 13.6003 13.6003 11.0928 13.6003 8C13.6003 4.90721 11.0928 2.39974 8 2.39974Z" fill="var(--fill-0, #94989E)"/>
+</g>
+</g>
+</svg>

package/src/components/tooltip/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/tooltip/index.tsx

@@ -0,0 +1,4 @@
+import "./index.scss";
+
+export * from "./markup";
+export type * from "./types";