@tide-tds/foundation 0.0.0-stage → 0.2.0

package/dist/semantic.d.ts

@@ -0,0 +1,230 @@
+import { ColorFamily, PrimitiveColorName } from "./color.js";
+import { BackgroundSlot, ColorSlot, familyOverrides, slotRule } from "./color-slot.js";
+/** Theme 이름 */
+export type ThemeName = "light" | "dark";
+/** Primitive에 투명도를 더한 색. overlay와 shadow 색에만 쓰고, CSS에는 8자리 hex로 나간다. */
+export interface AlphaColor {
+  readonly primitive: PrimitiveColorName;
+  /** 0~1 */
+  readonly alpha: number;
+}
+/**
+ * Semantic Token 하나가 가리키는 값. `transparent`는 light raised border에만 쓴다(CSS에서도 `transparent` 키워드로 나간다).
+ */
+export type SemanticColorValue = PrimitiveColorName | AlphaColor | "transparent";
+/** Theme별로 가리키는 값 */
+export interface ThemedColor {
+  readonly light: SemanticColorValue;
+  readonly dark: SemanticColorValue;
+}
+/**
+ * Tide가 정한 Role 6개. 앱이 `RoleRegistry`에 더한 Role은 들어 있지 않다.
+ * Tide 안의 계산(Semantic Token 이름, 대비 쌍)은 이 타입을 쓴다. 앱 Role에는 Role Token이 생기지 않기 때문이다.
+ */
+export type TideRole = "neutral" | "primary" | "success" | "warning" | "danger" | "info";
+/**
+ * Role이 참조하는 Primitive 계열.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const roleFamily: {
+  readonly neutral: "gray";
+  readonly primary: "blue";
+  readonly success: "green";
+  readonly warning: "amber";
+  readonly danger: "red";
+  readonly info: "cyan";
+};
+/**
+ * Role별로 계열 규칙에서 덮어쓸 값.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const roleOverrides: {
+  readonly neutral: {
+    readonly subtle: {
+      readonly dark: 900;
+    };
+    readonly "subtle-hover": {
+      readonly dark: 800;
+    };
+    readonly "subtle-active": {
+      readonly dark: 700;
+    };
+  };
+};
+/**
+ * 역할 Token 대신 공통 Semantic Token을 쓰는 Role 슬롯. on-solid는 모든 Role이 `text-on-solid`를 쓴다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const roleSharedSlots: {
+  readonly neutral: {
+    readonly text: "text-default";
+    readonly border: "border-strong";
+  };
+};
+/**
+ * Role 목록. Tide Role 6개가 들어 있고, 앱은 module augmentation으로 자기 Role(예: `brand`)을 더한다.
+ * 앱 Role의 색은 `@tide-tds/foundation/color-family`의 `defineColorFamily`와 `tide-color build`로 만든다.
+ *
+ * ```ts
+ * declare module "@tide-tds/components" {
+ *   interface RoleRegistry {
+ *     brand: true;
+ *   }
+ * }
+ * ```
+ */
+export interface RoleRegistry extends Record<TideRole, true> {}
+/**
+ * Role. 뜻이 있는 색이다. 행동·의미 Component의 `color`로 고르고, `data-color` 속성으로 accent 슬롯에 꽂는다.
+ * Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role이다.
+ */
+export type Role = keyof RoleRegistry;
+/**
+ * 색 계열 목록. Tide 색 계열 6개가 들어 있고, 앱은 module augmentation으로 장식용 계열을 더한다.
+ * Tide가 Primitive 계열을 더하면 이 목록도 함께 넓어진다.
+ *
+ * ```ts
+ * declare module "@tide-tds/components" {
+ *   interface ColorFamilyRegistry {
+ *     brand: true;
+ *   }
+ * }
+ * ```
+ */
+export interface ColorFamilyRegistry extends Record<ColorFamily, true> {}
+/**
+ * 색 계열 이름. 뜻이 없는 색이라 장식·분류 Component가 쓴다.
+ * Tide 색 계열(`ColorFamily`)과 앱이 `ColorFamilyRegistry`에 더한 계열이다.
+ */
+export type ColorFamilyName = keyof ColorFamilyRegistry;
+/** 색 이름(Color). `data-color` 속성이 받는 모든 이름이다(Role과 색 계열). */
+export type Color = Role | ColorFamilyName;
+type Lookup<Table, K1, K2, K3, Fallback> = K1 extends keyof Table ? K2 extends keyof Table[K1] ? K3 extends keyof Table[K1][K2] ? Table[K1][K2][K3] : Fallback : Fallback : Fallback;
+type FamilyStep<Family, Slot extends ColorSlot, Theme extends ThemeName> = Lookup<typeof familyOverrides, Family, Slot, Theme, (typeof slotRule)[Slot][Theme]>;
+type RoleStep<Name extends TideRole, Slot extends ColorSlot, Theme extends ThemeName> = Lookup<typeof roleOverrides, Name, Slot, Theme, FamilyStep<(typeof roleFamily)[Name], Slot, Theme>>;
+type StepName<Family extends string, Step> = Step extends number ? `${Family}-${Step}` : Step;
+type RoleSlotColor<Name extends TideRole, Slot extends ColorSlot> = {
+  readonly light: StepName<(typeof roleFamily)[Name], RoleStep<Name, Slot, "light">>;
+  readonly dark: StepName<(typeof roleFamily)[Name], RoleStep<Name, Slot, "dark">>;
+};
+/** 역할 text·border Token이 있는 Role(neutral 제외) */
+type AccentRole = Exclude<TideRole, keyof typeof roleSharedSlots>;
+type RoleBackgroundTokens = { readonly [Key in `${TideRole}-${BackgroundSlot}`]: Key extends `${infer Name extends TideRole}-${infer Slot extends BackgroundSlot}` ? RoleSlotColor<Name, Slot> : never; };
+type RoleSlotTokens<Slot extends "text" | "border"> = { readonly [Name in AccentRole]: RoleSlotColor<Name, Slot>; };
+declare const commonBackground: {
+  readonly canvas: {
+    readonly light: "white";
+    readonly dark: "gray-950";
+  };
+  readonly surface: {
+    readonly light: "white";
+    readonly dark: "gray-950";
+  };
+  readonly raised: {
+    readonly light: "white";
+    readonly dark: "gray-900";
+  };
+  readonly disabled: {
+    readonly light: "gray-100";
+    readonly dark: "gray-900";
+  };
+  readonly overlay: {
+    readonly light: {
+      readonly primitive: "gray-950";
+      readonly alpha: 0.5;
+    };
+    readonly dark: {
+      readonly primitive: "gray-950";
+      readonly alpha: 0.7;
+    };
+  };
+};
+declare const commonText: {
+  readonly default: {
+    readonly light: "gray-900";
+    readonly dark: "gray-50";
+  };
+  readonly muted: {
+    readonly light: "gray-600";
+    readonly dark: "gray-300";
+  };
+  readonly disabled: {
+    readonly light: "gray-400";
+    readonly dark: "gray-600";
+  };
+  readonly "on-solid": {
+    readonly light: "white";
+    readonly dark: "white";
+  };
+};
+declare const commonBorder: {
+  readonly default: {
+    readonly light: "gray-200";
+    readonly dark: "gray-800";
+  };
+  readonly strong: {
+    readonly light: "gray-500";
+    readonly dark: "gray-400";
+  };
+  readonly raised: {
+    readonly light: "transparent";
+    readonly dark: "gray-800";
+  };
+};
+declare const commonOutline: {
+  readonly focus: {
+    readonly light: "blue-600";
+    readonly dark: "blue-400";
+  };
+};
+export declare const semantic: {
+  readonly background: typeof commonBackground & RoleBackgroundTokens;
+  readonly text: typeof commonText & RoleSlotTokens<"text">;
+  readonly border: typeof commonBorder & RoleSlotTokens<"border">;
+  readonly outline: typeof commonOutline;
+};
+/** Semantic namespace와 Utility class 접두사 */
+export type SemanticNamespace = "background" | "text" | "border" | "outline";
+export declare const semanticPrefix: {
+  readonly background: "bg";
+  readonly text: "text";
+  readonly border: "border";
+  readonly outline: "outline";
+};
+/** Semantic Token의 Utility class 이름. 예: `bg-primary-solid`, `text-muted` */
+export type SemanticColorName = { [Namespace in SemanticNamespace]: `${(typeof semanticPrefix)[Namespace]}-${keyof (typeof semantic)[Namespace] & string}`; }[SemanticNamespace];
+/**
+ * Theme별 shadow 색. CSS에서는 `--tide-shadow-color`로 쓴다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare const shadowColor: {
+  readonly light: {
+    readonly primitive: "gray-950";
+    readonly alpha: 0.08;
+  };
+  readonly dark: {
+    readonly primitive: "black";
+    readonly alpha: 0.3;
+  };
+};
+/**
+ * 모든 Semantic Token(namespace, Utility class 이름, Theme별 값).
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function semanticEntries(): {
+  readonly namespace: SemanticNamespace;
+  readonly key: string;
+  readonly className: SemanticColorName;
+  readonly value: ThemedColor;
+}[];
+/**
+ * 값을 hex로 바꾼다. alpha가 있으면 8자리 hex(`#rrggbbaa`)다. `transparent`는 `#00000000`이다.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function colorValueHex(value: SemanticColorValue): string;
+/**
+ * Semantic Token이 Theme에서 가리키는 hex.
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function semanticHex(name: SemanticColorName, theme: ThemeName): string;
+export {};

package/dist/semantic.js

@@ -0,0 +1,177 @@
+import { primitiveHex } from "./color.js";
+import { colorSlots, familyOverrides, resolveSlotSteps, slotPrimitive } from "./color-slot.js";
+
+// src/semantic.ts
+/**
+* Role이 참조하는 Primitive 계열.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const roleFamily = {
+	neutral: "gray",
+	primary: "blue",
+	success: "green",
+	warning: "amber",
+	danger: "red",
+	info: "cyan"
+};
+/**
+* Role별로 계열 규칙에서 덮어쓸 값.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const roleOverrides = { neutral: {
+	subtle: { dark: 900 },
+	"subtle-hover": { dark: 800 },
+	"subtle-active": { dark: 700 }
+} };
+/**
+* 역할 Token 대신 공통 Semantic Token을 쓰는 Role 슬롯. on-solid는 모든 Role이 `text-on-solid`를 쓴다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const roleSharedSlots = { neutral: {
+	text: "text-default",
+	border: "border-strong"
+} };
+const roles = Object.keys(roleFamily);
+const backgroundSlots = colorSlots.filter((slot) => slot !== "text" && slot !== "border" && slot !== "on-solid");
+const accentRoles = roles.filter((role) => !(role in roleSharedSlots));
+/** Role 슬롯이 가리키는 Primitive. 계열 규칙 → 계열 덮어쓸 값 → Role 덮어쓸 값 순서로 얹는다. */
+function roleSlotColor(role, slot) {
+	const family = roleFamily[role];
+	const steps = resolveSlotSteps(familyOverrides[family], roleOverrides[role])[slot];
+	return {
+		light: slotPrimitive(family, steps.light),
+		dark: slotPrimitive(family, steps.dark)
+	};
+}
+const commonBackground = {
+	canvas: {
+		light: "white",
+		dark: "gray-950"
+	},
+	surface: {
+		light: "white",
+		dark: "gray-950"
+	},
+	raised: {
+		light: "white",
+		dark: "gray-900"
+	},
+	disabled: {
+		light: "gray-100",
+		dark: "gray-900"
+	},
+	overlay: {
+		light: {
+			primitive: "gray-950",
+			alpha: .5
+		},
+		dark: {
+			primitive: "gray-950",
+			alpha: .7
+		}
+	}
+};
+const commonText = {
+	default: {
+		light: "gray-900",
+		dark: "gray-50"
+	},
+	muted: {
+		light: "gray-600",
+		dark: "gray-300"
+	},
+	disabled: {
+		light: "gray-400",
+		dark: "gray-600"
+	},
+	"on-solid": {
+		light: "white",
+		dark: "white"
+	}
+};
+const commonBorder = {
+	default: {
+		light: "gray-200",
+		dark: "gray-800"
+	},
+	strong: {
+		light: "gray-500",
+		dark: "gray-400"
+	},
+	raised: {
+		light: "transparent",
+		dark: "gray-800"
+	}
+};
+const commonOutline = { focus: {
+	light: "blue-600",
+	dark: "blue-400"
+} };
+const semantic = {
+	background: {
+		...commonBackground,
+		...Object.fromEntries(roles.flatMap((role) => backgroundSlots.map((slot) => [`${role}-${slot}`, roleSlotColor(role, slot)])))
+	},
+	text: {
+		...commonText,
+		...Object.fromEntries(accentRoles.map((role) => [role, roleSlotColor(role, "text")]))
+	},
+	border: {
+		...commonBorder,
+		...Object.fromEntries(accentRoles.map((role) => [role, roleSlotColor(role, "border")]))
+	},
+	outline: commonOutline
+};
+const semanticPrefix = {
+	background: "bg",
+	text: "text",
+	border: "border",
+	outline: "outline"
+};
+/**
+* Theme별 shadow 색. CSS에서는 `--tide-shadow-color`로 쓴다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+const shadowColor = {
+	light: {
+		primitive: "gray-950",
+		alpha: .08
+	},
+	dark: {
+		primitive: "black",
+		alpha: .3
+	}
+};
+/**
+* 모든 Semantic Token(namespace, Utility class 이름, Theme별 값).
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function semanticEntries() {
+	return Object.keys(semantic).flatMap((namespace) => Object.entries(semantic[namespace]).map(([key, value]) => ({
+		namespace,
+		key,
+		className: `${semanticPrefix[namespace]}-${key}`,
+		value
+	})));
+}
+/**
+* 값을 hex로 바꾼다. alpha가 있으면 8자리 hex(`#rrggbbaa`)다. `transparent`는 `#00000000`이다.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function colorValueHex(value) {
+	if (value === "transparent") return "#00000000";
+	if (typeof value === "string") return primitiveHex(value);
+	const alpha = Math.round(value.alpha * 255).toString(16).padStart(2, "0");
+	return `${primitiveHex(value.primitive)}${alpha}`;
+}
+/**
+* Semantic Token이 Theme에서 가리키는 hex.
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function semanticHex(name, theme) {
+	const entry = semanticEntries().find((candidate) => candidate.className === name);
+	if (!entry) throw new Error(`Semantic Token이 아니다: ${name}`);
+	return colorValueHex(entry.value[theme]);
+}
+
+export { colorValueHex, roleFamily, roleOverrides, roleSharedSlots, semantic, semanticEntries, semanticHex, semanticPrefix, shadowColor };

package/dist/shape.d.ts

@@ -0,0 +1,89 @@
+/**
+ * radius 5단계. `rounded-<이름>` class와 공개 계약 `--tide-rounded-<이름>`이 쓴다.
+ * - sm: 작은 표시 요소, 목록 안 항목
+ * - md: 조작 요소(모든 size)
+ * - lg: 담는 요소(Card, Alert, Popover, 목록, Toast, Accordion)
+ * - xl: Dialog류
+ * - full: 원·알약형
+ */
+export declare const radius: {
+  readonly sm: "0.25rem";
+  readonly md: "0.375rem";
+  readonly lg: "0.5rem";
+  readonly xl: "0.75rem";
+  readonly full: "9999px";
+};
+/** radius 단계 이름 */
+export type RadiusName = keyof typeof radius;
+/** 그림자 레이어 하나. 길이는 px, `mix`는 `--tide-shadow-color`를 남기는 비율(%)이다. */
+export interface ShadowLayer {
+  readonly x: number;
+  readonly y: number;
+  readonly blur: number;
+  readonly spread: number;
+  readonly mix: number;
+}
+/**
+ * Elevation 3단계. 각 단계는 [가까운 레이어, 먼 레이어]다. 값은 spec 표를 그대로 옮겼다.
+ * `shadow-<이름>` class와 공개 계약 `--tide-shadow-<이름>`이 쓴다. Theme에 따라 `--tide-shadow-color`만 바뀐다.
+ * - sm: Switch thumb
+ * - md: Popover, 목록, Tooltip, Toast
+ * - lg: Dialog류
+ */
+export declare const shadow: {
+  readonly sm: readonly [{
+    readonly x: 0;
+    readonly y: 1;
+    readonly blur: 1;
+    readonly spread: 0;
+    readonly mix: 60;
+  }, {
+    readonly x: 0;
+    readonly y: 1;
+    readonly blur: 2;
+    readonly spread: 0;
+    readonly mix: 100;
+  }];
+  readonly md: readonly [{
+    readonly x: 0;
+    readonly y: 1;
+    readonly blur: 3;
+    readonly spread: 0;
+    readonly mix: 50;
+  }, {
+    readonly x: 0;
+    readonly y: 4;
+    readonly blur: 12;
+    readonly spread: -2;
+    readonly mix: 100;
+  }];
+  readonly lg: readonly [{
+    readonly x: 0;
+    readonly y: 2;
+    readonly blur: 6;
+    readonly spread: -1;
+    readonly mix: 50;
+  }, {
+    readonly x: 0;
+    readonly y: 12;
+    readonly blur: 24;
+    readonly spread: -6;
+    readonly mix: 100;
+  }];
+};
+/** Elevation 단계 이름 */
+export type ShadowName = keyof typeof shadow;
+/**
+ * 포커스 표시 ring의 두께와 offset. 공개 계약은 `--tide-focus-ring-width`, `--tide-focus-ring-offset`이다.
+ * `focus-ring` utility가 쓰고, `focus-field`의 투명 outline 두께도 같은 값을 쓴다.
+ */
+export declare const focusRing: {
+  readonly width: "2px";
+  readonly offset: "2px";
+};
+/**
+ * Elevation 단계를 CSS `box-shadow` 값으로 만든다. 두 레이어 모두
+ * `color-mix(in srgb, var(--tide-shadow-color) N%, transparent)`로 색을 낮춘다(100%도 같은 형태로 쓴다).
+ * @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+ */
+export declare function shadowCss(name: ShadowName): string;

