@tide-tds/components 0.1.0 → 0.2.0

package/dist/Button.d.ts

@@ -0,0 +1,42 @@
+import { FillVariant, Role, Size } from "./types.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** Button의 채움 방식. 4개를 모두 받는다. */
+type ButtonVariant = Extract<FillVariant, "solid" | "subtle" | "outline" | "ghost">;
+/** Button의 size. 공통 size 4개를 모두 받는다. */
+type ButtonSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
+export interface ButtonProps extends Omit<ComponentProps<"button">, "color"> {
+  /** 채움 방식. 기본값은 `solid`다. */
+  variant?: ButtonVariant;
+  /**
+   * Role. Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role을 받는다. 기본값은 `primary`다.
+   * 색 계열 이름(`blue` 등)은 받지 않는다. 행동의 뜻을 색으로 전하기 때문이다(ADR 0016).
+   * 루트에 `data-color`로 붙어 accent 색을 정한다. 바깥 요소의 색을 물려받지 않는다.
+   */
+  color?: Role;
+  /** 높이 `xs` 24px, `sm` 32px, `md` 40px, `lg` 48px. 기본값은 `md`다. */
+  size?: ButtonSize;
+  /** 텍스트 앞 아이콘. 장식용으로 숨겨지고 size에 맞는 크기가 된다. 다른 라이브러리의 아이콘도 받는다. */
+  startIcon?: ReactNode;
+  /** 텍스트 뒤 아이콘. 장식용으로 숨겨지고 size에 맞는 크기가 된다. */
+  endIcon?: ReactNode;
+  /**
+   * 로딩 중. 앞 아이콘 자리에 Spinner를 보이고 클릭을 막는다.
+   * 포커스는 유지하고 `aria-disabled="true"`와 `data-loading`을 붙인다.
+   */
+  loading?: boolean;
+  /** 로딩 중에 버튼 이름 뒤에 붙는 텍스트. 화면에는 보이지 않는다. 기본값은 `"로딩 중"`이다. */
+  loadingLabel?: string;
+  /** 누를 때 줄어드는 반응(scale 0.96)을 끈다. 움직임 줄이기 설정에서는 이 값과 관계없이 줄어들지 않는다. */
+  noPressScale?: boolean;
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<Link href="/x" />}`.
+   * props, ref, className을 그 요소에 병합한다. `button`이 아닌 요소의 `disabled`는 `aria-disabled`로 바뀐다.
+   */
+  render?: ReactElement;
+}
+/**
+ * 누르면 동작을 실행하는 버튼. 채움 방식(`variant`) × Role(`color`) × `size`로 모양을 고른다.
+ * 링크로 렌더해야 하면 `render={<Link href="/x" />}`를 쓴다.
+ */
+export declare function Button({ variant, color, size, startIcon, endIcon, loading, loadingLabel, noPressScale, render, disabled, type, children, onClick, ...props }: ButtonProps): ReactElement;
+export {};

package/dist/Button.js

@@ -0,0 +1,76 @@
+"use client";
+
+import { pressableBaseClass, pressableState } from "./pressable.js";
+import { renderElement } from "./render.js";
+import { Spinner } from "./Spinner.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// src/Button.tsx
+/** 높이, 좌우 padding, 아이콘과 텍스트 사이 간격, 텍스트 스타일(spec size 표). radius는 모든 size에서 `md`다. */
+const sizeClass = {
+	xs: "h-6 gap-1 px-2 text-label-sm",
+	sm: "h-8 gap-1.5 px-3 text-label-sm",
+	md: "h-10 gap-2 px-4 text-label-md",
+	lg: "h-12 gap-2 px-5 text-label-lg"
+};
+/** 텍스트 옆 아이콘 크기(spec 아이콘 크기 규칙). 감싼 span의 크기이고 안의 요소가 꽉 채운다. */
+const iconSizeClass = {
+	xs: "size-3.5",
+	sm: "size-3.5",
+	md: "size-4",
+	lg: "size-5"
+};
+function Icon({ size, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: `inline-flex shrink-0 items-center justify-center *:size-full ${iconSizeClass[size]}`,
+		children
+	});
+}
+/**
+* 누르면 동작을 실행하는 버튼. 채움 방식(`variant`) × Role(`color`) × `size`로 모양을 고른다.
+* 링크로 렌더해야 하면 `render={<Link href="/x" />}`를 쓴다.
+*/
+function Button({ variant = "solid", color = "primary", size = "md", startIcon, endIcon, loading = false, loadingLabel = "로딩 중", noPressScale = false, render, disabled = false, type, children, onClick, ...props }) {
+	const state = pressableState({
+		variant,
+		color,
+		disabled,
+		loading,
+		noPressScale,
+		render,
+		type,
+		onClick,
+		ariaDisabled: props["aria-disabled"]
+	});
+	const { showSpinner } = state;
+	const label = children ?? (render?.props)?.children;
+	const rootProps = {
+		...props,
+		...state.rootProps,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			showSpinner ? /* @__PURE__ */ jsx(Spinner, {
+				size,
+				"aria-hidden": "true"
+			}) : startIcon != null ? /* @__PURE__ */ jsx(Icon, {
+				size,
+				children: startIcon
+			}) : null,
+			label,
+			endIcon != null ? /* @__PURE__ */ jsx(Icon, {
+				size,
+				children: endIcon
+			}) : null,
+			showSpinner ? /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel }) : null
+		] })
+	};
+	return renderElement({
+		defaultElement: "button",
+		render,
+		baseClassName: `${pressableBaseClass} ${sizeClass[size]} ${state.className}`,
+		props: rootProps
+	});
+}
+
+export { Button };

package/dist/Checkbox.d.ts

@@ -0,0 +1,30 @@
+import { ChoiceSize } from "./choice-style.js";
+import { Role } from "./types.js";
+import { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
+export interface CheckboxProps extends Omit<ComponentProps<"input">, "type" | "size" | "color" | "children" | "className" | "style"> {
+  /** 상자 옆에 보이는 label. 체크박스의 이름이 된다. 없으면 `aria-label`을 준다. */
+  children?: ReactNode;
+  /** 상자 16px·글자 14px(`sm`) 또는 상자 20px·글자 16px(`md`). 누르는 영역은 둘 다 24×24px이다. 기본값은 `md`다. */
+  size?: ChoiceSize;
+  /** 체크했을 때 상자 색(Role). 루트에 `data-color`로 붙는다. 기본값은 `primary`다. */
+  color?: Role;
+  /**
+   * 일부만 선택된 상태(「전체 선택」 등). 체크 대신 가로줄이 보이고 보조 기술은 「일부 선택」으로 읽는다.
+   * 누르면 브라우저가 이 상태를 지우므로, 앱이 다시 계산해 넘긴다.
+   */
+  indeterminate?: boolean;
+  /**
+   * 오류 상태. input에 `aria-invalid="true"`와 `data-invalid`가 붙고 경계가 danger 색이 된다.
+   * Field·CheckboxGroup 안에서는 그 값을 따르고, 여기에 준 값이 이긴다.
+   */
+  invalid?: boolean;
+  /** 루트 label의 class. 사용자 class가 기본 class를 이긴다. 상자 모양은 바꾸지 않는다(`size`·`color`가 맡는다). */
+  className?: string;
+  /** 루트 label의 style */
+  style?: CSSProperties;
+}
+/**
+ * 네이티브 체크박스. `checked`/`defaultChecked`/`onChange`를 그대로 받고 form에 그대로 제출된다.
+ * 여러 개를 묶어 이름·설명·오류를 붙이려면 `Field group` 안의 `CheckboxGroup`에 둔다.
+ */
+export declare function Checkbox({ children, size, color, indeterminate, invalid, id, disabled, required, className, style, ref, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }: CheckboxProps): ReactElement;

package/dist/Checkbox.js

@@ -0,0 +1,74 @@
+"use client";
+
+import { CheckboxGroupContext } from "./choice-group.js";
+import { choiceAreaClass, choiceInputClass, choiceMarkClass, choiceRootClass, choiceTextClass } from "./choice-style.js";
+import { cn } from "./cn.js";
+import { useFieldControl } from "./field-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { use, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import { CheckIcon, MinusIcon } from "@tide-tds/icons";
+
+// src/Checkbox.tsx
+/** 상자 크기와 모서리. 체크박스는 radius `sm`(4px)이다. */
+const boxClass = {
+	sm: "size-4 rounded-sm",
+	md: "size-5 rounded-sm"
+};
+/** 상자 안 아이콘 크기(px) */
+const iconSize = {
+	sm: 12,
+	md: 16
+};
+/**
+* 네이티브 체크박스. `checked`/`defaultChecked`/`onChange`를 그대로 받고 form에 그대로 제출된다.
+* 여러 개를 묶어 이름·설명·오류를 붙이려면 `Field group` 안의 `CheckboxGroup`에 둔다.
+*/
+function Checkbox({ children, size = "md", color = "primary", indeterminate = false, invalid, id, disabled, required, className, style, ref, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const group = use(CheckboxGroupContext);
+	const control = useFieldControl({
+		id,
+		invalid: invalid ?? group?.invalid,
+		disabled: disabled ?? group?.disabled,
+		required,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid
+	});
+	const inputRef = useRef(null);
+	useImperativeHandle(ref, () => inputRef.current, []);
+	useLayoutEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+	});
+	return /* @__PURE__ */ jsxs("label", {
+		"data-color": color,
+		"data-disabled": control.disabled ? "" : void 0,
+		"data-invalid": control["data-invalid"],
+		style,
+		className: cn(choiceRootClass, choiceTextClass[size], className),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: choiceAreaClass,
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					...props,
+					...control,
+					ref: inputRef,
+					type: "checkbox",
+					className: cn(boxClass[size], choiceInputClass)
+				}),
+				/* @__PURE__ */ jsx(CheckIcon, {
+					size: iconSize[size],
+					strokeWidth: 3,
+					"data-mark": "check",
+					className: cn(choiceMarkClass, "peer-checked:block peer-indeterminate:hidden")
+				}),
+				/* @__PURE__ */ jsx(MinusIcon, {
+					size: iconSize[size],
+					strokeWidth: 3,
+					"data-mark": "indeterminate",
+					className: cn(choiceMarkClass, "peer-indeterminate:block")
+				})
+			]
+		}), children === void 0 || children === null ? null : /* @__PURE__ */ jsx("span", { children })]
+	});
+}
+
+export { Checkbox };

package/dist/CheckboxGroup.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps, ReactElement } from "react";
+/** 항목을 쌓는 방향 */
+export type ChoiceOrientation = "vertical" | "horizontal";
+export interface CheckboxGroupProps extends ComponentProps<"div"> {
+  /** 항목을 세로(`vertical`)로 쌓거나 가로(`horizontal`)로 늘어놓는다. 기본값은 `vertical`이다. */
+  orientation?: ChoiceOrientation;
+  /**
+   * 오류 상태. 안의 Checkbox마다 `aria-invalid="true"`가 붙고, 묶음에 `data-invalid`가 붙는다.
+   * Field 안에서는 Field의 값을 따르고, 여기에 준 값이 이긴다.
+   */
+  invalid?: boolean;
+  /** 안의 Checkbox를 모두 비활성으로 만든다. Field 안에서는 Field의 값을 따른다. */
+  disabled?: boolean;
+}
+/**
+ * Checkbox 여러 개를 하나의 이름으로 묶는다. `<Field label group>` 안에 두면 label이 묶음의 이름, 설명·오류가
+ * 묶음의 설명이 된다. Field 밖에서는 `aria-label`이나 `aria-labelledby`를 준다.
+ */
+export declare function CheckboxGroup({ orientation, invalid, disabled, id, className, children, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: CheckboxGroupProps): ReactElement;

package/dist/CheckboxGroup.js

@@ -0,0 +1,45 @@
+"use client";
+
+import { CheckboxGroupContext, useChoiceGroup } from "./choice-group.js";
+import { cn } from "./cn.js";
+import { FieldContext } from "./field-context.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/CheckboxGroup.tsx
+/** 방향별 배치. 가로는 줄이 넘치면 다음 줄로 간다. */
+const orientationClass = {
+	vertical: "flex flex-col gap-2",
+	horizontal: "flex flex-row flex-wrap gap-x-6 gap-y-2"
+};
+/**
+* Checkbox 여러 개를 하나의 이름으로 묶는다. `<Field label group>` 안에 두면 label이 묶음의 이름, 설명·오류가
+* 묶음의 설명이 된다. Field 밖에서는 `aria-label`이나 `aria-labelledby`를 준다.
+*/
+function CheckboxGroup({ orientation = "vertical", invalid, disabled, id, className, children, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }) {
+	const connection = useChoiceGroup({
+		id,
+		invalid,
+		disabled,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy
+	});
+	const state = {
+		invalid: connection.invalid,
+		disabled: connection.disabled
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		...props,
+		...connection.rootProps,
+		className: cn(orientationClass[orientation], className),
+		children: /* @__PURE__ */ jsx(FieldContext, {
+			value: null,
+			children: /* @__PURE__ */ jsx(CheckboxGroupContext, {
+				value: state,
+				children
+			})
+		})
+	});
+}
+
+export { CheckboxGroup, orientationClass };

package/dist/Field.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export interface FieldProps extends ComponentProps<"div"> {
+  /** 입력창의 이름이 되는 label. 화면에 보인다. */
+  label: ReactNode;
+  /** 입력창 아래에 보이는 설명. 입력창의 `aria-describedby`로 연결된다. */
+  description?: ReactNode;
+  /** 오류 메시지. 오류 상태일 때만 보이고 입력창의 `aria-describedby`로 연결된다. */
+  error?: ReactNode;
+  /**
+   * 오류 상태. 기본값은 `error`가 있으면 `true`다.
+   * 입력창에 `aria-invalid="true"`와 `data-invalid`가 붙는다. `false`를 주면 `error`가 있어도 숨긴다.
+   */
+  invalid?: boolean;
+  /** 필수 입력. 입력창에 네이티브 `required`가 붙고 label 뒤에 `*`가 보인다(스크린리더는 `required`로 읽는다). */
+  required?: boolean;
+  /** 비활성. 입력창에 네이티브 `disabled`가 붙는다. */
+  disabled?: boolean;
+  /** label이 가리킬 입력창 id. 주지 않으면 자동으로 만든다. 오류 요약에서 `#id`로 링크할 때 쓴다. `group`이면 묶음의 id다. */
+  htmlFor?: string;
+  /**
+   * 안에 둔 것이 묶음(`CheckboxGroup`, `RadioGroup`)일 때 `true`로 준다. 기본값은 `false`다.
+   * label이 `<label for>` 대신 `for` 없는 요소가 되고, 묶음이 `aria-labelledby`로 이 label을 이름으로 쓴다.
+   */
+  group?: boolean;
+  /** 입력 Component 하나(Input, Textarea, CheckboxGroup, RadioGroup 등) */
+  children: ReactNode;
+}
+/**
+ * 입력 Component에 label, 설명, 오류 메시지를 붙인다. 안의 Input·Textarea에 `id`, `aria-describedby`,
+ * `aria-invalid`, `required`, `disabled`가 자동으로 연결된다. 묶음(CheckboxGroup·RadioGroup)은 `group`과 함께 쓴다.
+ * 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Field({ label, description, error, invalid, required, disabled, htmlFor, group, className, children, ...props }: FieldProps): ReactElement;

package/dist/Field.js

@@ -0,0 +1,74 @@
+import { cn } from "./cn.js";
+import { FieldContext } from "./field-context.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { CircleExclamationPointIcon } from "@tide-tds/icons";
+
+// src/Field.tsx
+/** 값이 화면에 그릴 내용인지(null·undefined·false·빈 문자열이 아닌지) */
+const hasContent = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+/**
+* 입력 Component에 label, 설명, 오류 메시지를 붙인다. 안의 Input·Textarea에 `id`, `aria-describedby`,
+* `aria-invalid`, `required`, `disabled`가 자동으로 연결된다. 묶음(CheckboxGroup·RadioGroup)은 `group`과 함께 쓴다.
+* 서버 컴포넌트로 쓸 수 있다.
+*/
+function Field({ label, description, error, invalid, required = false, disabled = false, htmlFor, group = false, className, children, ...props }) {
+	const baseId = useId();
+	const controlId = htmlFor ?? `${baseId}-control`;
+	const labelId = `${baseId}-label`;
+	const descriptionId = `${baseId}-description`;
+	const errorId = `${baseId}-error`;
+	const isInvalid = invalid ?? hasContent(error);
+	const showDescription = hasContent(description);
+	const showError = isInvalid && hasContent(error);
+	const value = {
+		controlId,
+		labelId,
+		describedBy: [showDescription ? descriptionId : void 0, showError ? errorId : void 0].filter(Boolean).join(" ") || void 0,
+		invalid: isInvalid,
+		disabled,
+		required
+	};
+	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [label, required ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "ms-0.5 text-danger",
+		children: "*"
+	}) : null] });
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-invalid": isInvalid ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		className: cn("flex flex-col gap-1.5", className),
+		children: [
+			group ? /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: "text-label-md text-default",
+				children: labelContent
+			}) : /* @__PURE__ */ jsx("label", {
+				id: labelId,
+				htmlFor: controlId,
+				className: "text-label-md text-default",
+				children: labelContent
+			}),
+			/* @__PURE__ */ jsx(FieldContext, {
+				value,
+				children
+			}),
+			showDescription ? /* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "text-body-sm text-muted",
+				children: description
+			}) : null,
+			showError ? /* @__PURE__ */ jsxs("p", {
+				id: errorId,
+				className: "flex items-start gap-1 text-body-sm text-danger",
+				children: [/* @__PURE__ */ jsx(CircleExclamationPointIcon, {
+					size: 16,
+					className: "mt-0.5 shrink-0"
+				}), /* @__PURE__ */ jsx("span", { children: error })]
+			}) : null
+		]
+	});
+}
+
+export { Field };

