@tide-tds/components 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 chane81
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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;