@uniai-fe/uds-primitives 0.0.1

package/src/components/spinner/index.tsx

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

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

@@ -0,0 +1,4 @@
+/**
+ * TODO(spinner): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ */
+export {};

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

@@ -0,0 +1,3 @@
+@use "@uniai-fe/uds-foundation/css";
+
+/* TODO(spinner): 스타일을 SOT 토큰 값으로 정의한다. */

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

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

package/src/components/spinner/utils/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(spinner): 토큰 매핑과 클래스명 유틸을 구현한다.
+ */
+export {};

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

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

package/src/components/tab/index.scss

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

package/src/components/tab/index.tsx

@@ -0,0 +1,6 @@
+/**
+ * tab 카테고리 배럴: 실제 구현은 markup/ 하위에서 관리한다.
+ */
+import "./index.scss";
+
+export * from "./markup";

package/src/components/tab/markup/TabContent.tsx

@@ -0,0 +1,29 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { TabContentProps } from "../types";
+import { useTabContext } from "../utils";
+
+/**
+ * TabContent: trigger와 동일한 data attr을 전달해 스타일 일관성을 유지한다.
+ */
+const TabContent = forwardRef<HTMLDivElement, TabContentProps>(
+  ({ className, children, ...restProps }, forwardedRef) => {
+    const { variant } = useTabContext();
+
+    return (
+      <TabsPrimitive.Content
+        {...restProps}
+        ref={forwardedRef}
+        className={clsx("tab-content", className)}
+        data-variant={variant}
+      >
+        {children}
+      </TabsPrimitive.Content>
+    );
+  },
+);
+
+TabContent.displayName = "TabContent";
+
+export { TabContent };

package/src/components/tab/markup/TabList.tsx

