@uniai-fe/uds-primitives 0.0.1

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

@@ -0,0 +1,3 @@
+export { Pagination } from "./Pagination";
+export { PaginationCarousel } from "./Carousel";
+export { PaginationCount } from "./Count";

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

@@ -0,0 +1,155 @@
+@use "@uniai-fe/uds-foundation/css";
+
+/* Pagination native 구현 스타일 */
+
+.pagination {
+  --pagination-gap: var(--spacing-gap-2, 8px);
+  --pagination-number-height: var(--theme-size-small-2, 24px);
+  --pagination-number-min-width: var(--theme-size-small-2, 24px);
+  --pagination-number-radius: var(--theme-radius-medium-1, 6px);
+  --pagination-color-active-bg: var(--color-cool-gray-10, #18191b);
+  --pagination-color-active-label: var(--color-common-100, #ffffff);
+  --pagination-color-inactive-label: var(--color-label-alternative, #afb1b6);
+  --pagination-dot-size: 8px;
+  --pagination-dot-bg: var(--color-cool-gray-85, #d2d3d7);
+  --pagination-dot-active-bg: var(--color-primary-default, #0061ff);
+  --pagination-carousel-height: 8px;
+  --pagination-carousel-dot-width: 8px;
+  --pagination-carousel-active-width: 20px;
+  --pagination-count-bg: var(--color-cool-gray-10, #18191b);
+  --pagination-count-divider: var(--color-common-100, #ffffff);
+  --pagination-count-total: var(--color-label-alternative, #afb1b6);
+
+  display: inline-flex;
+  gap: var(--pagination-gap);
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.pagination[data-interactive="false"] .pagination-button,
+.pagination-button:disabled {
+  cursor: default;
+}
+
+.pagination-item {
+  list-style: none;
+}
+
+.pagination-button {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  transition:
+    background-color 0.16s ease,
+    color 0.16s ease,
+    opacity 0.16s ease;
+}
+
+.pagination--variant-list {
+  gap: var(--spacing-gap-1, 4px);
+}
+
+.pagination--variant-list .pagination-button {
+  min-width: var(--pagination-number-min-width);
+  height: var(--pagination-number-height);
+  padding-inline: var(--spacing-padding-2, 8px);
+  border-radius: var(--pagination-number-radius);
+  background-color: transparent;
+  color: var(--pagination-color-inactive-label);
+  font-size: var(--font-label-medium-size, 12px);
+  font-weight: var(--font-label-medium-weight, 400);
+  line-height: var(--font-label-medium-line-height, 1.5);
+}
+
+.pagination[data-interactive="true"]
+  .pagination--variant-list
+  .pagination-button:not([data-active="true"]):hover {
+  background-color: var(--color-bg-alternative-cool-gray, #f0f1f5);
+  color: var(--color-label-strong, #5b5c60);
+}
+
+.pagination--variant-list .pagination-button[data-active="true"] {
+  background-color: var(--pagination-color-active-bg);
+  color: var(--pagination-color-active-label);
+}
+
+.pagination-number {
+  min-width: 1ch;
+  text-align: center;
+}
+
+.pagination--variant-carousel {
+  gap: 5px;
+  min-height: var(--pagination-carousel-height);
+  align-items: center;
+}
+
+.pagination--variant-carousel .pagination-button {
+  width: auto;
+  height: var(--pagination-carousel-height);
+  padding: 0;
+}
+
+.pagination--variant-carousel .pagination-dot {
+  display: inline-flex;
+  width: var(--pagination-carousel-dot-width);
+  height: var(--pagination-carousel-height);
+  border-radius: calc(var(--pagination-carousel-height) / 2);
+  background-color: var(--pagination-dot-bg);
+  transition:
+    width 0.16s ease,
+    background-color 0.16s ease;
+}
+
+.pagination--variant-carousel
+  .pagination-button[data-active="true"]
+  .pagination-dot {
+  width: var(--pagination-carousel-active-width);
+  background-color: var(--pagination-dot-active-bg);
+}
+
+.pagination--variant-count {
+  gap: 0;
+}
+
+.pagination--variant-count .pagination-button {
+  border-radius: var(--theme-radius-large-2, 16px);
+  padding-inline: var(--spacing-padding-4, 16px);
+  background-color: var(--pagination-count-bg);
+  color: var(--pagination-color-active-label);
+  font-weight: var(--font-label-medium-weight, 400);
+  line-height: 1.5;
+}
+
+.pagination--variant-count.pagination--count-size-small .pagination-button {
+  height: var(--theme-size-small-2, 24px);
+  font-size: var(--font-label-medium-size, 12px);
+}
+
+.pagination--variant-count.pagination--count-size-xsmall .pagination-button {
+  height: var(--theme-size-small-1, 20px);
+  font-size: var(--font-label-small-size, 11px);
+}
+
+.pagination-count-current {
+  color: var(--pagination-color-active-label);
+}
+
+.pagination-count-divider {
+  margin-inline: var(--spacing-gap-1, 4px);
+  color: var(--pagination-count-divider);
+}
+
+.pagination-count-total {
+  color: var(--pagination-count-total);
+}

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

@@ -0,0 +1,68 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+export const PAGINATION_VARIANTS = ["list", "carousel", "count"] as const;
+export const PAGINATION_COUNT_SIZES = ["small", "xsmall"] as const;
+
+export type PaginationVariant = (typeof PAGINATION_VARIANTS)[number];
+export type PaginationCountSize = (typeof PAGINATION_COUNT_SIZES)[number];
+
+type NativeListProps = ComponentPropsWithoutRef<"ul">;
+type NativeDivProps = ComponentPropsWithoutRef<"div">;
+
+interface PaginationBaseProps {
+  /**
+   * 전체 페이지/step 개수. 최소 1 이상으로 보정된다.
+   */
+  total: number;
+  /**
+   * 현재 활성 페이지(1-indexed). total 범위 밖이면 자동으로 보정된다.
+   */
+  current?: number;
+}
+
+interface PaginationInteractiveProps {
+  /**
+   * 페이지 변경 핸들러. 제공되지 않으면 클릭이 비활성화된다.
+   */
+  onPageChange?: (page: number) => void;
+}
+
+/**
+ * 숫자 페이지용 Pagination props
+ */
+export interface PaginationProps
+  extends
+    Omit<NativeListProps, "children" | "onChange">,
+    PaginationBaseProps,
+    PaginationInteractiveProps {}
+
+/**
+ * Carousel 점 indicator props
+ */
+export interface PaginationCarouselProps
+  extends
+    Omit<NativeListProps, "children" | "onChange">,
+    PaginationBaseProps,
+    PaginationInteractiveProps {}
+
+/**
+ * Count(step) indicator props
+ */
+export interface PaginationCountProps
+  extends Omit<NativeDivProps, "children">, PaginationBaseProps {
+  /**
+   * count variant 전용 크기 옵션.
+   */
+  size?: PaginationCountSize;
+}
+
+export interface PaginationClassNameOptions {
+  variant: PaginationVariant;
+  countSize?: PaginationCountSize;
+  className?: string;
+}
+
+export interface PaginationNormalizationResult {
+  total: number;
+  current: number;
+}

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

@@ -0,0 +1,58 @@
+import clsx from "clsx";
+import type {
+  PaginationClassNameOptions,
+  PaginationNormalizationResult,
+} from "../types";
+
+const PAGINATION_CLASSNAME = "pagination";
+const PAGINATION_ITEM_CLASSNAME = "pagination-item";
+const PAGINATION_BUTTON_CLASSNAME = "pagination-button";
+
+/**
+ * pagination 루트 className composer
+ */
+const composePaginationClassName = ({
+  variant,
+  countSize,
+  className,
+}: PaginationClassNameOptions) =>
+  clsx(
+    PAGINATION_CLASSNAME,
+    `${PAGINATION_CLASSNAME}--variant-${variant}`,
+    variant === "count" && countSize
+      ? `${PAGINATION_CLASSNAME}--count-size-${countSize}`
+      : null,
+    className,
+  );
+
+/**
+ * total/current 값을 보정해 최소 1~total 범위를 유지한다.
+ */
+const normalizePaginationState = ({
+  total,
+  current = 1,
+}: {
+  total: number;
+  current?: number;
+}): PaginationNormalizationResult => {
+  const normalizedTotal = Math.max(1, Math.floor(total));
+  return {
+    total: normalizedTotal,
+    current: Math.min(Math.max(1, Math.floor(current)), normalizedTotal),
+  };
+};
+
+/**
+ * 페이지 리스트 생성 helper
+ */
+const createPaginationPages = (total: number) =>
+  Array.from({ length: total }, (_, index) => index + 1);
+
+export {
+  PAGINATION_BUTTON_CLASSNAME,
+  PAGINATION_CLASSNAME,
+  PAGINATION_ITEM_CLASSNAME,
+  composePaginationClassName,
+  createPaginationPages,
+  normalizePaginationState,
+};

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

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

package/src/components/radio/index.scss

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

package/src/components/radio/index.tsx

@@ -0,0 +1,7 @@
+/**
+ * radio 카테고리 배럴; markup과 타입 exports를 노출한다.
+ */
+import "./index.scss";
+
+export * from "./markup";
+export type * from "./types";

package/src/components/radio/markup/Radio.tsx

@@ -0,0 +1,121 @@
+import clsx from "clsx";
+import { forwardRef, useId } from "react";
+import {
+  Indicator as RadixRadioIndicator,
+  Item as RadixRadioItem,
+} from "@radix-ui/react-radio-group";
+import type { RadioFieldProps, RadioProps } from "../types";
+
+const RADIO_CLASSNAME = "radio";
+const RADIO_INDICATOR_CLASSNAME = "radio-indicator";
+const RADIO_FIELD_CLASSNAME = "radio-field";
+const RADIO_LABEL_WRAPPER_CLASSNAME = "radio-label-wrapper";
+const RADIO_LABEL_TEXT_CLASSNAME = "radio-label-text";
+const RADIO_HELPER_CLASSNAME = "radio-helper";
+
+/**
+ * Radio component; Radix RadioGroup item thin wrapper
+ * @component
+ * @param {RadioProps} props
+ * @param {"medium" | "large"} [props.size]
+ * @example
+ * <Radio value="option" />
+ */
+export const Radio = forwardRef<HTMLButtonElement, RadioProps>(function Radio(
+  { size = "medium", className, disabled, ...restProps },
+  ref,
+) {
+  return (
+    <RadixRadioItem
+      ref={ref}
+      className={clsx(RADIO_CLASSNAME, className)}
+      data-size={size}
+      data-disabled={disabled ? "true" : undefined}
+      disabled={disabled}
+      {...restProps}
+    >
+      {/* indicator가 기본/선택 상태 모두에서 렌더되도록 forceMount를 설정한다. */}
+      <RadixRadioIndicator
+        forceMount
+        className={RADIO_INDICATOR_CLASSNAME}
+        aria-hidden
+      />
+    </RadixRadioItem>
+  );
+});
+
+/**
+ * RadioField component; label/helper wrapper for single radioItem
+ * @component
+ * @param {RadioFieldProps} props
+ * @param {"medium" | "large"} [props.size]
+ * @example
+ * <RadioField label="옵션" helperText="필수" value="option" />
+ */
+export const RadioField = forwardRef<HTMLButtonElement, RadioFieldProps>(
+  function RadioField(
+    {
+      label,
+      helperText,
+      helperTextProps,
+      labelProps,
+      fieldClassName,
+      labelWrapperClassName,
+      size = "medium",
+      id,
+      disabled,
+      ...restProps
+    },
+    ref,
+  ) {
+    const generatedId = useId();
+    const radioId = id ?? generatedId;
+    const labelId = label ? `${radioId}-label` : undefined;
+    const helperId = helperText ? `${radioId}-helper` : undefined;
+
+    // label/helper를 포함해 radio의 접근성 데이터를 연결한다.
+    return (
+      <div
+        className={clsx(RADIO_FIELD_CLASSNAME, fieldClassName)}
+        data-size={size}
+        data-disabled={disabled ? "true" : undefined}
+      >
+        <label
+          htmlFor={radioId}
+          {...labelProps}
+          className={clsx(
+            RADIO_LABEL_WRAPPER_CLASSNAME,
+            labelWrapperClassName,
+            labelProps?.className,
+          )}
+          data-disabled={disabled ? "true" : undefined}
+          aria-disabled={disabled ? "true" : undefined}
+        >
+          <Radio
+            {...restProps}
+            id={radioId}
+            size={size}
+            disabled={disabled}
+            aria-labelledby={labelId}
+            aria-describedby={helperId}
+            ref={ref}
+          />
+          {label ? (
+            <span id={labelId} className={RADIO_LABEL_TEXT_CLASSNAME}>
+              {label}
+            </span>
+          ) : null}
+        </label>
+        {helperText ? (
+          <p
+            id={helperId}
+            {...helperTextProps}
+            className={clsx(RADIO_HELPER_CLASSNAME, helperTextProps?.className)}
+          >
+            {helperText}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);

package/src/components/radio/markup/RadioCard.tsx

@@ -0,0 +1,68 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import {
+  Indicator as RadixRadioIndicator,
+  Item as RadixRadioItem,
+} from "@radix-ui/react-radio-group";
+import type { RadioCardProps } from "../types";
+
+const RADIO_CARD_CLASSNAME = "radio-card";
+const RADIO_CARD_CONTENT_CLASSNAME = "radio-card-content";
+const RADIO_CARD_TITLE_ROW_CLASSNAME = "radio-card-title-row";
+const RADIO_CARD_TITLE_CLASSNAME = "radio-card-title";
+const RADIO_CARD_BADGE_CLASSNAME = "radio-card-badge";
+const RADIO_CARD_DESCRIPTION_CLASSNAME = "radio-card-description";
+const RADIO_CARD_INDICATOR_WRAPPER_CLASSNAME = "radio-card-indicator-wrapper";
+const RADIO_CARD_INDICATOR_CLASSNAME = "radio-card-indicator";
+
+/**
+ * RadioCard component; entire card acts as radio trigger
+ * @component
+ * @param {RadioCardProps} props
+ * @example
+ * <RadioCard title="행복1농장" value="farm-1" />
+ */
+export const RadioCard = forwardRef<HTMLButtonElement, RadioCardProps>(
+  function RadioCard(
+    {
+      title,
+      description,
+      badge,
+      className,
+      size = "medium",
+      disabled,
+      ...restProps
+    },
+    ref,
+  ) {
+    return (
+      <RadixRadioItem
+        ref={ref}
+        className={clsx(RADIO_CARD_CLASSNAME, className)}
+        data-size={size}
+        data-disabled={disabled ? "true" : undefined}
+        disabled={disabled}
+        {...restProps}
+      >
+        <div className={RADIO_CARD_CONTENT_CLASSNAME}>
+          <div className={RADIO_CARD_TITLE_ROW_CLASSNAME}>
+            <span className={RADIO_CARD_TITLE_CLASSNAME}>{title}</span>
+            {badge ? (
+              <span className={RADIO_CARD_BADGE_CLASSNAME}>{badge}</span>
+            ) : null}
+          </div>
+          {description ? (
+            <p className={RADIO_CARD_DESCRIPTION_CLASSNAME}>{description}</p>
+          ) : null}
+        </div>
+        <div className={RADIO_CARD_INDICATOR_WRAPPER_CLASSNAME}>
+          <RadixRadioIndicator
+            forceMount
+            className={RADIO_CARD_INDICATOR_CLASSNAME}
+            aria-hidden
+          />
+        </div>
+      </RadixRadioItem>
+    );
+  },
+);

package/src/components/radio/markup/RadioCardGroup.tsx

@@ -0,0 +1,75 @@
+import clsx from "clsx";
+import { forwardRef, useState } from "react";
+import * as RadixRadioGroup from "@radix-ui/react-radio-group";
+import type { ElementRef } from "react";
+import { RadioCard } from "./RadioCard";
+import type { RadioCardGroupProps } from "../types";
+
+const RADIO_CARD_GROUP_CLASSNAME = "radio-card-group";
+
+/**
+ * RadioCardGroup component; renders RadioCard list with internal Radix Root
+ * @component
+ * @param {RadioCardGroupProps} props
+ * @example
+ * <RadioCardGroup options={[{ id: "farm-1", title: "농장" }]} value="farm-1" />
+ */
+export const RadioCardGroup = forwardRef<
+  ElementRef<typeof RadixRadioGroup.Root>,
+  RadioCardGroupProps
+>(function RadioCardGroup(
+  {
+    options,
+    size = "medium",
+    highlightedValue,
+    renderBadge,
+    className,
+    value,
+    defaultValue,
+    onValueChange,
+    ...restProps
+  },
+  ref,
+) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+
+  const handleValueChange = (nextValue: string) => {
+    setInternalValue(nextValue);
+    onValueChange?.(nextValue);
+  };
+
+  const effectiveValue = value ?? internalValue ?? defaultValue;
+
+  return (
+    <RadixRadioGroup.Root
+      ref={ref}
+      className={clsx(RADIO_CARD_GROUP_CLASSNAME, className)}
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={handleValueChange}
+      {...restProps}
+    >
+      {options.map(option => {
+        const isSelected = effectiveValue === option.id;
+        const isHighlighted = highlightedValue === option.id;
+
+        const badgeNode = renderBadge
+          ? renderBadge({ option, isSelected, isHighlighted })
+          : option.badge;
+
+        return (
+          <RadioCard
+            key={option.id}
+            value={option.id}
+            size={option.size ?? size}
+            title={option.title}
+            description={option.description}
+            badge={badgeNode}
+            disabled={option.disabled}
+            className={option.className}
+          />
+        );
+      })}
+    </RadixRadioGroup.Root>
+  );
+});

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

@@ -0,0 +1,3 @@
+export { Radio, RadioField } from "./Radio";
+export { RadioCard } from "./RadioCard";
+export { RadioCardGroup } from "./RadioCardGroup";