package/dist/IconButton.d.ts

@@ -0,0 +1,42 @@
+import { FillVariant, Role, Size } from "./types.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** IconButton의 채움 방식. Button과 같은 4개를 받는다. */
+type IconButtonVariant = Extract<FillVariant, "solid" | "subtle" | "outline" | "ghost">;
+/** IconButton의 size. 공통 size 4개를 모두 받는다. 가장 작은 `xs`도 24×24px다. */
+type IconButtonSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
+export interface IconButtonProps extends Omit<ComponentProps<"button">, "color" | "aria-label" | "children"> {
+  /** 버튼 이름. 아이콘만 보이므로 반드시 적는다(예: `"설정"`). 스크린 리더가 읽는다. */
+  "aria-label": string;
+  /** 아이콘. 장식용으로 숨겨지고 size에 맞는 크기가 된다. 다른 라이브러리의 아이콘도 받는다. */
+  children: ReactNode;
+  /** 채움 방식. 기본값은 Button과 같은 `solid`다. 툴바·닫기 버튼처럼 약한 동작은 `ghost`를 쓴다. */
+  variant?: IconButtonVariant;
+  /**
+   * Role. Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role을 받는다. 기본값은 `primary`다.
+   * 색 계열 이름(`blue` 등)은 받지 않는다. 행동의 뜻을 색으로 전하기 때문이다(ADR 0016).
+   * 루트에 `data-color`로 붙어 accent 색을 정한다. 바깥 요소의 색을 물려받지 않는다.
+   */
+  color?: Role;
+  /** 정사각형 크기 `xs` 24px, `sm` 32px, `md` 40px, `lg` 48px. 아이콘은 16/16/20/24px다. 기본값은 `md`다. */
+  size?: IconButtonSize;
+  /**
+   * 로딩 중. 아이콘 자리에 Spinner를 보이고 클릭을 막는다.
+   * 포커스는 유지하고 `aria-disabled="true"`와 `data-loading`을 붙인다.
+   */
+  loading?: boolean;
+  /** 로딩 중에 `aria-label` 뒤에 붙는 텍스트. 기본값은 `"로딩 중"`이다. */
+  loadingLabel?: string;
+  /** 누를 때 줄어드는 반응(scale 0.96)을 끈다. 움직임 줄이기 설정에서는 이 값과 관계없이 줄어들지 않는다. */
+  noPressScale?: boolean;
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<Link href="/x" />}`.
+   * props, ref, className을 그 요소에 병합한다. `button`이 아닌 요소의 `disabled`는 `aria-disabled`로 바뀐다.
+   */
+  render?: ReactElement;
+}
+/**
+ * 아이콘만 있는 버튼. `aria-label`이 필수라 이름이 빠지지 않는다.
+ * Button과 같은 채움 방식(`variant`) × Role(`color`) × `size` 축을 쓴다.
+ */
+export declare function IconButton({ variant, color, size, loading, loadingLabel, noPressScale, render, disabled, type, children, onClick, "aria-label": ariaLabel, ...props }: IconButtonProps): ReactElement;
+export {};

package/dist/IconButton.js

@@ -0,0 +1,63 @@
+"use client";
+
+import { pressableBaseClass, pressableState } from "./pressable.js";
+import { renderElement } from "./render.js";
+import { Spinner } from "./Spinner.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/IconButton.tsx
+/** 정사각형 크기(spec size 표의 높이). padding은 없고 아이콘을 가운데 둔다. 24×24px 밑으로 내려가지 않는다. */
+const sizeClass = {
+	xs: "size-6",
+	sm: "size-8",
+	md: "size-10",
+	lg: "size-12"
+};
+/** 아이콘 크기(spec 아이콘 크기 규칙 「IconButton 아이콘」 열). 감싼 span과 Spinner에 쓴다. */
+const iconSizeClass = {
+	xs: "size-4",
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-6"
+};
+/**
+* 아이콘만 있는 버튼. `aria-label`이 필수라 이름이 빠지지 않는다.
+* Button과 같은 채움 방식(`variant`) × Role(`color`) × `size` 축을 쓴다.
+*/
+function IconButton({ variant = "solid", color = "primary", size = "md", loading = false, loadingLabel = "로딩 중", noPressScale = false, render, disabled = false, type, children, onClick, "aria-label": ariaLabel, ...props }) {
+	const state = pressableState({
+		variant,
+		color,
+		disabled,
+		loading,
+		noPressScale,
+		render,
+		type,
+		onClick,
+		ariaDisabled: props["aria-disabled"]
+	});
+	const { showSpinner } = state;
+	const icon = children ?? (render?.props)?.children;
+	const rootProps = {
+		...props,
+		...state.rootProps,
+		"aria-label": showSpinner ? `${ariaLabel} ${loadingLabel}` : ariaLabel,
+		children: showSpinner ? /* @__PURE__ */ jsx(Spinner, {
+			size,
+			"aria-hidden": "true",
+			className: iconSizeClass[size]
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: `inline-flex shrink-0 items-center justify-center *:size-full ${iconSizeClass[size]}`,
+			children: icon
+		})
+	};
+	return renderElement({
+		defaultElement: "button",
+		render,
+		baseClassName: `${pressableBaseClass} p-0 ${sizeClass[size]} ${state.className}`,
+		props: rootProps
+	});
+}
+
+export { IconButton };

package/dist/Input.d.ts

@@ -0,0 +1,19 @@
+import { Size } from "./types.js";
+import { ComponentProps, ReactElement } from "react";
+/** Input의 size. `xs`(24px)는 입력하기에 작아서 받지 않는다. */
+type InputSize = Extract<Size, "sm" | "md" | "lg">;
+export interface InputProps extends Omit<ComponentProps<"input">, "size"> {
+  /** 높이 `sm` 32px, `md` 40px, `lg` 48px. 같은 size의 Button과 높이가 같다. 기본값은 `md`다. */
+  size?: InputSize;
+  /**
+   * 오류 상태. `aria-invalid="true"`와 `data-invalid`가 붙고 경계가 danger 색이 된다.
+   * Field 안에서는 Field의 값을 따르고, 여기에 준 값이 이긴다.
+   */
+  invalid?: boolean;
+}
+/**
+ * 한 줄 텍스트를 입력하는 네이티브 `<input>`. `type`(`email`, `password`, `date` 등)을 그대로 받는다.
+ * Field 안에 두면 label, 설명, 오류 메시지가 자동으로 연결된다.
+ */
+export declare function Input({ size, invalid, id, disabled, required, className, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }: InputProps): ReactElement;
+export {};

package/dist/Input.js

@@ -0,0 +1,35 @@
+"use client";
+
+import { cn } from "./cn.js";
+import { useFieldControl } from "./field-context.js";
+import { inputBaseClass } from "./input-style.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/Input.tsx
+/** 높이, 좌우 padding, 텍스트 스타일(spec size 표). radius는 모든 size에서 `md`다. */
+const sizeClass = {
+	sm: "h-8 px-2.5 text-label-sm",
+	md: "h-10 px-3 text-label-md",
+	lg: "h-12 px-4 text-label-lg"
+};
+/**
+* 한 줄 텍스트를 입력하는 네이티브 `<input>`. `type`(`email`, `password`, `date` 등)을 그대로 받는다.
+* Field 안에 두면 label, 설명, 오류 메시지가 자동으로 연결된다.
+*/
+function Input({ size = "md", invalid, id, disabled, required, className, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const control = useFieldControl({
+		id,
+		invalid,
+		disabled,
+		required,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid
+	});
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		...control,
+		className: cn(sizeClass[size], inputBaseClass, className)
+	});
+}
+
+export { Input };

package/dist/Link.d.ts

@@ -0,0 +1,20 @@
+import { Role } from "./types.js";
+import { ComponentProps, ReactElement } from "react";
+export interface LinkProps extends Omit<ComponentProps<"a">, "color"> {
+  /**
+   * Role. Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role을 받는다. 기본값은 `primary`다.
+   * 색 계열 이름(`blue` 등)은 받지 않는다. 행동의 뜻을 색으로 전하기 때문이다(ADR 0016).
+   * 루트에 `data-color`로 붙어 글자색(`text-accent`)을 정한다. 바깥 요소의 색을 물려받지 않는다.
+   */
+  color?: Role;
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<NextLink href="/x" />}`.
+   * props, ref, className을 그 요소에 병합한다.
+   */
+  render?: ReactElement;
+}
+/**
+ * 문장 안에서 다른 페이지나 위치로 이동하는 텍스트 링크.
+ * Next.js에서는 `render={<NextLink href="/x" />}`로 클라이언트 이동을 쓴다.
+ */
+export declare function Link({ color, render, ...props }: LinkProps): ReactElement;

