@uniai-fe/uds-primitives 0.0.1

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

@@ -0,0 +1,54 @@
+import clsx from "clsx";
+import type { InputClassNameOptions } from "../types";
+
+const INPUT_CLASSNAME = "input";
+const INPUT_BOX_CLASSNAME = "input-box";
+const INPUT_FIELD_CLASSNAME = "input-field";
+const INPUT_ELEMENT_CLASSNAME = "input-element";
+const INPUT_AFFIX_CLASSNAME = "input-affix";
+
+const composeInputClassName = ({
+  appearance,
+  size,
+  state,
+  block,
+  className,
+}: InputClassNameOptions) =>
+  clsx(
+    INPUT_CLASSNAME,
+    `${INPUT_CLASSNAME}--appearance-${appearance}`,
+    `${INPUT_CLASSNAME}--size-${size}`,
+    {
+      [`${INPUT_CLASSNAME}--state-${state}`]: state !== "default",
+      [`${INPUT_CLASSNAME}--block`]: block,
+    },
+    className,
+  );
+
+const composeInputBoxClassName = ({
+  appearance,
+  size,
+  state,
+  block,
+  className,
+}: InputClassNameOptions) =>
+  clsx(
+    INPUT_BOX_CLASSNAME,
+    `${INPUT_BOX_CLASSNAME}--appearance-${appearance}`,
+    `${INPUT_BOX_CLASSNAME}--size-${size}`,
+    {
+      [`${INPUT_BOX_CLASSNAME}--state-${state}`]: state !== "default",
+      [`${INPUT_BOX_CLASSNAME}--block`]: block,
+    },
+    className,
+  );
+
+export {
+  INPUT_AFFIX_CLASSNAME,
+  INPUT_BOX_CLASSNAME,
+  INPUT_CLASSNAME,
+  INPUT_ELEMENT_CLASSNAME,
+  INPUT_FIELD_CLASSNAME,
+  composeInputBoxClassName,
+  composeInputClassName,
+};

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

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

package/src/components/label/index.scss

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

package/src/components/label/index.tsx

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

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

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

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

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

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

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

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

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

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

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

package/src/components/navigation/index.scss

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

package/src/components/navigation/index.tsx

@@ -0,0 +1,8 @@
+import "./index.scss";
+
+export * from "./markup";
+export type {
+  BottomNavigationProps,
+  NavigationItem,
+  NavigationItemKey,
+} from "./types";

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

@@ -0,0 +1,2 @@
+export * from "./mobile";
+export * from "./web";

package/src/components/navigation/markup/mobile/BottomNavigation.tsx