package/dist/shape.js

@@ -0,0 +1,93 @@
+// src/shape.ts
+/**
+* radius 5단계. `rounded-<이름>` class와 공개 계약 `--tide-rounded-<이름>`이 쓴다.
+* - sm: 작은 표시 요소, 목록 안 항목
+* - md: 조작 요소(모든 size)
+* - lg: 담는 요소(Card, Alert, Popover, 목록, Toast, Accordion)
+* - xl: Dialog류
+* - full: 원·알약형
+*/
+const radius = {
+	sm: "0.25rem",
+	md: "0.375rem",
+	lg: "0.5rem",
+	xl: "0.75rem",
+	full: "9999px"
+};
+/**
+* Elevation 3단계. 각 단계는 [가까운 레이어, 먼 레이어]다. 값은 spec 표를 그대로 옮겼다.
+* `shadow-<이름>` class와 공개 계약 `--tide-shadow-<이름>`이 쓴다. Theme에 따라 `--tide-shadow-color`만 바뀐다.
+* - sm: Switch thumb
+* - md: Popover, 목록, Tooltip, Toast
+* - lg: Dialog류
+*/
+const shadow = {
+	sm: [{
+		x: 0,
+		y: 1,
+		blur: 1,
+		spread: 0,
+		mix: 60
+	}, {
+		x: 0,
+		y: 1,
+		blur: 2,
+		spread: 0,
+		mix: 100
+	}],
+	md: [{
+		x: 0,
+		y: 1,
+		blur: 3,
+		spread: 0,
+		mix: 50
+	}, {
+		x: 0,
+		y: 4,
+		blur: 12,
+		spread: -2,
+		mix: 100
+	}],
+	lg: [{
+		x: 0,
+		y: 2,
+		blur: 6,
+		spread: -1,
+		mix: 50
+	}, {
+		x: 0,
+		y: 12,
+		blur: 24,
+		spread: -6,
+		mix: 100
+	}]
+};
+/**
+* 포커스 표시 ring의 두께와 offset. 공개 계약은 `--tide-focus-ring-width`, `--tide-focus-ring-offset`이다.
+* `focus-ring` utility가 쓰고, `focus-field`의 투명 outline 두께도 같은 값을 쓴다.
+*/
+const focusRing = {
+	width: "2px",
+	offset: "2px"
+};
+/** 길이 하나를 CSS로 쓴다. 0은 단위 없이 쓴다. */
+const length = (px) => px === 0 ? "0" : `${px}px`;
+/**
+* Elevation 단계를 CSS `box-shadow` 값으로 만든다. 두 레이어 모두
+* `color-mix(in srgb, var(--tide-shadow-color) N%, transparent)`로 색을 낮춘다(100%도 같은 형태로 쓴다).
+* @internal `@tide-tds/foundation/internal` 전용. 앱 개발자용 공개 계약이 아니다(문서 앱·빌드 스크립트·테스트용).
+*/
+function shadowCss(name) {
+	return shadow[name].map((layer) => {
+		const lengths = [
+			layer.x,
+			layer.y,
+			layer.blur,
+			...layer.spread === 0 ? [] : [layer.spread]
+		];
+		const color = `color-mix(in srgb, var(--tide-shadow-color) ${layer.mix}%, transparent)`;
+		return `${lengths.map(length).join(" ")} ${color}`;
+	}).join(", ");
+}
+
+export { focusRing, radius, shadow, shadowCss };