package/dist/Link.js

@@ -0,0 +1,21 @@
+import { renderElement } from "./render.js";
+
+// src/Link.tsx
+const baseClass = "cursor-pointer rounded-sm text-accent underline decoration-1 underline-offset-2 hover:decoration-2 focus-visible:focus-ring";
+/**
+* 문장 안에서 다른 페이지나 위치로 이동하는 텍스트 링크.
+* Next.js에서는 `render={<NextLink href="/x" />}`로 클라이언트 이동을 쓴다.
+*/
+function Link({ color = "primary", render, ...props }) {
+	return renderElement({
+		defaultElement: "a",
+		render,
+		baseClassName: baseClass,
+		props: {
+			...props,
+			"data-color": color
+		}
+	});
+}
+
+export { Link };

package/dist/Radio.d.ts

@@ -0,0 +1,27 @@
+import { ChoiceSize } from "./choice-style.js";
+import { Role } from "./types.js";
+import { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
+export interface RadioProps extends Omit<ComponentProps<"input">, "type" | "size" | "color" | "children" | "className" | "style" | "value"> {
+  /** 이 라디오의 값. RadioGroup의 `value`·`onValueChange`가 이 값을 쓰고, form에 제출된다. */
+  value: string;
+  /** 원 옆에 보이는 label. 라디오의 이름이 된다. 없으면 `aria-label`을 준다. */
+  children?: ReactNode;
+  /** 원 16px·글자 14px(`sm`) 또는 원 20px·글자 16px(`md`). 누르는 영역은 둘 다 24×24px이다. 기본값은 `md`다. */
+  size?: ChoiceSize;
+  /** 선택했을 때 원 색(Role). 루트에 `data-color`로 붙는다. 기본값은 `primary`다. */
+  color?: Role;
+  /**
+   * 오류 상태. input에 `aria-invalid="true"`와 `data-invalid`가 붙고 경계가 danger 색이 된다.
+   * Field·RadioGroup 안에서는 그 값을 따르고, 여기에 준 값이 이긴다.
+   */
+  invalid?: boolean;
+  /** 루트 label의 class. 사용자 class가 기본 class를 이긴다. 상자 모양은 바꾸지 않는다(`size`·`color`가 맡는다). */
+  className?: string;
+  /** 루트 label의 style */
+  style?: CSSProperties;
+}
+/**
+ * 네이티브 라디오 버튼. 보통 `RadioGroup` 안에 두고, 묶음이 `name`과 선택 값을 정한다.
+ * 묶음 밖에서는 `name`·`checked`/`defaultChecked`·`onChange`를 직접 준다.
+ */
+export declare function Radio({ value, children, size, color, invalid, id, disabled, required, name, checked, defaultChecked, onChange, className, style, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }: RadioProps): ReactElement;

package/dist/Radio.js

@@ -0,0 +1,67 @@
+"use client";
+
+import { RadioGroupContext } from "./choice-group.js";
+import { choiceAreaClass, choiceInputClass, choiceMarkClass, choiceRootClass, choiceTextClass } from "./choice-style.js";
+import { cn } from "./cn.js";
+import { useFieldControl } from "./field-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { use } from "react";
+import { CircleIcon } from "@tide-tds/icons";
+
+// src/Radio.tsx
+const boxClass = {
+	sm: "size-4 rounded-full",
+	md: "size-5 rounded-full"
+};
+/** 가운데 점 크기(px). 원 아이콘을 채워 그리고 선 두께 2px이 더해진다. */
+const dotSize = {
+	sm: 6,
+	md: 8
+};
+/**
+* 네이티브 라디오 버튼. 보통 `RadioGroup` 안에 두고, 묶음이 `name`과 선택 값을 정한다.
+* 묶음 밖에서는 `name`·`checked`/`defaultChecked`·`onChange`를 직접 준다.
+*/
+function Radio({ value, children, size = "md", color = "primary", invalid, id, disabled, required, name, checked, defaultChecked, onChange, className, style, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const group = use(RadioGroupContext);
+	const control = useFieldControl({
+		id,
+		invalid: invalid ?? group?.invalid,
+		disabled: disabled ?? group?.disabled,
+		required: required ?? (group?.required || void 0),
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid
+	});
+	const selection = group?.value !== void 0 ? { checked: group.value === value } : group?.defaultValue !== void 0 ? { defaultChecked: group.defaultValue === value } : checked !== void 0 ? { checked } : { defaultChecked };
+	const handleChange = (event) => {
+		onChange?.(event);
+		if (event.target.checked) group?.onValueChange?.(value);
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		"data-color": color,
+		"data-disabled": control.disabled ? "" : void 0,
+		"data-invalid": control["data-invalid"],
+		style,
+		className: cn(choiceRootClass, choiceTextClass[size], className),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: choiceAreaClass,
+			children: [/* @__PURE__ */ jsx("input", {
+				...props,
+				...control,
+				...selection,
+				type: "radio",
+				name: name ?? group?.name,
+				value,
+				onChange: handleChange,
+				className: cn(boxClass[size], choiceInputClass)
+			}), /* @__PURE__ */ jsx(CircleIcon, {
+				size: dotSize[size],
+				fill: "currentColor",
+				"data-mark": "dot",
+				className: cn(choiceMarkClass, "peer-checked:block")
+			})]
+		}), children === void 0 || children === null ? null : /* @__PURE__ */ jsx("span", { children })]
+	});
+}
+
+export { Radio };

