@tide-tds/components 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,20 @@
+import { Size } from "./types.js";
+import { ComponentProps, ReactElement } from "react";
+/** Spinner의 size. 공통 size 4개를 모두 받는다. */
+type SpinnerSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
+export interface SpinnerProps extends Omit<ComponentProps<"svg">, "children"> {
+  /**
+   * 같은 size의 Component(Button 등) 안 텍스트 옆 아이콘과 같은 크기다.
+   * `xs`·`sm` 14px, `md` 16px, `lg` 20px. 기본값은 `md`다.
+   */
+  size?: SpinnerSize;
+  /** 접근 가능한 이름. 기본값은 `"로딩 중"`이다. 무엇을 불러오는지 적으면 더 좋다. */
+  "aria-label"?: string;
+}
+/**
+ * 로딩 중임을 알리는 회전 표시. 역할은 `status`이고 접근 가능한 이름이 기본으로 붙는다.
+ * 회전은 keyframe(`animate-spin`)이고 움직임 줄이기에서도 멈추지 않는다(로딩 여부 자체가 정보다).
+ * 색은 `currentColor`라 주변 글자색을 따른다. 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Spinner({ size, className, "aria-label": ariaLabel, ...props }: SpinnerProps): ReactElement;
+export {};

package/dist/Spinner.js

@@ -0,0 +1,35 @@
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/Spinner.tsx
+const sizeClass = {
+	xs: "size-3.5",
+	sm: "size-3.5",
+	md: "size-4",
+	lg: "size-5"
+};
+/**
+* 로딩 중임을 알리는 회전 표시. 역할은 `status`이고 접근 가능한 이름이 기본으로 붙는다.
+* 회전은 keyframe(`animate-spin`)이고 움직임 줄이기에서도 멈추지 않는다(로딩 여부 자체가 정보다).
+* 색은 `currentColor`라 주변 글자색을 따른다. 서버 컴포넌트로 쓸 수 있다.
+*/
+function Spinner({ size = "md", className, "aria-label": ariaLabel = "로딩 중", ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		role: "status",
+		"aria-label": ariaLabel,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		focusable: "false",
+		...props,
+		className: cn("shrink-0 animate-spin", sizeClass[size], className),
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M12 3a9 9 0 1 1-9 9",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			vectorEffect: "non-scaling-stroke"
+		})
+	});
+}
+
+export { Spinner };

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

