@tide-tds/components 0.0.0-stage → 0.2.0

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/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,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";
+/**
+ * Button류의 채움 방식. `solid`·`subtle`은 Token의 강도와 이름이 같고, `outline`·`ghost`는 Component에만 있다.
+ * 스타일 축 이름이 `variant`라도 값 집합은 채움 방식이라 `Variant`가 아닌 이 이름을 쓴다(GLOSSARY 「채움 방식」).
+ */
+export type FillVariant = "solid" | "subtle" | "outline" | "ghost";
+export type { Color, ColorFamilyName, ColorFamilyRegistry, Role, RoleRegistry };

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@tide-tds/components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.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.2.0",
+    "@tide-tds/icons": "0.2.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",
+    "next": "^16.4.5",
+    "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.