package/dist/RadioGroup.d.ts

@@ -0,0 +1,28 @@
+import { ChoiceOrientation } from "./CheckboxGroup.js";
+import { ComponentProps, ReactElement } from "react";
+export interface RadioGroupProps extends Omit<ComponentProps<"div">, "defaultValue"> {
+  /** 안의 Radio가 함께 쓰는 `name`. form에 이 이름으로 제출된다. 주지 않으면 자동으로 만든다. */
+  name?: string;
+  /** 선택된 Radio의 값(제어). `onValueChange`와 함께 쓴다. */
+  value?: string;
+  /** 처음 선택된 Radio의 값(비제어). */
+  defaultValue?: string;
+  /** 선택이 바뀌면 새 값 하나로 불린다. */
+  onValueChange?: (value: string) => void;
+  /** 항목을 세로(`vertical`)로 쌓거나 가로(`horizontal`)로 늘어놓는다. 기본값은 `vertical`이다. 화살표 키는 둘 다 동작한다. */
+  orientation?: ChoiceOrientation;
+  /**
+   * 오류 상태. 안의 Radio마다 `aria-invalid="true"`가 붙고, 묶음에 `data-invalid`가 붙는다.
+   * Field 안에서는 Field의 값을 따르고, 여기에 준 값이 이긴다.
+   */
+  invalid?: boolean;
+  /** 안의 Radio를 모두 비활성으로 만든다. Field 안에서는 Field의 값을 따른다. */
+  disabled?: boolean;
+  /** 하나를 꼭 골라야 한다. 안의 Radio에 네이티브 `required`가 붙고 묶음에 `aria-required`가 붙는다. */
+  required?: boolean;
+}
+/**
+ * Radio 여러 개를 하나의 이름과 선택 값으로 묶는다. `<Field label group>` 안에 두면 label이 묶음의 이름,
+ * 설명·오류가 묶음의 설명이 된다. Field 밖에서는 `aria-label`이나 `aria-labelledby`를 준다.
+ */
+export declare function RadioGroup({ name, value, defaultValue, onValueChange, orientation, invalid, disabled, required, id, className, children, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: RadioGroupProps): ReactElement;

package/dist/RadioGroup.js

@@ -0,0 +1,50 @@
+"use client";
+
+import { orientationClass } from "./CheckboxGroup.js";
+import { RadioGroupContext, useChoiceGroup } from "./choice-group.js";
+import { cn } from "./cn.js";
+import { FieldContext } from "./field-context.js";
+import { jsx } from "react/jsx-runtime";
+import { useId } from "react";
+
+// src/RadioGroup.tsx
+/**
+* Radio 여러 개를 하나의 이름과 선택 값으로 묶는다. `<Field label group>` 안에 두면 label이 묶음의 이름,
+* 설명·오류가 묶음의 설명이 된다. Field 밖에서는 `aria-label`이나 `aria-labelledby`를 준다.
+*/
+function RadioGroup({ name, value, defaultValue, onValueChange, orientation = "vertical", invalid, disabled, required, id, className, children, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }) {
+	const autoName = useId();
+	const connection = useChoiceGroup({
+		id,
+		invalid,
+		disabled,
+		required,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy
+	});
+	const state = {
+		name: name ?? autoName,
+		value,
+		defaultValue,
+		onValueChange,
+		invalid: connection.invalid,
+		disabled: connection.disabled,
+		required: connection.required
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-required": connection.required || void 0,
+		...props,
+		...connection.rootProps,
+		className: cn(orientationClass[orientation], className),
+		children: /* @__PURE__ */ jsx(FieldContext, {
+			value: null,
+			children: /* @__PURE__ */ jsx(RadioGroupContext, {
+				value: state,
+				children
+			})
+		})
+	});
+}
+
+export { RadioGroup };

