@tide-tds/components 0.1.0 → 0.2.1

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/Separator.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, ReactElement } from "react";
+/** Separator의 방향 */
+type SeparatorOrientation = "horizontal" | "vertical";
+export interface SeparatorProps extends Omit<ComponentProps<"hr">, "children" | "role"> {
+  /** `horizontal`(기본값)은 위아래 내용을, `vertical`은 한 줄 안의 양옆 내용을 나눈다. */
+  orientation?: SeparatorOrientation;
+  /**
+   * 보기만 나누는 선이면 `true`. `role="none"`이 붙어 보조 기술에서 빠진다. 기본값은 `false`(separator 역할)다.
+   * 내용의 주제가 바뀌는 곳이면 `false`로 둔다.
+   */
+  decorative?: boolean;
+}
+/**
+ * 내용 묶음 사이를 선으로 나눈다. 기본은 의미 구분(separator 역할)이고, `decorative`면 보조 기술에서 빠진다.
+ * 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Separator({ orientation, decorative, className, ...props }: SeparatorProps): ReactElement;
+export {};

package/dist/Separator.js

@@ -0,0 +1,24 @@
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/Separator.tsx
+const orientationClass = {
+	horizontal: "h-0 w-full border-t",
+	vertical: "h-auto w-0 self-stretch border-s"
+};
+const baseClass = "m-0 shrink-0 border-0 border-default";
+/**
+* 내용 묶음 사이를 선으로 나눈다. 기본은 의미 구분(separator 역할)이고, `decorative`면 보조 기술에서 빠진다.
+* 서버 컴포넌트로 쓸 수 있다.
+*/
+function Separator({ orientation = "horizontal", decorative = false, className, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
+		...props,
+		role: decorative ? "none" : void 0,
+		"aria-orientation": !decorative && orientation === "vertical" ? "vertical" : void 0,
+		"data-orientation": orientation,
+		className: cn(baseClass, orientationClass[orientation], className)
+	});
+}
+
+export { Separator };

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,19 @@ 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 { Badge, BadgeProps } from "./Badge.js";
+import { Card, CardProps } from "./Card.js";
+import { Separator, SeparatorProps } from "./Separator.js";
+import { Color, ColorFamilyName, ColorFamilyRegistry, FillVariant, Role, RoleRegistry, Size } from "./types.js";
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, 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, Separator, type SeparatorProps, 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,19 @@ 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";
+import { Badge } from "./Badge.js";
+import { Card } from "./Card.js";
+import { Separator } from "./Separator.js";
 
-export { Spinner, Typography, VisuallyHidden, cn };
+export { Badge, Button, Card, Checkbox, CheckboxGroup, Field, IconButton, Input, Link, Radio, RadioGroup, Separator, 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 };