package/dist/stacking.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 쌓임 단계 5개. 뒤에서부터 앞 순서다. `z-<이름>` class와 공개 계약 `--tide-z-<이름>`이 쓴다.
+ * - sticky: 앱의 sticky 헤더·사이드바(v0 Tide Component는 쓰지 않음)
+ * - modal: Dialog·AlertDialog와 그 backdrop
+ * - popover: Popover, Menu, Select·Combobox 목록
+ * - toast: Toast 영역
+ * - tooltip: Tooltip
+ */
+export declare const zIndex: {
+  readonly sticky: 100;
+  readonly modal: 200;
+  readonly popover: 300;
+  readonly toast: 400;
+  readonly tooltip: 500;
+};
+/** 쌓임 단계 이름 */
+export type ZIndexName = keyof typeof zIndex;

package/dist/stacking.js

@@ -0,0 +1,18 @@
+// src/stacking.ts
+/**
+* 쌓임 단계 5개. 뒤에서부터 앞 순서다. `z-<이름>` class와 공개 계약 `--tide-z-<이름>`이 쓴다.
+* - sticky: 앱의 sticky 헤더·사이드바(v0 Tide Component는 쓰지 않음)
+* - modal: Dialog·AlertDialog와 그 backdrop
+* - popover: Popover, Menu, Select·Combobox 목록
+* - toast: Toast 영역
+* - tooltip: Tooltip
+*/
+const zIndex = {
+	sticky: 100,
+	modal: 200,
+	popover: 300,
+	toast: 400,
+	tooltip: 500
+};
+
+export { zIndex };

package/dist/tailwind-merge.d.ts

@@ -0,0 +1,5 @@
+/* 이 파일은 @tide-tds/foundation 빌드 스크립트가 만든다. 직접 고치지 않는다. */
+import type { ConfigExtension, DefaultClassGroupIds, DefaultThemeGroupIds } from "tailwind-merge";
+
+/** `extendTailwindMerge`에 넘기는 Tide 설정 */
+export declare const tailwindMergeConfig: ConfigExtension<DefaultClassGroupIds, DefaultThemeGroupIds>;