@@ -0,0 +1,36 @@
+import { HTMLAttributes, ReactElement, Ref } from "react";
+import { TextStyleName } from "@tide-tds/foundation";
+/** heading·display 텍스트 스타일. 항상 `<h*>`로 렌더되고 `level`을 받는다. */
+type HeadingVariant = Extract<TextStyleName, `display-${string}` | `heading-${string}`>;
+/** heading·display가 아닌 텍스트 스타일 */
+type TextVariant = Exclude<TextStyleName, HeadingVariant>;
+/** 제목 단계 */
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface TypographyBaseProps extends HTMLAttributes<HTMLElement> {
+  /** 루트 DOM 요소에 연결한다. */
+  ref?: Ref<HTMLElement>;
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<label htmlFor="name" />}`.
+   * props, ref, className을 그 요소에 병합하고 `level`과 기본 요소는 무시한다.
+   */
+  render?: ReactElement;
+}
+interface TypographyHeadingProps extends TypographyBaseProps {
+  /** 텍스트 스타일 이름 */
+  variant: HeadingVariant;
+  /** 제목 단계. 주지 않으면 텍스트 스타일의 기본 단계를 쓴다. */
+  level?: HeadingLevel;
+}
+interface TypographyTextProps extends TypographyBaseProps {
+  /** 텍스트 스타일 이름. 기본값은 `body-md`다. */
+  variant?: TextVariant;
+  /** heading·display 텍스트 스타일에만 있다. */
+  level?: never;
+}
+export type TypographyProps = TypographyHeadingProps | TypographyTextProps;
+/**
+ * 텍스트 스타일 하나로 크기, 행간, 굵기를 정하고 알맞은 시맨틱 요소로 렌더한다.
+ * heading·display는 항상 `<h*>`다. 다른 요소가 필요하면 `render`를 쓴다. 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Typography({ variant, level, render, ...props }: TypographyProps): ReactElement;
+export {};

package/dist/Typography.js

@@ -0,0 +1,50 @@
+import { renderElement } from "./render.js";
+
+// src/Typography.tsx
+const variantClass = {
+	"display-lg": "text-display-lg",
+	"display-md": "text-display-md",
+	"heading-xl": "text-heading-xl",
+	"heading-lg": "text-heading-lg",
+	"heading-md": "text-heading-md",
+	"heading-sm": "text-heading-sm",
+	"heading-xs": "text-heading-xs",
+	"body-lg": "text-body-lg",
+	"body-md": "text-body-md",
+	"body-sm": "text-body-sm",
+	"label-lg": "text-label-lg",
+	"label-md": "text-label-md",
+	"label-sm": "text-label-sm",
+	caption: "text-caption"
+};
+const elementByVariant = {
+	"display-lg": 1,
+	"display-md": 1,
+	"heading-xl": 1,
+	"heading-lg": 2,
+	"heading-md": 3,
+	"heading-sm": 4,
+	"heading-xs": 5,
+	"body-lg": "p",
+	"body-md": "p",
+	"body-sm": "p",
+	"label-lg": "span",
+	"label-md": "span",
+	"label-sm": "span",
+	caption: "p"
+};
+/**
+* 텍스트 스타일 하나로 크기, 행간, 굵기를 정하고 알맞은 시맨틱 요소로 렌더한다.
+* heading·display는 항상 `<h*>`다. 다른 요소가 필요하면 `render`를 쓴다. 서버 컴포넌트로 쓸 수 있다.
+*/
+function Typography({ variant = "body-md", level, render, ...props }) {
+	const element = elementByVariant[variant];
+	return renderElement({
+		defaultElement: typeof element === "number" ? `h${level ?? element}` : element,
+		render,
+		baseClassName: variantClass[variant],
+		props
+	});
+}
+
+export { Typography };

package/dist/VisuallyHidden.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, ReactElement } from "react";
+export type VisuallyHiddenProps = ComponentProps<"span">;
+/** 화면에는 보이지 않고 보조 기술에는 읽히는 텍스트. 서버 컴포넌트로 쓸 수 있다. */
+export declare function VisuallyHidden({ className, ...props }: VisuallyHiddenProps): ReactElement;

package/dist/VisuallyHidden.js

@@ -0,0 +1,13 @@
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/VisuallyHidden.tsx
+/** 화면에는 보이지 않고 보조 기술에는 읽히는 텍스트. 서버 컴포넌트로 쓸 수 있다. */
+function VisuallyHidden({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: cn("sr-only", className)
+	});
+}
+
+export { VisuallyHidden };

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

@@ -0,0 +1,6 @@
+import { ClassValue } from "clsx";
+/**
+ * class를 합치고 충돌을 푼다. 뒤에 온 class가 이긴다.
+ * Component는 사용자 `className`을 항상 마지막 인자로 넘긴다.
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/cn.js

@@ -0,0 +1,15 @@
+import { tailwindMergeConfig } from "@tide-tds/foundation/tailwind-merge";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+// src/cn.ts
+const twMerge = extendTailwindMerge(tailwindMergeConfig);
+/**
+* class를 합치고 충돌을 푼다. 뒤에 온 class가 이긴다.
+* Component는 사용자 `className`을 항상 마지막 인자로 넘긴다.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+export { cn };

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

@@ -0,0 +1,17 @@
+import { cn } from "./cn.js";
+import { VisuallyHidden, VisuallyHiddenProps } from "./VisuallyHidden.js";
+import { Typography, TypographyProps } from "./Typography.js";
+import { Spinner, SpinnerProps } from "./Spinner.js";
+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

@@ -0,0 +1,17 @@
+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 { 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 };