@tide-tds/components 0.0.0-stage → 0.1.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/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/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/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/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,6 @@
+import { cn } from "./cn.js";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { Typography } from "./Typography.js";
+import { Spinner } from "./Spinner.js";
+
+export { Spinner, Typography, VisuallyHidden, cn };

package/dist/render.js

@@ -0,0 +1,55 @@
+import { cn } from "./cn.js";
+import { cloneElement, createElement } from "react";
+
+// src/render.ts
+const isHandlerName = (name) => /^on[A-Z]/.test(name);
+/** ref 여러 개를 하나로 합친다. React 19의 cleanup 함수 반환도 지원한다. */
+function mergeRefs(...refs) {
+	return (node) => {
+		const cleanups = refs.map((ref) => {
+			if (typeof ref === "function") return ref(node);
+			if (ref) ref.current = node;
+		});
+		return () => {
+			refs.forEach((ref, index) => {
+				const cleanup = cleanups[index];
+				if (typeof cleanup === "function") cleanup();
+				else if (typeof ref === "function") ref(null);
+				else if (ref) ref.current = null;
+			});
+		};
+	};
+}
+/** render 요소의 props와 Component props를 위 규칙대로 합친다. */
+function mergeProps(elementProps, props) {
+	const merged = { ...elementProps };
+	for (const [name, value] of Object.entries(props)) {
+		const existing = elementProps[name];
+		if (value === void 0) continue;
+		if (isHandlerName(name) && typeof existing === "function" && typeof value === "function") merged[name] = (...args) => {
+			existing(...args);
+			return value(...args);
+		};
+		else if (name === "style" && existing && typeof existing === "object") merged[name] = {
+			...existing,
+			...value
+		};
+		else if (name === "ref" && existing) merged[name] = mergeRefs(existing, value);
+		else merged[name] = value;
+	}
+	return merged;
+}
+/** `render`가 있으면 그 요소에 props를 병합하고, 없으면 기본 요소를 렌더한다. */
+function renderElement({ defaultElement, render, baseClassName, props }) {
+	const { className, ...rest } = props;
+	if (!render) return createElement(defaultElement, {
+		...rest,
+		className: cn(baseClassName, className)
+	});
+	const elementProps = render.props;
+	const merged = mergeProps(elementProps, rest);
+	merged["className"] = cn(baseClassName, elementProps["className"], className);
+	return cloneElement(render, merged);
+}
+
+export { renderElement };

package/dist/styles.css

@@ -0,0 +1,5 @@
+/* 앱 CSS에는 @import "tailwindcss"와 이 파일, 두 줄만 쓴다. */
+@import "@tide-tds/foundation/tailwind.css";
+
+/* 패키지 자신(빌드 결과)을 Tailwind 스캔 대상으로 등록한다. 경로는 이 CSS 파일 위치 기준이다. */
+@source "./";

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+/** Component size. 높이는 `xs` 24px, `sm` 32px, `md` 40px, `lg` 48px다(spec size 표). */
+export type Size = "xs" | "sm" | "md" | "lg";

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "@tide-tds/components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Tide 디자인 시스템의 React Component",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chane81/tide-design-system.git",
+    "directory": "packages/components"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "dependencies": {
+    "@tide-tds/foundation": "0.1.0",
+    "@tide-tds/icons": "0.1.0",
+    "clsx": "^2.1.1",
+    "react-aria": "^3.53.1",
+    "react-stately": "^3.51.0",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.5",
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitest/browser-playwright": "^5.1.0",
+    "playwright": "^1.65.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tailwindcss": "^4.3.5",
+    "tsdown": "0.23.7",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.6",
+    "vitest": "^5.1.0",
+    "vitest-browser-react": "^2.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwindcss": "^4.3"
+  },
+  "scripts": {
+    "build": "tsdown && cp src/styles.css dist/styles.css",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.