@@ -0,0 +1,127 @@
+import { forwardRef, type MouseEvent } from "react";
+import type { BottomNavigationProps, NavigationItem } from "../../types";
+import {
+  BOTTOM_NAVIGATION_ICON_CLASSNAME,
+  BOTTOM_NAVIGATION_ITEM_CLASSNAME,
+  BOTTOM_NAVIGATION_LABEL_CLASSNAME,
+  BOTTOM_NAVIGATION_LIST_CLASSNAME,
+  BOTTOM_NAVIGATION_TRIGGER_CLASSNAME,
+  composeNavigationClassName,
+  isHrefNavigationItem,
+} from "../../utils";
+
+const BottomNavigation = forwardRef<HTMLElement, BottomNavigationProps>(
+  (
+    {
+      items,
+      activeKey,
+      onActiveChange,
+      ariaLabel,
+      className,
+      fixed = false,
+      ...restProps
+    },
+    ref,
+  ) => {
+    if (!items || items.length === 0) {
+      return null;
+    }
+
+    const handleSelect = (item: NavigationItem) => {
+      if (item.disabled) {
+        return;
+      }
+
+      if (!isHrefNavigationItem(item)) {
+        item.onSelect(item.key);
+      }
+      onActiveChange?.(item.key);
+    };
+
+    const handleAnchorClick = (
+      event: MouseEvent<HTMLAnchorElement>,
+      item: NavigationItem,
+    ) => {
+      if (item.disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      handleSelect(item);
+    };
+
+    const navClassName = composeNavigationClassName({ className });
+    const resolvedAriaLabel =
+      ariaLabel ?? (restProps as { ["aria-label"]?: string })["aria-label"];
+
+    return (
+      <nav
+        {...restProps}
+        ref={ref}
+        className={navClassName}
+        aria-label={resolvedAriaLabel}
+        data-fixed={fixed ? "true" : undefined}
+      >
+        <ul className={BOTTOM_NAVIGATION_LIST_CLASSNAME}>
+          {items.map(item => {
+            const isActive = item.key === activeKey;
+            const isDisabled = Boolean(item.disabled);
+            const sharedTriggerProps = {
+              className: BOTTOM_NAVIGATION_TRIGGER_CLASSNAME,
+              "data-active": isActive ? "true" : undefined,
+              "data-disabled": isDisabled ? "true" : undefined,
+              "aria-label": item.ariaLabel ?? item.label,
+            } as const;
+
+            return (
+              <li
+                key={item.key}
+                className={BOTTOM_NAVIGATION_ITEM_CLASSNAME}
+                data-active={isActive ? "true" : undefined}
+                data-disabled={isDisabled ? "true" : undefined}
+              >
+                {isHrefNavigationItem(item) ? (
+                  // href 아이템은 anchor로 유지해 라우팅 흐름을 깨지 않는다.
+                  <a
+                    {...sharedTriggerProps}
+                    href={item.href}
+                    aria-current={isActive ? "page" : undefined}
+                    aria-disabled={isDisabled ? "true" : undefined}
+                    tabIndex={isDisabled ? -1 : undefined}
+                    onClick={event => handleAnchorClick(event, item)}
+                  >
+                    <span className={BOTTOM_NAVIGATION_ICON_CLASSNAME}>
+                      {item.icon}
+                    </span>
+                    <span className={BOTTOM_NAVIGATION_LABEL_CLASSNAME}>
+                      {item.label}
+                    </span>
+                  </a>
+                ) : (
+                  <button
+                    {...sharedTriggerProps}
+                    type="button"
+                    aria-pressed={isActive ? true : undefined}
+                    disabled={isDisabled}
+                    onClick={() => handleSelect(item)}
+                  >
+                    <span className={BOTTOM_NAVIGATION_ICON_CLASSNAME}>
+                      {item.icon}
+                    </span>
+                    <span className={BOTTOM_NAVIGATION_LABEL_CLASSNAME}>
+                      {item.label}
+                    </span>
+                  </button>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+    );
+  },
+);
+
+BottomNavigation.displayName = "BottomNavigation";
+
+export { BottomNavigation };

package/src/components/navigation/markup/mobile/index.ts

@@ -0,0 +1 @@
+export { BottomNavigation } from "./BottomNavigation";

package/src/components/navigation/markup/web/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(navigation/web): 플랫폼 확정 후 구현을 추가한다.
+ */
+export {};

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

@@ -0,0 +1,133 @@
+@use "@uniai-fe/uds-foundation/css";
+
+:where(.radix-themes, .theme-root, :root) {
+  --theme-navigation-height: 86px;
+  --theme-navigation-padding-inline: 32px;
+  --theme-navigation-padding-block-start: 8px;
+  --theme-navigation-padding-block-end: 20px;
+  --theme-navigation-item-gap: 2px;
+  --theme-navigation-icon-size: 24px;
+  --theme-navigation-label-font-size: 12px;
+  --theme-navigation-label-line-height: 1.4;
+  --theme-navigation-label-font-weight: 500;
+  --theme-navigation-label-letter-spacing: -0.12px;
+  --theme-navigation-bg: var(--color-common-100, #ffffff);
+  --theme-navigation-border: var(--color-border-standard-assistive, #e4e5e7);
+  --theme-navigation-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
+  --theme-navigation-color: var(--color-label-strong, #3d3f43);
+  --theme-navigation-color-active: var(--color-primary-default, #0061ff);
+  --theme-navigation-color-disabled: var(--color-label-disabled, #c5c6cc);
+}
+
+.bottom-navigation {
+  width: 100%;
+  position: relative;
+  z-index: 10;
+  background-color: var(--theme-navigation-bg);
+  border-top: 1px solid var(--theme-navigation-border);
+  box-shadow: var(--theme-navigation-shadow, 0 -4px 16px rgba(0, 0, 0, 0.04));
+  padding-inline: var(--theme-navigation-padding-inline);
+  padding-block-start: var(--theme-navigation-padding-block-start);
+  padding-block-end: max(
+    var(--theme-navigation-padding-block-end),
+    env(safe-area-inset-bottom, 0px)
+  );
+  min-height: var(--theme-navigation-height);
+}
+
+.bottom-navigation[data-fixed="true"] {
+  position: fixed;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 20;
+}
+
+.bottom-navigation-list {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.bottom-navigation-item {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.bottom-navigation-trigger {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--theme-navigation-item-gap);
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  appearance: none;
+  text-decoration: none;
+  color: var(--theme-navigation-color);
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: color 0.16s ease;
+}
+
+.bottom-navigation-trigger[data-active="true"] {
+  color: var(--theme-navigation-color-active);
+}
+
+.bottom-navigation-trigger[data-disabled="true"],
+.bottom-navigation-trigger:disabled {
+  color: var(--theme-navigation-color-disabled);
+  cursor: default;
+  pointer-events: none;
+}
+
+.bottom-navigation-trigger:focus-visible {
+  outline: none;
+  border-radius: var(--theme-radius-large-1, 12px);
+  box-shadow: 0 0 0 2px var(--color-primary-focus, rgba(0, 97, 255, 0.2));
+}
+
+.navigation-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--theme-navigation-icon-size);
+  height: var(--theme-navigation-icon-size);
+  color: currentColor;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* SVG fill/stroke를 currentColor로 맞춰 selected 컬러만 제어한다. */
+  svg [fill]:not([fill="none"]) {
+    fill: currentColor;
+  }
+
+  svg [stroke]:not([stroke="none"]) {
+    stroke: currentColor;
+  }
+}
+
+.navigation-item-label {
+  display: block;
+  font-size: var(--theme-navigation-label-font-size);
+  font-weight: var(--theme-navigation-label-font-weight);
+  line-height: var(--theme-navigation-label-line-height);
+  letter-spacing: var(--theme-navigation-label-letter-spacing);
+  color: currentColor;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}

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

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+export type NavigationItemKey = string;
+
+interface NavigationItemBase {
+  key: NavigationItemKey;
+  label: string;
+  icon: ReactNode;
+  disabled?: boolean;
+  ariaLabel?: string;
+}
+
+export type NavigationHrefItem = NavigationItemBase & {
+  href: string;
+  onSelect?: never;
+};
+
+export type NavigationActionItem = NavigationItemBase & {
+  onSelect: (key: NavigationItemKey) => void;
+  href?: never;
+};
+
+export type NavigationItem = NavigationHrefItem | NavigationActionItem;
+
+export interface BottomNavigationProps extends Omit<
+  ComponentPropsWithoutRef<"nav">,
+  "children"
+> {
+  items: NavigationItem[];
+  activeKey: NavigationItemKey | null;
+  onActiveChange?: (key: NavigationItemKey) => void;
+  ariaLabel?: string;
+  fixed?: boolean;
+}
+
+export interface NavigationClassNameOptions {
+  className?: string;
+}

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

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import type {
+  NavigationClassNameOptions,
+  NavigationHrefItem,
+  NavigationItem,
+} from "../types";
+
+export const BOTTOM_NAVIGATION_CLASSNAME = "bottom-navigation";
+export const BOTTOM_NAVIGATION_LIST_CLASSNAME = `${BOTTOM_NAVIGATION_CLASSNAME}-list`;
+export const BOTTOM_NAVIGATION_ITEM_CLASSNAME = `${BOTTOM_NAVIGATION_CLASSNAME}-item`;
+export const BOTTOM_NAVIGATION_TRIGGER_CLASSNAME = `${BOTTOM_NAVIGATION_CLASSNAME}-trigger`;
+export const BOTTOM_NAVIGATION_ICON_CLASSNAME = "navigation-item-icon";
+export const BOTTOM_NAVIGATION_LABEL_CLASSNAME = "navigation-item-label";
+
+export const composeNavigationClassName = ({
+  className,
+}: NavigationClassNameOptions = {}) =>
+  clsx(BOTTOM_NAVIGATION_CLASSNAME, className);
+
+export const isHrefNavigationItem = (
+  item: NavigationItem,
+): item is NavigationHrefItem =>
+  "href" in item && typeof item.href === "string";

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

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

package/src/components/pagination/index.scss

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

package/src/components/pagination/index.tsx

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

package/src/components/pagination/markup/Carousel.tsx

@@ -0,0 +1,76 @@
+import { forwardRef } from "react";
+import type { PaginationCarouselProps } from "../types";
+import {
+  PAGINATION_BUTTON_CLASSNAME,
+  PAGINATION_ITEM_CLASSNAME,
+  composePaginationClassName,
+  createPaginationPages,
+  normalizePaginationState,
+} from "../utils";
+
+/**
+ * Carousel indicator Pagination. 점 형태로 현재 위치만 표시한다.
+ * @component
+ * @param {PaginationCarouselProps} props
+ * @param {number} props.total 전체 step 수.
+ * @param {number} [props.current=1] 현재 step index(1-indexed).
+ * @param {(page: number) => void} [props.onPageChange]
+ *  전달 시 dot를 클릭해 이동할 수 있고, 생략하면 모든 dot가 disabled 된다.
+ */
+const PaginationCarousel = forwardRef<
+  HTMLUListElement,
+  PaginationCarouselProps
+>(({ total, current = 1, onPageChange, className, ...restProps }, ref) => {
+  const { total: normalizedTotal, current: normalizedCurrent } =
+    normalizePaginationState({ total, current });
+  const pages = createPaginationPages(normalizedTotal);
+  const allowInteraction = typeof onPageChange === "function";
+  const rootClassName = composePaginationClassName({
+    variant: "carousel",
+    className,
+  });
+
+  const handleClick = (page: number) => {
+    if (!allowInteraction || page === normalizedCurrent) {
+      return;
+    }
+    onPageChange?.(page);
+  };
+
+  return (
+    <ul
+      {...restProps}
+      ref={ref}
+      className={rootClassName}
+      data-variant="carousel"
+      data-interactive={allowInteraction ? "true" : "false"}
+    >
+      {pages.map(page => {
+        const isActive = page === normalizedCurrent;
+        return (
+          <li
+            key={page}
+            className={PAGINATION_ITEM_CLASSNAME}
+            data-active={isActive ? "true" : undefined}
+          >
+            <button
+              type="button"
+              className={PAGINATION_BUTTON_CLASSNAME}
+              data-active={isActive ? "true" : undefined}
+              aria-label={`Step ${page}`}
+              disabled={!allowInteraction}
+              tabIndex={allowInteraction ? 0 : -1}
+              onClick={allowInteraction ? () => handleClick(page) : undefined}
+            >
+              <span className="pagination-dot" aria-hidden="true" />
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+});
+
+PaginationCarousel.displayName = "PaginationCarousel";
+
+export { PaginationCarousel };

package/src/components/pagination/markup/Count.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from "react";
+import type { PaginationCountProps } from "../types";
+import {
+  PAGINATION_BUTTON_CLASSNAME,
+  composePaginationClassName,
+  normalizePaginationState,
+} from "../utils";
+
+/**
+ * Count(step) indicator; `1/5` 형태로 현재 위치만 표시한다.
+ * @component
+ * @param {PaginationCountProps} props
+ * @param {number} props.total 전체 step 수.
+ * @param {number} [props.current=1] 현재 step position.
+ * @param {"small" | "xsmall"} [props.size="small"] 높이/타이포 크기 옵션.
+ */
+const PaginationCount = forwardRef<HTMLDivElement, PaginationCountProps>(
+  ({ total, current = 1, size = "small", className, ...restProps }, ref) => {
+    const { total: normalizedTotal, current: normalizedCurrent } =
+      normalizePaginationState({ total, current });
+    const rootClassName = composePaginationClassName({
+      variant: "count",
+      countSize: size,
+      className,
+    });
+
+    return (
+      <div
+        {...restProps}
+        ref={ref}
+        className={rootClassName}
+        data-variant="count"
+        data-interactive="false"
+      >
+        <button
+          type="button"
+          className={PAGINATION_BUTTON_CLASSNAME}
+          disabled
+          aria-label={`Step ${normalizedCurrent} of ${normalizedTotal}`}
+        >
+          <span className="pagination-count-current">{normalizedCurrent}</span>
+          <span className="pagination-count-divider" aria-hidden="true">
+            /
+          </span>
+          <span className="pagination-count-total">{normalizedTotal}</span>
+        </button>
+      </div>
+    );
+  },
+);
+
+PaginationCount.displayName = "PaginationCount";
+
+export { PaginationCount };

package/src/components/pagination/markup/Pagination.tsx

@@ -0,0 +1,83 @@
+import { forwardRef } from "react";
+import type { PaginationProps } from "../types";
+import {
+  PAGINATION_BUTTON_CLASSNAME,
+  PAGINATION_ITEM_CLASSNAME,
+  composePaginationClassName,
+  createPaginationPages,
+  normalizePaginationState,
+} from "../utils";
+
+/**
+ * 숫자 페이지형 Pagination.
+ * @component
+ * @param {PaginationProps} props
+ * @param {number} props.total 전체 페이지 개수(1 이상으로 자동 보정).
+ * @param {number} [props.current=1] 현재 페이지. total 범위를 벗어나면 자동 조정된다.
+ * @param {(page: number) => void} [props.onPageChange]
+ *  페이지 버튼 클릭 핸들러. 전달되지 않으면 모든 버튼이 disabled 처리되어 cursor가 제거된다.
+ * @example
+ * ```tsx
+ * <Pagination total={10} current={3} onPageChange={setPage} />
+ * ```
+ */
+const Pagination = forwardRef<HTMLUListElement, PaginationProps>(
+  ({ total, current = 1, onPageChange, className, ...restProps }, ref) => {
+    const { total: normalizedTotal, current: normalizedCurrent } =
+      normalizePaginationState({ total, current });
+    const pages = createPaginationPages(normalizedTotal);
+    const allowInteraction = typeof onPageChange === "function";
+    const rootClassName = composePaginationClassName({
+      variant: "list",
+      className,
+    });
+
+    const handleClick = (page: number) => {
+      if (!allowInteraction || page === normalizedCurrent) {
+        return;
+      }
+      onPageChange?.(page);
+    };
+
+    return (
+      <ul
+        {...restProps}
+        ref={ref}
+        className={rootClassName}
+        data-variant="list"
+        data-interactive={allowInteraction ? "true" : "false"}
+      >
+        {pages.map(page => {
+          const isActive = page === normalizedCurrent;
+          return (
+            <li
+              key={page}
+              className={PAGINATION_ITEM_CLASSNAME}
+              data-active={isActive ? "true" : undefined}
+            >
+              <button
+                type="button"
+                className={PAGINATION_BUTTON_CLASSNAME}
+                data-active={isActive ? "true" : undefined}
+                data-page={page}
+                aria-current={isActive ? "page" : undefined}
+                aria-label={`Page ${page}`}
+                disabled={!allowInteraction}
+                tabIndex={allowInteraction ? 0 : -1}
+                onClick={allowInteraction ? () => handleClick(page) : undefined}
+              >
+                <span className="pagination-number" data-value={page}>
+                  {page}
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  },
+);
+
+Pagination.displayName = "Pagination";
+
+export { Pagination };