package/dist/Switch.d.ts

@@ -0,0 +1,30 @@
+import { Role, Size } from "./types.js";
+import { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
+/** Switch의 size. `xs`는 track이 너무 작아 받지 않는다. */
+type SwitchSize = Extract<Size, "sm" | "md" | "lg">;
+export interface SwitchProps extends Omit<ComponentProps<"input">, "type" | "size" | "color" | "role" | "children"> {
+  /** 스위치 옆에 보이는 label. 스위치의 이름이 된다. Field 안에서는 Field의 `label`을 쓰고 비워 둔다. */
+  children?: ReactNode;
+  /** track 크기 `sm` 28×16px, `md` 36×20px, `lg` 44×24px. label 텍스트 스타일도 함께 바뀐다. 기본값은 `md`다. */
+  size?: SwitchSize;
+  /**
+   * 켜졌을 때 track 색. Role(Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role)을 받는다. 기본값은 `primary`다.
+   * 루트에 `data-color`로 붙어 accent 색을 정한다. 바깥 요소의 색을 물려받지 않는다.
+   */
+  color?: Role;
+  /**
+   * 오류 상태. `aria-invalid="true"`와 `data-invalid`가 붙고 꺼진 track 경계가 danger 색이 된다.
+   * Field 안에서는 Field의 값을 따르고, 여기에 준 값이 이긴다.
+   */
+  invalid?: boolean;
+  /** 루트 `<label>`의 class. 기본 class를 이긴다. track과 thumb 모양은 바꾸지 않는다. */
+  className?: string;
+  /** 루트 `<label>`의 style */
+  style?: CSSProperties;
+}
+/**
+ * 켜고 끄는 설정을 바꾸는 스위치. 네이티브 체크박스라 form 제출이 그대로 되고, 스크린리더는 「스위치」로 읽는다.
+ * `children`이 label이 된다. Field 안에 두면 Field의 label·설명·오류가 연결된다.
+ */
+export declare function Switch({ children, size, color, invalid, id, disabled, required, className, style, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }: SwitchProps): ReactElement;
+export {};

package/dist/Switch.js

@@ -0,0 +1,65 @@
+"use client";
+
+import { cn } from "./cn.js";
+import { useFieldControl } from "./field-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/Switch.tsx
+/** 루트 높이는 최소 24px라 track이 작아도 누르는 영역이 24×24px 이상이다. */
+const rootSizeClass = {
+	sm: "gap-1.5 text-label-sm",
+	md: "gap-2 text-label-md",
+	lg: "gap-2.5 text-label-lg"
+};
+/** track 크기(border 1px 포함). thumb은 track 안쪽에서 2px 떨어진다. */
+const trackSizeClass = {
+	sm: "h-4 w-7",
+	md: "h-5 w-9",
+	lg: "h-6 w-11"
+};
+/** thumb 크기와 켜졌을 때 이동 거리(track 폭 - border 2px - 여백 4px - thumb 크기). RTL에서는 반대로 움직인다. */
+const thumbSizeClass = {
+	sm: "size-2.5 peer-checked:translate-x-3 rtl:peer-checked:-translate-x-3",
+	md: "size-3.5 peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4",
+	lg: "size-4.5 peer-checked:translate-x-5 rtl:peer-checked:-translate-x-5"
+};
+const trackClass = "peer m-0 shrink-0 cursor-pointer appearance-none rounded-full border border-strong bg-transparent transition-colors aria-invalid:border-danger focus-visible:focus-ring checked:enabled:border-accent checked:enabled:bg-accent-solid group-hover/switch:checked:enabled:bg-accent-solid-hover group-active/switch:checked:enabled:bg-accent-solid-active group-hover/switch:not-checked:enabled:bg-accent-subtle group-active/switch:not-checked:enabled:bg-accent-subtle-active disabled:cursor-not-allowed disabled:border-default disabled:bg-disabled";
+const thumbClass = "pointer-events-none absolute start-0.75 top-0.75 rounded-full bg-current text-muted shadow-sm transition-colors motion-safe:transition-[color,background-color,translate] peer-checked:peer-enabled:text-accent-on-solid group-hover/switch:peer-enabled:peer-not-checked:text-accent group-active/switch:peer-enabled:peer-not-checked:text-accent peer-disabled:text-disabled";
+const trackForcedClass = "forced-colors:forced-color-adjust-none forced-colors:[--tide-border-strong:CanvasText] forced-colors:[--tide-border-danger:CanvasText] forced-colors:[--tide-accent-border:Highlight] forced-colors:[--tide-accent-solid:Highlight] forced-colors:[--tide-accent-solid-hover:Highlight] forced-colors:[--tide-accent-solid-active:Highlight] forced-colors:[--tide-accent-subtle:Canvas] forced-colors:[--tide-accent-subtle-active:Canvas] forced-colors:[--tide-border-default:GrayText] forced-colors:[--tide-bg-disabled:Canvas] forced-colors:[--tide-outline-focus:Highlight]";
+const thumbForcedClass = "forced-colors:forced-color-adjust-none forced-colors:[--tide-text-muted:CanvasText] forced-colors:[--tide-accent-text:CanvasText] forced-colors:[--tide-accent-on-solid:HighlightText] forced-colors:[--tide-text-disabled:GrayText]";
+/**
+* 켜고 끄는 설정을 바꾸는 스위치. 네이티브 체크박스라 form 제출이 그대로 되고, 스크린리더는 「스위치」로 읽는다.
+* `children`이 label이 된다. Field 안에 두면 Field의 label·설명·오류가 연결된다.
+*/
+function Switch({ children, size = "md", color = "primary", invalid, id, disabled, required, className, style, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const control = useFieldControl({
+		id,
+		invalid,
+		disabled,
+		required,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid
+	});
+	return /* @__PURE__ */ jsxs("label", {
+		"data-color": color,
+		"data-disabled": control.disabled ? "" : void 0,
+		"data-invalid": control["data-invalid"],
+		style,
+		className: cn("group/switch inline-flex min-h-6 cursor-pointer items-center text-default select-none has-disabled:cursor-not-allowed has-disabled:text-disabled", rootSizeClass[size], className),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "relative inline-flex shrink-0",
+			children: [/* @__PURE__ */ jsx("input", {
+				...props,
+				...control,
+				type: "checkbox",
+				role: "switch",
+				className: cn(trackSizeClass[size], trackClass, trackForcedClass)
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(thumbSizeClass[size], thumbClass, thumbForcedClass)
+			})]
+		}), children != null && children !== false ? /* @__PURE__ */ jsx("span", { children }) : null]
+	});
+}
+
+export { Switch };

