@tide-tds/components 0.2.0 → 0.2.1

package/dist/Badge.d.ts

@@ -0,0 +1,26 @@
+import { Color, FillVariant, Size } from "./types.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** Badge의 채움 방식. 상호작용이 없어 테두리·투명 채움(`outline`·`ghost`)은 받지 않는다. */
+type BadgeVariant = Extract<FillVariant, "subtle" | "solid">;
+/** Badge의 size. 조작 요소가 아니라 높이가 size 표보다 한 단계 작다(`sm` 20px, `md` 24px). */
+type BadgeSize = Extract<Size, "sm" | "md">;
+export interface BadgeProps extends Omit<ComponentProps<"span">, "color" | "children"> {
+  /** 상태를 말하는 텍스트. 필수다. 색만으로 상태를 전하지 않기 위해서다(WCAG 1.4.1). */
+  children: ReactNode;
+  /** `subtle`(옅은 배경, 기본값)과 `solid`(진한 배경). 같은 화면 안에서는 한 가지로 맞춘다. */
+  variant?: BadgeVariant;
+  /** `sm` 높이 20px·`label-sm`, `md` 높이 24px·`label-md`. 기본값은 `md`다. */
+  size?: BadgeSize;
+  /**
+   * 색 이름. 상태는 Role(Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role), 뜻 없는 분류는 색 계열 이름
+   * (Tide 색 계열 6개와 앱이 `ColorFamilyRegistry`에 더한 계열)을 쓴다(ADR 0016·0017). 기본값은 `neutral`이다.
+   * 루트에 `data-color`로 붙고 바깥 요소의 색을 물려받지 않는다.
+   */
+  color?: Color;
+}
+/**
+ * 상태나 분류를 짧은 텍스트로 보여 주는 라벨. 누르거나 고르는 동작이 없다.
+ * 상태는 Role, 분류는 색 계열 이름으로 색을 고르고, 뜻은 반드시 텍스트로 적는다. 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Badge({ variant, size, color, className, ...props }: BadgeProps): ReactElement;
+export {};

package/dist/Badge.js

@@ -0,0 +1,27 @@
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/Badge.tsx
+const variantClass = {
+	subtle: "bg-accent-subtle text-accent",
+	solid: "bg-accent-solid text-accent-on-solid"
+};
+/** 높이는 border 1px를 포함한다. 글자 줄 높이(label-sm 16px, label-md 20px) + border 2px + 세로 여백이다. */
+const sizeClass = {
+	sm: "h-5 gap-1 px-1.5 text-label-sm",
+	md: "h-6 gap-1 px-2 text-label-md"
+};
+const baseClass = "inline-flex max-w-full shrink-0 items-center rounded-sm border border-transparent align-middle whitespace-nowrap [&_svg]:size-3 [&_svg]:shrink-0";
+/**
+* 상태나 분류를 짧은 텍스트로 보여 주는 라벨. 누르거나 고르는 동작이 없다.
+* 상태는 Role, 분류는 색 계열 이름으로 색을 고르고, 뜻은 반드시 텍스트로 적는다. 서버 컴포넌트로 쓸 수 있다.
+*/
+function Badge({ variant = "subtle", size = "md", color = "neutral", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-color": color,
+		className: cn(baseClass, variantClass[variant], sizeClass[size], className)
+	});
+}
+
+export { Badge };

package/dist/Card.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ReactElement } from "react";
+export interface CardProps extends ComponentProps<"div"> {
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<article />}`, `render={<li />}`.
+   * 묶음의 뜻이 있으면 그 요소를 고른다. props, ref, className을 그 요소에 병합한다.
+   */
+  render?: ReactElement;
+}
+/**
+ * 관련 내용을 한 덩어리로 묶는 surface 표면 컨테이너. 경계만 있고 그림자는 없다.
+ * 기본 요소는 `div`이고, `render`로 `article`·`section`·`li` 등을 쓴다. 서버 컴포넌트로 쓸 수 있다.
+ */
+export declare function Card({ render, ...props }: CardProps): ReactElement;

package/dist/Card.js

@@ -0,0 +1,18 @@
+import { renderElement } from "./render.js";
+
+// src/Card.tsx
+const baseClass = "rounded-lg border border-default bg-surface p-4 text-default";
+/**
+* 관련 내용을 한 덩어리로 묶는 surface 표면 컨테이너. 경계만 있고 그림자는 없다.
+* 기본 요소는 `div`이고, `render`로 `article`·`section`·`li` 등을 쓴다. 서버 컴포넌트로 쓸 수 있다.
+*/
+function Card({ render, ...props }) {
+	return renderElement({
+		defaultElement: "div",
+		render,
+		baseClassName: baseClass,
+		props
+	});
+}
+
+export { Card };

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

@@ -13,5 +13,8 @@ import { CheckboxGroup, CheckboxGroupProps, ChoiceOrientation } from "./Checkbox
 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 { 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 };
+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

@@ -13,5 +13,8 @@ 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 { Button, Checkbox, CheckboxGroup, Field, IconButton, Input, Link, Radio, RadioGroup, Spinner, Switch, Textarea, Typography, VisuallyHidden, cn };
+export { Badge, Button, Card, Checkbox, CheckboxGroup, Field, IconButton, Input, Link, Radio, RadioGroup, Separator, Spinner, Switch, Textarea, Typography, VisuallyHidden, cn };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tide-tds/components",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Tide 디자인 시스템의 React Component",
   "license": "MIT",
   "repository": {
@@ -23,8 +23,8 @@
     "./styles.css": "./dist/styles.css"
   },
   "dependencies": {
-    "@tide-tds/foundation": "0.2.0",
-    "@tide-tds/icons": "0.2.0",
+    "@tide-tds/foundation": "0.2.1",
+    "@tide-tds/icons": "0.2.1",
     "clsx": "^2.1.1",
     "react-aria": "^3.53.1",
     "react-stately": "^3.51.0",