@@ -0,0 +1,60 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import clsx from "clsx";
+import { forwardRef, useEffect, useMemo } from "react";
+import type { CSSProperties } from "react";
+import type { TabListProps } from "../types";
+import { useTabContext, DEFAULT_TAB_CONTEXT_VALUE } from "../utils";
+
+/**
+ * TabList: Tab trigger container with variant/tone propagation.
+ */
+const TabList = forwardRef<HTMLDivElement, TabListProps>(
+  (
+    {
+      variant,
+      color,
+      fullWidth = false,
+      className,
+      children,
+      style,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const parentContext = useTabContext();
+    const resolvedVariant =
+      variant ?? parentContext.variant ?? DEFAULT_TAB_CONTEXT_VALUE.variant;
+    const resolvedColor =
+      color ?? parentContext.color ?? DEFAULT_TAB_CONTEXT_VALUE.color;
+
+    useEffect(() => {
+      parentContext.setVariantColor?.(resolvedVariant, resolvedColor);
+    }, [parentContext, resolvedVariant, resolvedColor]);
+
+    const listStyle = useMemo<CSSProperties>(
+      () => ({
+        ...(style ?? {}),
+        "--tab-color-active": resolvedColor,
+      }),
+      [style, resolvedColor],
+    );
+
+    return (
+      <TabsPrimitive.List
+        {...restProps}
+        ref={forwardedRef}
+        className={clsx("tab-list", className)}
+        data-variant={resolvedVariant}
+        data-full-width={fullWidth ? "true" : undefined}
+        data-color={resolvedColor}
+        style={listStyle}
+      >
+        {children}
+      </TabsPrimitive.List>
+    );
+  },
+);
+
+TabList.displayName = "TabList";
+
+export { TabList };

package/src/components/tab/markup/TabRoot.tsx

@@ -0,0 +1,74 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import clsx from "clsx";
+import { forwardRef, useEffect, useMemo, useState } from "react";
+import type { CSSProperties } from "react";
+import type { TabRootProps } from "../types";
+import { TabContext, DEFAULT_TAB_CONTEXT_VALUE } from "../utils";
+
+/**
+ * TabRoot: TabsPrimitive.Root thin wrapper with tab data context.
+ */
+const TabRoot = forwardRef<HTMLDivElement, TabRootProps>(
+  (
+    {
+      variant: variantProp = DEFAULT_TAB_CONTEXT_VALUE.variant,
+      color: colorProp = DEFAULT_TAB_CONTEXT_VALUE.color,
+      className,
+      children,
+      style,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const [variant, setVariant] = useState(variantProp);
+    const [color, setColor] = useState(colorProp);
+
+    useEffect(() => {
+      setVariant(variantProp);
+    }, [variantProp]);
+
+    useEffect(() => {
+      setColor(colorProp);
+    }, [colorProp]);
+
+    const contextValue = useMemo(
+      () => ({
+        variant,
+        color,
+        setVariantColor: (
+          nextVariant: typeof variant,
+          nextColor: typeof color,
+        ) => {
+          setVariant(nextVariant);
+          setColor(nextColor);
+        },
+      }),
+      [variant, color],
+    );
+    const rootStyle = useMemo<CSSProperties>(
+      () => ({
+        ...(style ?? {}),
+        "--tab-color-active": color,
+      }),
+      [style, color],
+    );
+
+    return (
+      <TabContext.Provider value={contextValue}>
+        <TabsPrimitive.Root
+          {...restProps}
+          ref={forwardedRef}
+          className={clsx("tab-root", className)}
+          data-variant={variant}
+          style={rootStyle}
+        >
+          {children}
+        </TabsPrimitive.Root>
+      </TabContext.Provider>
+    );
+  },
+);
+
+TabRoot.displayName = "TabRoot";
+
+export { TabRoot };

package/src/components/tab/markup/TabTrigger.tsx

@@ -0,0 +1,47 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import type { ReactNode } from "react";
+import type { TabTriggerProps } from "../types";
+import { useTabContext } from "../utils";
+
+const wrapLabel = (children: ReactNode) => {
+  if (children === null || children === undefined) {
+    return null;
+  }
+
+  if (typeof children === "string" || typeof children === "number") {
+    return <span className="tab-trigger-label">{children}</span>;
+  }
+
+  return children;
+};
+
+/**
+ * TabTrigger: 개별 탭 버튼. icon slot을 지원한다.
+ */
+const TabTrigger = forwardRef<HTMLButtonElement, TabTriggerProps>(
+  ({ icon, children, className, ...restProps }, forwardedRef) => {
+    const { variant } = useTabContext();
+    const hasIcon = Boolean(icon);
+    const normalizedChildren = wrapLabel(children);
+
+    return (
+      <TabsPrimitive.Trigger
+        {...restProps}
+        ref={forwardedRef}
+        className={clsx("tab-trigger", className)}
+        data-variant={variant}
+        data-has-icon={hasIcon ? "true" : undefined}
+        data-disabled={restProps.disabled ? "true" : undefined}
+      >
+        {icon ? <span className="tab-trigger-icon">{icon}</span> : null}
+        {normalizedChildren}
+      </TabsPrimitive.Trigger>
+    );
+  },
+);
+
+TabTrigger.displayName = "TabTrigger";
+
+export { TabTrigger };

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

@@ -0,0 +1,4 @@
+export { TabRoot } from "./TabRoot";
+export { TabList } from "./TabList";
+export { TabTrigger } from "./TabTrigger";
+export { TabContent } from "./TabContent";

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

@@ -0,0 +1,182 @@
+@use "@uniai-fe/uds-foundation/css";
+
+.tab-root {
+  /* Figma node 694:4619 측정값을 CSS 변수로 고정해 Storybook과 실 서비스 간 시각 편차를 줄인다. */
+  --tab-label-font-size: var(--font-heading-xsmall-size, 17px);
+  --tab-label-font-weight: var(--font-heading-xsmall-weight, 600);
+  --tab-label-line-height: var(--font-heading-xsmall-line-height, 1.5em);
+  --tab-label-letter-spacing: var(--font-heading-xsmall-letter-spacing, 0px);
+  --tab-gap: 10px;
+  --tab-padding-y: 10px;
+  --tab-padding-x: 20px;
+  --tab-icon-gap: 6px;
+  --tab-line-track-color: var(
+    --color-border-divider,
+    var(--color-cool-gray-85)
+  );
+  --tab-line-track-height: 1.6px;
+  --tab-line-indicator-height: 2px;
+  --tab-color-active-default: #1a6aff;
+  --tab-color-active: var(--tab-color-active-default);
+  --tab-color-hover: color-mix(in srgb, var(--tab-color-active), #000 15%);
+  --tab-line-hover-color: var(--tab-color-hover, var(--tab-color-active));
+  --tab-fill-hover-bg: var(--color-bg-alternative-cool-gray, #f2f2f3);
+  --tab-fill-active-color: var(--color-common-100, #ffffff);
+  --tab-inactive-color: var(--color-label-alternative, #afb1b6);
+  --tab-disabled-opacity: 0.4;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-3);
+}
+
+.tab-list {
+  display: flex;
+  align-items: stretch;
+  gap: var(--tab-gap);
+  width: fit-content;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tab-list::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-list:where([data-full-width="true"]) {
+  width: 100%;
+}
+
+.tab-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--tab-icon-gap);
+  padding: var(--tab-padding-y) var(--tab-padding-x);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.tab-trigger:where(:focus-visible) {
+  outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
+  outline-offset: 2px;
+}
+
+.tab-trigger:where([data-disabled="true"]) {
+  cursor: not-allowed;
+  opacity: var(--tab-disabled-opacity);
+}
+
+.tab-trigger-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-trigger-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tab-label-font-size);
+  font-weight: var(--tab-label-font-weight);
+  line-height: var(--tab-label-line-height);
+  letter-spacing: var(--tab-label-letter-spacing);
+  color: var(--tab-inactive-color);
+  transition: color 0.2s ease;
+}
+
+.tab-list:where([data-variant="line"]) {
+  position: relative;
+  width: 100%;
+}
+
+.tab-list:where([data-variant="line"])::before {
+  content: "";
+  position: absolute;
+  inset: auto 0 0;
+  height: var(--tab-line-track-height, 1px);
+  background: var(--tab-line-track-color);
+  z-index: 0;
+}
+
+.tab-list:where([data-variant="line"][data-full-width="true"]) > .tab-trigger {
+  flex: 1;
+}
+
+.tab-trigger:where([data-variant="line"])::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: var(--tab-line-indicator-height, 2px);
+  background: transparent;
+  transform: scaleX(0);
+  transform-origin: center;
+  z-index: 1;
+  transition:
+    transform 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.tab-trigger:where([data-variant="line"][data-state="active"])
+  .tab-trigger-label {
+  color: var(--tab-color-active);
+}
+
+.tab-trigger:where([data-variant="line"][data-state="active"])::after {
+  background: var(--tab-color-active);
+  transform: scaleX(1);
+}
+
+.tab-trigger:where([data-variant="line"]):where(
+    :not([data-state="active"])
+  ):hover
+  .tab-trigger-label {
+  color: var(--tab-line-hover-color);
+}
+
+.tab-list:where([data-variant="fill"]) {
+  width: fit-content;
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  gap: 0;
+}
+
+.tab-list:where([data-variant="fill"][data-full-width="true"]) {
+  width: 100%;
+}
+
+.tab-list:where([data-variant="fill"][data-full-width="true"]) > .tab-trigger {
+  flex: 1;
+}
+
+.tab-trigger:where([data-variant="fill"]) {
+  border-radius: 12px;
+  min-width: 0;
+  padding: var(--tab-padding-y) var(--tab-padding-x);
+}
+
+.tab-trigger:where([data-variant="fill"][data-state="active"]) {
+  background: var(--tab-color-active);
+}
+
+.tab-trigger:where([data-variant="fill"][data-state="active"])
+  .tab-trigger-label {
+  color: var(--tab-fill-active-color);
+}
+
+.tab-trigger:where([data-variant="fill"]):where(
+    :not([data-state="active"])
+  ):hover {
+  background: var(--tab-fill-hover-bg);
+}
+
+.tab-content {
+  display: block;
+  padding: var(--spacing-padding-6) 0;
+}

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

@@ -0,0 +1,46 @@
+import type {
+  TabsContentProps,
+  TabsListProps,
+  TabsProps,
+  TabsTriggerProps,
+} from "@radix-ui/react-tabs";
+import type { ReactNode } from "react";
+
+export const TAB_VARIANTS = ["line", "fill"] as const;
+
+export type TabVariant = (typeof TAB_VARIANTS)[number];
+
+export interface TabRootProps extends TabsProps {
+  /**
+   * line / fill 스타일 토글. 기본 line.
+   */
+  variant?: TabVariant;
+  /**
+   * 활성 색상(hex, rgba, css 변수 등). 지정하지 않으면 기본 블루.
+   */
+  color?: string;
+}
+
+export interface TabListProps extends TabsListProps {
+  /**
+   * 루트와 동일한 variant를 재지정할 수 있다.
+   */
+  variant?: TabVariant;
+  /**
+   * 리스트 단위 활성 색상 지정.
+   */
+  color?: string;
+  /**
+   * true면 trigger들이 flex:1로 균등 분배된다.
+   */
+  fullWidth?: boolean;
+}
+
+export interface TabTriggerProps extends TabsTriggerProps {
+  /**
+   * label 앞에 표시할 아이콘.
+   */
+  icon?: ReactNode;
+}
+
+export type TabContentProps = TabsContentProps;

package/src/components/tab/utils/index.ts

@@ -0,0 +1,5 @@
+export {
+  TabContext,
+  useTabContext,
+  DEFAULT_TAB_CONTEXT_VALUE,
+} from "./tab-context";

package/src/components/tab/utils/tab-context.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+import type { TabVariant } from "../types";
+
+interface TabContextValue {
+  variant: TabVariant;
+  color: string;
+  setVariantColor?: (nextVariant: TabVariant, nextColor: string) => void;
+}
+
+const DEFAULT_TAB_CONTEXT_VALUE: TabContextValue = {
+  variant: "line",
+  color: "var(--tab-color-active-default, #1a6aff)",
+};
+
+const TabContext = createContext<TabContextValue>(DEFAULT_TAB_CONTEXT_VALUE);
+
+const useTabContext = () => useContext(TabContext);
+
+export { TabContext, useTabContext, DEFAULT_TAB_CONTEXT_VALUE };
+export type { TabContextValue };

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

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

package/src/components/table/index.scss

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

package/src/components/table/index.tsx

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

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

@@ -0,0 +1,4 @@
+/**
+ * TODO(table): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ */
+export {};

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

@@ -0,0 +1,3 @@
+@use "@uniai-fe/uds-foundation/css";
+
+/* TODO(table): 스타일을 SOT 토큰 값으로 정의한다. */

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

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

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

@@ -0,0 +1,4 @@
+/**
+ * TODO(table): 토큰 매핑과 클래스명 유틸을 구현한다.
+ */
+export {};

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+/**
+ * shared hooks placeholder: 카테고리 간 재사용 로직을 이 디렉터리에 모아둔다.
+ */
+export {};

package/src/index.scss

@@ -0,0 +1,3 @@
+@use "@uniai-fe/uds-foundation/css";
+
+/* 공용 스타일 placeholder: 각 카테고리 styles에서 필요한 경우 @use 로 확장 */

package/src/index.tsx

@@ -0,0 +1,26 @@
+// dayjs 초기화를 가장 먼저 수행해 날짜 계열 컴포넌트가 동일 컨텍스트를 사용한다.
+import "./init/dayjs";
+
+export * from "./theme";
+
+// 루트 배럴: 카테고리별 export를 집계한다.
+export * from "./components/button";
+export * from "./components/label";
+export * from "./components/input";
+export * from "./components/checkbox";
+export * from "./components/radio";
+export * from "./components/select";
+export * from "./components/tab";
+export * from "./components/navigation";
+export * from "./components/dialog";
+export * from "./components/dropdown";
+export * from "./components/drawer";
+export * from "./components/scrollbar";
+export * from "./components/calendar";
+export * from "./components/pagination";
+export * from "./components/table";
+export * from "./components/chip";
+export * from "./components/badge";
+export * from "./components/spinner";
+export * from "./components/alternate";
+export * from "./components/segmented-control";

package/src/init/dayjs.ts

@@ -0,0 +1,14 @@
+// dayjs 플러그인/locale을 한 번만 초기화해 Mantine Calendar에서 동일한 포맷을 사용한다.
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import "dayjs/locale/ko";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.locale("ko");
+
+// 필요 시 컴포넌트에서 동일 인스턴스를 사용하도록 재노출한다.
+export { dayjs };

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,25 @@
+import { Theme } from "@radix-ui/themes";
+import "@radix-ui/themes/styles.css";
+import "@uniai-fe/uds-foundation/css";
+import type { PropsWithChildren } from "react";
+import "./overrides.scss";
+import { defaultThemeOptions, type ThemeProviderProps } from "./config";
+
+/**
+ * Radix Theme와 foundation 토큰을 한 번에 초기화하는 Provider.
+ * Storybook 데코레이터 및 애플리케이션 루트에서 활용한다.
+ */
+function ThemeProvider({
+  children,
+  theme = defaultThemeOptions,
+  className,
+}: PropsWithChildren<ThemeProviderProps>) {
+  const composedClass = className ?? "theme-root";
+  return (
+    <Theme {...theme} className={composedClass}>
+      {children}
+    </Theme>
+  );
+}
+
+export { ThemeProvider };

package/src/theme/config.ts

@@ -0,0 +1,29 @@
+import type { ThemeProps } from "@radix-ui/themes";
+
+/**
+ * Radix Theme 설정 옵션. foundation 토큰과 매핑할 예정이므로
+ * appearance/accentColor 등은 추후 토큰 담당자와 확정 후 업데이트한다.
+ */
+export type ThemeOptions = ThemeProps;
+
+/**
+ * foundation 토큰 → Radix Theme 옵션 초기 매핑.
+ * 현재는 Radix Theme 기본 키를 사용하고, CSS override(`overrides.scss`)에서
+ * 실제 색상/폰트/간격 값을 foundation 토큰으로 덮어쓴다.
+ */
+export const defaultThemeOptions: ThemeOptions = {
+  appearance: "light",
+  accentColor: "blue",
+  grayColor: "gray",
+  scaling: "95%",
+  radius: "medium",
+};
+
+/**
+ * Theme Provider에 전달할 props 타입.
+ * `children`은 React node이며, `theme`를 전달하지 않으면 `defaultThemeOptions`가 사용된다.
+ */
+export type ThemeProviderProps = {
+  theme?: ThemeOptions;
+  className?: string;
+};