package/dist/Textarea.d.ts

@@ -0,0 +1,19 @@
+import { Size } from "./types.js";
+import { ComponentProps, ReactElement } from "react";
+/** Textarea의 size. Input과 같이 `sm`/`md`/`lg`만 받는다. */
+type TextareaSize = Extract<Size, "sm" | "md" | "lg">;
+export interface TextareaProps extends ComponentProps<"textarea"> {
+  /** 글자 크기와 padding. 글자 크기는 같은 size의 Input과 같다(12/14/16px). 기본값은 `md`다. */
+  size?: TextareaSize;
+  /**
+   * 오류 상태. `aria-invalid="true"`와 `data-invalid`가 붙고 경계가 danger 색이 된다.
+   * Field 안에서는 Field의 값을 따르고, 여기에 준 값이 이긴다.
+   */
+  invalid?: boolean;
+}
+/**
+ * 여러 줄 텍스트를 입력하는 네이티브 `<textarea>`. 기본 3줄 높이이고 세로로만 크기를 바꿀 수 있다.
+ * Field 안에 두면 label, 설명, 오류 메시지가 자동으로 연결된다.
+ */
+export declare function Textarea({ size, invalid, id, disabled, required, rows, className, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }: TextareaProps): ReactElement;
+export {};

package/dist/Textarea.js

@@ -0,0 +1,36 @@
+"use client";
+
+import { cn } from "./cn.js";
+import { useFieldControl } from "./field-context.js";
+import { inputBaseClass } from "./input-style.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/Textarea.tsx
+/** 좌우·세로 padding, 텍스트 스타일 */
+const sizeClass = {
+	sm: "px-2.5 py-1.5 text-caption",
+	md: "px-3 py-2 text-body-sm",
+	lg: "px-4 py-3 text-body-md"
+};
+/**
+* 여러 줄 텍스트를 입력하는 네이티브 `<textarea>`. 기본 3줄 높이이고 세로로만 크기를 바꿀 수 있다.
+* Field 안에 두면 label, 설명, 오류 메시지가 자동으로 연결된다.
+*/
+function Textarea({ size = "md", invalid, id, disabled, required, rows = 3, className, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...props }) {
+	const control = useFieldControl({
+		id,
+		invalid,
+		disabled,
+		required,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid
+	});
+	return /* @__PURE__ */ jsx("textarea", {
+		...props,
+		...control,
+		rows,
+		className: cn(sizeClass[size], inputBaseClass, "resize-y", className)
+	});
+}
+
+export { Textarea };

package/dist/choice-group.js

@@ -0,0 +1,34 @@
+"use client";
+
+import { FieldContext } from "./field-context.js";
+import { createContext, use } from "react";
+
+// src/choice-group.ts
+/** CheckboxGroup 안에서만 값이 있다. */
+const CheckboxGroupContext = createContext(null);
+/** RadioGroup 안에서만 값이 있다. */
+const RadioGroupContext = createContext(null);
+/**
+* Field 연결 정보와 묶음 자신의 props를 합친다. 묶음에 직접 준 값이 Field 값을 이긴다(useFieldControl과 같은 규칙).
+* `aria-labelledby`를 직접 주면 Field label 대신 그것을 쓴다. `aria-describedby`는 Field 것 뒤에 이어 붙인다.
+*/
+function useChoiceGroup(props) {
+	const field = use(FieldContext);
+	const invalid = props.invalid ?? field?.invalid ?? false;
+	const disabled = props.disabled ?? field?.disabled ?? false;
+	const required = props.required ?? field?.required ?? false;
+	return {
+		rootProps: {
+			id: props.id ?? field?.controlId,
+			"aria-labelledby": props["aria-labelledby"] ?? field?.labelId,
+			"aria-describedby": [field?.describedBy, props["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+			"data-invalid": invalid ? "" : void 0,
+			"data-disabled": disabled ? "" : void 0
+		},
+		invalid,
+		disabled,
+		required
+	};
+}
+
+export { CheckboxGroupContext, RadioGroupContext, useChoiceGroup };

package/dist/choice-style.d.ts

@@ -0,0 +1,2 @@
+/** Checkbox·Radio의 size. 상자 크기와 글자 크기만 바뀌고 조작 영역은 24×24로 같다. */
+export type ChoiceSize = "sm" | "md";

package/dist/choice-style.js

@@ -0,0 +1,16 @@
+// src/choice-style.ts
+/** 루트 label. 글자 크기 class와 사용자 className은 뒤에 붙인다. */
+const choiceRootClass = "group/choice inline-flex items-start gap-2 align-top text-default cursor-pointer has-disabled:cursor-not-allowed has-disabled:text-disabled";
+/** 상자와 아이콘을 겹쳐 두는 24×24 조작 영역 */
+const choiceAreaClass = "grid size-6 shrink-0 place-items-center";
+/** 네이티브 input을 상자로 그린다. 모양(rounded)과 크기 class는 Component가 앞에 붙인다. */
+const choiceInputClass = "peer col-start-1 row-start-1 m-0 appearance-none border border-strong bg-canvas cursor-pointer transition-colors checked:border-accent checked:bg-accent-solid enabled:not-checked:not-indeterminate:group-hover/choice:bg-accent-subtle enabled:checked:group-hover/choice:bg-accent-solid-hover indeterminate:border-accent indeterminate:bg-accent-solid enabled:indeterminate:group-hover/choice:bg-accent-solid-hover enabled:not-checked:not-indeterminate:group-active/choice:bg-accent-subtle-active enabled:checked:group-active/choice:bg-accent-solid-active enabled:indeterminate:group-active/choice:bg-accent-solid-active aria-invalid:border-danger focus-visible:focus-ring disabled:cursor-not-allowed disabled:border-default disabled:bg-disabled forced-colors:forced-color-adjust-none forced-colors:[--tide-bg-canvas:Canvas] forced-colors:[--tide-border-strong:CanvasText] forced-colors:[--tide-border-danger:CanvasText] forced-colors:[--tide-accent-border:Highlight] forced-colors:[--tide-accent-solid:Highlight] forced-colors:[--tide-accent-solid-hover:Highlight] forced-colors:[--tide-accent-solid-active:Highlight] forced-colors:[--tide-accent-subtle:Canvas] forced-colors:[--tide-accent-subtle-active:Canvas] forced-colors:[--tide-border-default:GrayText] forced-colors:[--tide-bg-disabled:Canvas] forced-colors:[--tide-outline-focus:Highlight]";
+/** 상자 위에 겹치는 표시 아이콘. 누름은 input이 받는다. 보이는 조건 class는 Component가 붙인다. */
+const choiceMarkClass = "pointer-events-none col-start-1 row-start-1 hidden text-accent-on-solid peer-disabled:text-disabled forced-colors:forced-color-adjust-none forced-colors:[--tide-accent-on-solid:HighlightText] forced-colors:[--tide-text-disabled:GrayText]";
+/** 글자 스타일. md 행간 24px은 조작 영역과 같고, sm 행간 20px은 위아래 2px을 둬 첫 줄을 상자 가운데에 맞춘다. */
+const choiceTextClass = {
+	sm: "py-0.5 text-body-sm",
+	md: "text-body-md"
+};
+
+export { choiceAreaClass, choiceInputClass, choiceMarkClass, choiceRootClass, choiceTextClass };

package/dist/field-context.js

@@ -0,0 +1,26 @@
+"use client";
+
+import { createContext, use } from "react";
+
+// src/field-context.ts
+/** Field 밖에서는 `null`이다. */
+const FieldContext = createContext(null);
+/**
+* Field 연결 정보와 입력 Component 자신의 props를 합친다.
+* 입력 Component에 직접 준 값(id, disabled 등)이 Field 값보다 이긴다. `aria-describedby`는 Field 것 뒤에 이어 붙인다.
+*/
+function useFieldControl(props) {
+	const field = use(FieldContext);
+	const invalid = props.invalid ?? field?.invalid ?? false;
+	const describedBy = [field?.describedBy, props["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	return {
+		id: props.id ?? field?.controlId,
+		"aria-describedby": describedBy,
+		"aria-invalid": invalid ? true : props["aria-invalid"],
+		"data-invalid": invalid ? "" : void 0,
+		disabled: (props.disabled ?? field?.disabled) || void 0,
+		required: (props.required ?? field?.required) || void 0
+	};
+}
+
+export { FieldContext, useFieldControl };

package/dist/index.d.ts

@@ -2,5 +2,16 @@ import { cn } from "./cn.js";
 import { VisuallyHidden, VisuallyHiddenProps } from "./VisuallyHidden.js";
 import { Typography, TypographyProps } from "./Typography.js";
 import { Spinner, SpinnerProps } from "./Spinner.js";
-import { Size } from "./types.js";
-export { type Size, Spinner, type SpinnerProps, Typography, type TypographyProps, VisuallyHidden, type VisuallyHiddenProps, cn };
+import { Button, ButtonProps } from "./Button.js";
+import { IconButton, IconButtonProps } from "./IconButton.js";
+import { Link, LinkProps } from "./Link.js";
+import { Field, FieldProps } from "./Field.js";
+import { Input, InputProps } from "./Input.js";
+import { Textarea, TextareaProps } from "./Textarea.js";
+import { Checkbox, CheckboxProps } from "./Checkbox.js";
+import { CheckboxGroup, CheckboxGroupProps, ChoiceOrientation } from "./CheckboxGroup.js";
+import { Radio, RadioProps } from "./Radio.js";
+import { RadioGroup, RadioGroupProps } from "./RadioGroup.js";
+import { Switch, SwitchProps } from "./Switch.js";
+import { Color, ColorFamilyName, ColorFamilyRegistry, FillVariant, Role, RoleRegistry, Size } from "./types.js";
+export { Button, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceOrientation, type Color, type ColorFamilyName, type ColorFamilyRegistry, Field, type FieldProps, type FillVariant, IconButton, type IconButtonProps, Input, type InputProps, Link, type LinkProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Role, type RoleRegistry, type Size, Spinner, type SpinnerProps, Switch, type SwitchProps, Textarea, type TextareaProps, Typography, type TypographyProps, VisuallyHidden, type VisuallyHiddenProps, cn };

package/dist/index.js

@@ -2,5 +2,16 @@ import { cn } from "./cn.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { Typography } from "./Typography.js";
 import { Spinner } from "./Spinner.js";
+import { Button } from "./Button.js";
+import { IconButton } from "./IconButton.js";
+import { Link } from "./Link.js";
+import { Field } from "./Field.js";
+import { Input } from "./Input.js";
+import { Textarea } from "./Textarea.js";
+import { Checkbox } from "./Checkbox.js";
+import { CheckboxGroup } from "./CheckboxGroup.js";
+import { Radio } from "./Radio.js";
+import { RadioGroup } from "./RadioGroup.js";
+import { Switch } from "./Switch.js";
 
-export { Spinner, Typography, VisuallyHidden, cn };
+export { Button, Checkbox, CheckboxGroup, Field, IconButton, Input, Link, Radio, RadioGroup, Spinner, Switch, Textarea, Typography, VisuallyHidden, cn };

package/dist/input-style.js

@@ -0,0 +1,5 @@
+// src/input-style.ts
+/** 입력창의 공통 모양. size class 뒤에 넣는다. */
+const inputBaseClass = "w-full min-w-0 rounded-md border border-strong bg-canvas font-normal text-default transition-colors placeholder:text-muted aria-invalid:border-danger focus:focus-field disabled:cursor-not-allowed disabled:border-default disabled:bg-disabled disabled:text-disabled disabled:placeholder:text-disabled";
+
+export { inputBaseClass };

package/dist/pressable.js

@@ -0,0 +1,65 @@
+// src/pressable.ts
+/** 기본 색(배경, 글자, 경계). 색 이름마다 Foundation이 같은 대비 규칙으로 검사한다. */
+const colorClass = {
+	solid: "border-transparent bg-accent-solid text-accent-on-solid",
+	subtle: "border-transparent bg-accent-subtle text-accent",
+	outline: "border-accent text-accent",
+	ghost: "border-transparent text-accent"
+};
+/** hover·누름 색. 활성 상태일 때만 붙인다(비활성·로딩에는 붙이지 않아 CSS 순서에 기대지 않는다). */
+const interactionClass = {
+	solid: "hover:bg-accent-solid-hover active:bg-accent-solid-active",
+	subtle: "hover:bg-accent-subtle-hover active:bg-accent-subtle-active",
+	outline: "hover:bg-accent-subtle-hover active:bg-accent-subtle-active",
+	ghost: "hover:bg-accent-subtle-hover active:bg-accent-subtle-active"
+};
+/** 비활성 색. 색 이름과 관계없이 같다. disabled Token은 대비 검사 대상이 아니다. */
+const disabledClass = {
+	solid: "cursor-not-allowed border-transparent bg-disabled text-disabled",
+	subtle: "cursor-not-allowed border-transparent bg-disabled text-disabled",
+	outline: "cursor-not-allowed border-default text-disabled",
+	ghost: "cursor-not-allowed border-transparent text-disabled"
+};
+/** 모양의 공통 부분. radius는 모든 size에서 `md`다. 높이·폭·padding은 Component가 정한다. */
+const pressableBaseClass = "inline-flex shrink-0 items-center justify-center rounded-md border whitespace-nowrap select-none transition-colors focus-visible:focus-ring";
+const pressScaleClass = "motion-safe:transition-[color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,scale] motion-safe:active:scale-96";
+/** `disabled`를 네이티브로 지원하는 요소인지. Button류가 렌더할 만한 요소 중에서는 `button`뿐이다. */
+const supportsNativeDisabled = (render) => render === void 0 || render.type === "button";
+/**
+* 채움 방식·색·상태에서 class와 루트 props를 정한다.
+* - disabled: 기본 요소와 `render={<button />}`는 네이티브 `disabled`, 그 밖의 요소는 `aria-disabled`·`data-disabled`와 클릭 차단
+* - loading: 포커스를 남긴 채 `aria-disabled`·`data-loading`과 클릭 차단. disabled와 함께 오면 disabled가 이긴다
+* - 커서: 활성 pointer, 로딩 wait, 비활성 not-allowed
+* - hover·누름 색과 누름 축소는 활성 상태에서만 붙인다
+*/
+function pressableState({ variant, color, disabled, loading, noPressScale, render, type, onClick, ariaDisabled }) {
+	const native = supportsNativeDisabled(render);
+	const softDisabled = disabled && !native;
+	const blocked = softDisabled || loading && !disabled;
+	const interactive = !disabled && !loading;
+	const showSpinner = loading && !disabled;
+	return {
+		className: [
+			disabled ? disabledClass[variant] : colorClass[variant],
+			interactive ? interactionClass[variant] : void 0,
+			interactive && !noPressScale ? pressScaleClass : void 0,
+			interactive ? "cursor-pointer" : void 0,
+			showSpinner ? "cursor-wait" : void 0
+		].filter(Boolean).join(" "),
+		showSpinner,
+		rootProps: {
+			type: render === void 0 ? type ?? "button" : type,
+			disabled: native && disabled ? true : void 0,
+			"data-color": color,
+			"aria-disabled": blocked ? true : ariaDisabled,
+			"data-disabled": softDisabled ? "" : void 0,
+			"data-loading": showSpinner ? "" : void 0,
+			onClick: blocked ? (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+			} : onClick
+		}
+	};
+}
+
+export { pressableBaseClass, pressableState };

package/dist/types.d.ts

@@ -1,2 +1,9 @@
+import { Color, ColorFamilyName, ColorFamilyRegistry, Role, RoleRegistry } from "@tide-tds/foundation";
 /** Component size. 높이는 `xs` 24px, `sm` 32px, `md` 40px, `lg` 48px다(spec size 표). */
-export type Size = "xs" | "sm" | "md" | "lg";
+export type Size = "xs" | "sm" | "md" | "lg";
+/**
+ * Button류의 채움 방식. `solid`·`subtle`은 Token의 강도와 이름이 같고, `outline`·`ghost`는 Component에만 있다.
+ * 스타일 축 이름이 `variant`라도 값 집합은 채움 방식이라 `Variant`가 아닌 이 이름을 쓴다(GLOSSARY 「채움 방식」).
+ */
+export type FillVariant = "solid" | "subtle" | "outline" | "ghost";
+export type { Color, ColorFamilyName, ColorFamilyRegistry, Role, RoleRegistry };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tide-tds/components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Tide 디자인 시스템의 React Component",
   "license": "MIT",
   "repository": {
@@ -23,8 +23,8 @@
     "./styles.css": "./dist/styles.css"
   },
   "dependencies": {
-    "@tide-tds/foundation": "0.1.0",
-    "@tide-tds/icons": "0.1.0",
+    "@tide-tds/foundation": "0.2.0",
+    "@tide-tds/icons": "0.2.0",
     "clsx": "^2.1.1",
     "react-aria": "^3.53.1",
     "react-stately": "^3.51.0",
@@ -36,6 +36,7 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitest/browser-playwright": "^5.1.0",
+    "next": "^16.4.5",
     "playwright": "^1.65.0",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",