@tipp/ui 2.10.2 → 2.10.4

package/dist/molecules/dynamic-form-editor.js

@@ -1,13 +1,13 @@
 import {
   DynamicFormEditor
-} from "../chunk-FJEDSUGU.js";
+} from "../chunk-NEJCZABQ.js";
 import "../chunk-3DZIX4CE.js";
 import "../chunk-CBYIPRND.js";
+import "../chunk-Z7WNKARH.js";
 import "../chunk-D4U2ZV2A.js";
 import "../chunk-V7KAHLW2.js";
 import "../chunk-SQ3FYBJT.js";
 import "../chunk-NK6S7ZMB.js";
-import "../chunk-Z7WNKARH.js";
 import "../chunk-FAL6S2XK.js";
 import "../chunk-AELKCD6B.js";
 import "../chunk-5XYPLDI5.js";
@@ -31,7 +31,8 @@ import "../chunk-2LCH3PDF.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-RP2RGCAW.js";
 import "../chunk-VOME2TE7.js";
-import "../chunk-JVXATVAC.js";
+import "../chunk-2PPLSZ4P.js";
+import "../chunk-2FJ4LW7E.js";
 import "../chunk-B3VSXNTH.js";
 import "../chunk-ZQE7SP6P.js";
 import "../chunk-R6ARPREO.js";
@@ -42,7 +43,7 @@ import "../chunk-QO6KO6MN.js";
 import "../chunk-5KNRHIIF.js";
 import "../chunk-6JRAI4G5.js";
 import "../chunk-776WBOKL.js";
-import "../chunk-2FJ4LW7E.js";
+import "../chunk-IAKMJR72.js";
 import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";

package/dist/molecules/empty-state.cjs

@@ -0,0 +1,328 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/molecules/empty-state.tsx
+var empty_state_exports = {};
+__export(empty_state_exports, {
+  EmptyState: () => EmptyState
+});
+module.exports = __toCommonJS(empty_state_exports);
+
+// src/atoms/flex.tsx
+var import_themes = require("@radix-ui/themes");
+
+// src/atoms/heading.tsx
+var import_themes2 = require("@radix-ui/themes");
+var import_clsx = require("clsx");
+var import_react = require("react");
+
+// src/utils/map-with-responsive.ts
+var mapWithResponsive = (args) => {
+  const { value, mapFn } = args;
+  if (typeof value === "string") {
+    return mapFn(value);
+  }
+  ;
+  if (typeof value === "object") {
+    const newObj = {};
+    let key;
+    for (key in value) {
+      newObj[key] = mapFn(value[key]);
+    }
+    return newObj;
+  }
+  return value;
+};
+
+// src/utils/clamp-style.ts
+var clampStyle = (lines) => ({
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  WebkitLineClamp: lines,
+  lineClamp: lines,
+  overflow: "hidden"
+});
+
+// src/utils/mono-style.ts
+var MONO_STYLE = {
+  fontFamily: 'var(--code-font-family, ui-monospace, "SF Mono", monospace)',
+  fontVariantNumeric: "tabular-nums"
+};
+
+// src/utils/resolve-color.ts
+var SEMANTIC_COLOR_MAP = {
+  error: "red",
+  neutral: "gray",
+  success: "green",
+  accent: void 0
+};
+var CUSTOM_COLOR_MAP = {
+  black: { className: "tipp-accent-black", fallbackColor: "gray" }
+};
+var isSemanticColor = (color) => color !== void 0 && color in SEMANTIC_COLOR_MAP;
+var isCustomColor = (color) => color !== void 0 && color in CUSTOM_COLOR_MAP;
+var resolveColor = (color) => {
+  if (isCustomColor(color)) {
+    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];
+    return { color: fallbackColor, className };
+  }
+  if (isSemanticColor(color)) {
+    return { color: SEMANTIC_COLOR_MAP[color] };
+  }
+  return { color };
+};
+
+// src/atoms/heading.tsx
+var import_themes3 = require("@radix-ui/themes");
+var import_jsx_runtime = require("react/jsx-runtime");
+var mapVariant = (variant) => {
+  switch (variant) {
+    case "heading1":
+      return "7";
+    case "heading2":
+      return "6";
+    case "heading3":
+      return "5";
+    case "heading4":
+      return "4";
+    case "heading5":
+      return "3";
+    default:
+      return void 0;
+  }
+};
+function Heading2(props) {
+  const _a = props, {
+    size,
+    children,
+    variant,
+    color,
+    className,
+    mono,
+    clamp,
+    style
+  } = _a, rest = __objRest(_a, [
+    "size",
+    "children",
+    "variant",
+    "color",
+    "className",
+    "mono",
+    "clamp",
+    "style"
+  ]);
+  const { color: radixColor, className: colorClassName } = (0, import_react.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  const radixSize = (0, import_react.useMemo)(() => {
+    return variant ? mapWithResponsive({
+      value: variant,
+      mapFn: mapVariant
+    }) : size;
+  }, [size, variant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes2.Heading,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx.clsx)(colorClassName, className),
+      color: radixColor,
+      size: radixSize,
+      style: __spreadValues(__spreadValues(__spreadValues({}, mono ? MONO_STYLE : null), clamp ? clampStyle(clamp) : null), style),
+      children
+    })
+  );
+}
+
+// src/atoms/typo.tsx
+var import_themes4 = require("@radix-ui/themes");
+var import_clsx2 = require("clsx");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Typo = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    const _a = props, {
+      size,
+      variant,
+      children,
+      color,
+      className,
+      mono,
+      clamp,
+      style
+    } = _a, rest = __objRest(_a, [
+      "size",
+      "variant",
+      "children",
+      "color",
+      "className",
+      "mono",
+      "clamp",
+      "style"
+    ]);
+    const { color: radixColor, className: colorClassName } = (0, import_react2.useMemo)(
+      () => resolveColor(color),
+      [color]
+    );
+    const radixSize = (0, import_react2.useMemo)(() => {
+      if (size !== void 0) return size;
+      if (variant === void 0) return "2";
+      return mapWithResponsive({
+        value: variant,
+        mapFn: (variantValue) => {
+          switch (variantValue) {
+            case "caption":
+              return "1";
+            case "subtitle":
+              return "3";
+            case "body":
+            default:
+              return "2";
+          }
+        }
+      });
+    }, [size, variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_themes4.Text,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx2.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize,
+        style: __spreadValues(__spreadValues(__spreadValues({}, mono ? MONO_STYLE : null), clamp ? clampStyle(clamp) : null), style),
+        children
+      })
+    );
+  }
+);
+Typo.displayName = "Typo";
+
+// src/icons/empty-box.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var EmptyBoxIcon = React2.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, { color = "currentColor", width = 120, height = 120 } = _b, props = __objRest(_b, ["color", "width", "height"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      __spreadProps(__spreadValues({
+        fill: color,
+        height,
+        viewBox: "0 0 462.035 462.035",
+        width,
+        xmlns: "http://www.w3.org/2000/svg"
+      }, props), {
+        ref: forwardedRef,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M457.83,158.441c-0.021-0.028-0.033-0.058-0.057-0.087l-50.184-62.48c-0.564-0.701-1.201-1.305-1.879-1.845c-2.16-2.562-5.355-4.225-8.967-4.225H65.292c-3.615,0-6.804,1.661-8.965,4.225c-0.678,0.54-1.316,1.138-1.885,1.845l-50.178,62.48c-0.023,0.029-0.034,0.059-0.057,0.087C1.655,160.602,0,163.787,0,167.39v193.07c0,6.5,5.27,11.771,11.77,11.771h438.496c6.5,0,11.77-5.271,11.77-11.771V167.39C462.037,163.787,460.381,160.602,457.83,158.441z M408.516,134.615l16.873,21.005h-16.873V134.615z M384.975,113.345v42.274H296.84c-2.514,0-4.955,0.805-6.979,2.293l-58.837,43.299l-58.849-43.305c-2.023-1.482-4.466-2.287-6.978-2.287H77.061v-42.274H384.975z M53.523,155.62H36.65l16.873-21.005V155.62z M438.498,348.69H23.54V179.16h137.796l62.711,46.148c4.15,3.046,9.805,3.052,13.954-0.005l62.698-46.144h137.799V348.69L438.498,348.69z" })
+      })
+    );
+  }
+);
+EmptyBoxIcon.displayName = "EmptyBoxIcon";
+
+// src/molecules/empty-state.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ICON_SIZE = {
+  illustration: 120,
+  compact: 56
+};
+function EmptyState(_a) {
+  var _b = _a, {
+    size = "illustration",
+    heading,
+    body,
+    icon
+  } = _b, flexProps = __objRest(_b, [
+    "size",
+    "heading",
+    "body",
+    "icon"
+  ]);
+  const isCompact = size === "compact";
+  const iconSize = ICON_SIZE[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_themes.Flex,
+    __spreadProps(__spreadValues({
+      align: "center",
+      direction: "column",
+      gap: isCompact ? "2" : "3",
+      justify: "center",
+      py: isCompact ? "5" : "9",
+      width: "100%"
+    }, flexProps), {
+      children: [
+        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          EmptyBoxIcon,
+          {
+            color: "var(--gray-8)",
+            height: iconSize,
+            width: iconSize
+          }
+        ),
+        heading || body ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes.Flex, { align: "center", direction: "column", gap: "1", children: [
+          heading ? isCompact ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Typo, { color: "gray", variant: "subtitle", children: heading }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { color: "gray", variant: "heading5", children: heading }) : null,
+          body ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Typo, { color: "gray", variant: isCompact ? "caption" : "body", children: body }) : null
+        ] }) : null
+      ]
+    })
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmptyState
+});
+//# sourceMappingURL=empty-state.cjs.map

package/dist/molecules/empty-state.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/molecules/empty-state.tsx","../../src/atoms/flex.tsx","../../src/atoms/heading.tsx","../../src/utils/map-with-responsive.ts","../../src/utils/clamp-style.ts","../../src/utils/mono-style.ts","../../src/utils/resolve-color.ts","../../src/atoms/typo.tsx","../../src/icons/empty-box.tsx"],"sourcesContent":["import type { FlexProps } from '@/atoms/flex';\nimport { Flex } from '@/atoms/flex';\nimport { Heading } from '@/atoms/heading';\nimport { Typo } from '@/atoms/typo';\nimport * as React from 'react';\nimport { EmptyBoxIcon } from '../icons/empty-box';\n\nexport type EmptyStateSize = 'illustration' | 'compact';\n\nexport type EmptyStateProps = FlexProps & {\n  /** 일러스트 크기 — illustration: 페이지 전체용(큰 일러스트), compact: 테이블 셀 등 좁은 곳(작은 일러스트) */\n  size?: EmptyStateSize;\n  /** 제목 텍스트 */\n  heading?: string;\n  /** 보조 설명 텍스트 */\n  body?: string;\n  /** 기본 empty-box 일러스트 대신 사용할 아이콘/이미지 */\n  icon?: React.ReactNode;\n};\n\nconst ICON_SIZE: Record<EmptyStateSize, number> = {\n  illustration: 120,\n  compact: 56,\n};\n\n/**\n * 데이터 없음(빈 상태)을 표시하는 공용 컴포넌트.\n * ExpandTable 등 데이터가 비는 모든 화면에서 공용으로 사용한다.\n */\nexport function EmptyState({\n  size = 'illustration',\n  heading,\n  body,\n  icon,\n  ...flexProps\n}: EmptyStateProps): React.ReactElement {\n  const isCompact = size === 'compact';\n  const iconSize = ICON_SIZE[size];\n\n  return (\n    <Flex\n      align=\"center\"\n      direction=\"column\"\n      gap={isCompact ? '2' : '3'}\n      justify=\"center\"\n      py={isCompact ? '5' : '9'}\n      width=\"100%\"\n      {...flexProps}\n    >\n      {icon ?? (\n        <EmptyBoxIcon\n          color=\"var(--gray-8)\"\n          height={iconSize}\n          width={iconSize}\n        />\n      )}\n      {heading || body ? (\n        <Flex align=\"center\" direction=\"column\" gap=\"1\">\n          {heading ? (\n            isCompact ? (\n              <Typo color=\"gray\" variant=\"subtitle\">\n                {heading}\n              </Typo>\n            ) : (\n              <Heading color=\"gray\" variant=\"heading5\">\n                {heading}\n              </Heading>\n            )\n          ) : null}\n          {body ? (\n            <Typo color=\"gray\" variant={isCompact ? 'caption' : 'body'}>\n              {body}\n            </Typo>\n          ) : null}\n        </Flex>\n      ) : null}\n    </Flex>\n  );\n}\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import {\n  Heading as RadixHeading,\n  type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { clsx } from 'clsx';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\nimport { clampStyle } from '../utils/clamp-style';\nimport { MONO_STYLE } from '../utils/mono-style';\nimport {\n  resolveColor,\n  type DistributiveOmit,\n  type UiColor,\n} from '../utils/resolve-color';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n  | 'heading1'\n  | 'heading2'\n  | 'heading3'\n  | 'heading4'\n  | 'heading5';\nexport type HeadingProps = DistributiveOmit<RadixHeadingProps, 'color'> & {\n  variant?: Responsive<HeadingVariant>;\n  color?: UiColor;\n  /** 등폭(monospace) 폰트 + 숫자 고정폭 정렬(tabular-nums). 점수·퍼센트 등 수치 표시에 사용한다. */\n  mono?: boolean;\n  /** 여러 줄 말줄임(line-clamp). 지정한 줄 수까지만 표시하고 넘치면 …로 자른다. */\n  clamp?: number;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n  switch (variant) {\n    case 'heading1':\n      return '7';\n    case 'heading2':\n      return '6';\n    case 'heading3':\n      return '5';\n    case 'heading4':\n      return '4';\n    case 'heading5':\n      return '3';\n    default:\n      return undefined;\n  }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n  const {\n    size,\n    children,\n    variant,\n    color,\n    className,\n    mono,\n    clamp,\n    style,\n    ...rest\n  } = props;\n\n  const { color: radixColor, className: colorClassName } = useMemo(\n    () => resolveColor(color),\n    [color]\n  );\n\n  const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n    return variant\n      ? mapWithResponsive({\n          value: variant,\n          mapFn: mapVariant,\n        })\n      : size;\n\n  }, [size, variant]);\n\n  return (\n    <RadixHeading\n      {...rest}\n      className={clsx(colorClassName, className)}\n      color={radixColor}\n      size={radixSize}\n      style={{\n        ...(mono ? MONO_STYLE : null),\n        ...(clamp ? clampStyle(clamp) : null),\n        ...style,\n      }}\n    >\n      {children}\n    </RadixHeading>\n  );\n}\n","import type {  Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n  const {value, mapFn} = args;\n  if(typeof value === 'string'){\n    return mapFn(value);\n  };\n  \n  if(typeof value === 'object'){\n    const newObj: Partial<Record<Breakpoint, K>> = {};\n    let key: Breakpoint;\n    for(key in value){\n      newObj[key] = mapFn(value[key]);\n    }\n    return newObj;\n  }\n  return value;\n};\n","import type { CSSProperties } from 'react';\n\n/**\n * 여러 줄 말줄임(line-clamp) 스타일. 지정한 줄 수까지만 표시하고 넘치면 `…`로 자른다.\n *\n * Radix의 `truncate`(white-space:nowrap 강제 1줄)와 달리, 줄바꿈을 허용한 뒤\n * `lines` 줄에서 자른다. `Typo`/`Heading`의 `clamp` prop 구현에 사용된다.\n *\n * @param lines - 표시할 최대 줄 수 (1, 2, 3 …)\n */\nexport const clampStyle = (lines: number): CSSProperties => ({\n  display: '-webkit-box',\n  WebkitBoxOrient: 'vertical',\n  WebkitLineClamp: lines,\n  lineClamp: lines,\n  overflow: 'hidden',\n});\n","import type { CSSProperties } from 'react';\n\n/**\n * 등폭(monospace) 텍스트 스타일.\n * - `font-family`: 등폭 폰트(`--code-font-family`는 Radix Themes가 제공, 없으면 시스템 등폭으로 폴백)\n * - `font-variant-numeric: tabular-nums`: 숫자를 고정폭으로 정렬해 점수·퍼센트·통계가 자릿수마다 흔들리지 않게 함\n *\n * `Typo`/`Heading`의 `mono` prop 구현에 사용된다.\n */\nexport const MONO_STYLE: CSSProperties = {\n  fontFamily: 'var(--code-font-family, ui-monospace, \"SF Mono\", monospace)',\n  fontVariantNumeric: 'tabular-nums',\n};\n","import type { BadgeProps as RadixBadgeProps } from '@radix-ui/themes';\n\n/**\n * Radix Themes가 제공하는 accent color union (gray, red, blue, ...).\n * 모든 color 지원 컴포넌트가 동일한 union을 공유하므로 Badge에서 파생한다.\n */\nexport type RadixColor = NonNullable<RadixBadgeProps['color']>;\n\n/** TIPP 시맨틱 color 별칭. */\nexport type SemanticColor = 'error' | 'accent' | 'neutral' | 'success';\n\n/**\n * Radix accent에 대응이 없어 CSS accent override로 처리하는 커스텀 color.\n * (예: black — `style/black.scss`의 `.tipp-accent-black` 참고)\n */\nexport type CustomColor = 'black';\n\n/** color 지원 컴포넌트가 노출하는 통합 color 타입. */\nexport type UiColor = RadixColor | SemanticColor | CustomColor;\n\n/**\n * union 각 멤버에 분배되는 Omit.\n * Radix의 polymorphic 컴포넌트 props(Text/Heading/Link 등 `as`로 분기되는 union)에서\n * 키를 제거할 때 일반 Omit은 union을 단일 객체로 합쳐 `as` 분기를 무너뜨리므로 이 타입을 쓴다.\n */\nexport type DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nconst SEMANTIC_COLOR_MAP: Record<SemanticColor, RadixColor | undefined> = {\n  error: 'red',\n  neutral: 'gray',\n  success: 'green',\n  accent: undefined,\n};\n\ninterface CustomColorConfig {\n  /**\n   * accent override를 적용할 className.\n   */\n  className: string;\n  /**\n   * Radix에 넘길 fallback color.\n   * Text/Heading/Link 등은 `color` prop이 있어야 `data-accent-color`가 붙어\n   * `--accent-*`를 참조하므로, 유효한 Radix color를 함께 넘긴 뒤 className으로\n   * `--accent-*`를 덮어쓴다. (Badge/Button은 prop 없이도 accent 기반이라 무해)\n   */\n  fallbackColor: RadixColor;\n}\n\nconst CUSTOM_COLOR_MAP: Record<CustomColor, CustomColorConfig> = {\n  black: { className: 'tipp-accent-black', fallbackColor: 'gray' },\n};\n\nconst isSemanticColor = (color?: UiColor): color is SemanticColor =>\n  color !== undefined && color in SEMANTIC_COLOR_MAP;\n\nconst isCustomColor = (color?: UiColor): color is CustomColor =>\n  color !== undefined && color in CUSTOM_COLOR_MAP;\n\nexport interface ResolvedColor {\n  /** Radix 컴포넌트의 `color` prop에 그대로 전달할 값. custom color면 undefined. */\n  color?: RadixColor;\n  /** accent override를 적용하기 위해 요소에 붙일 className. */\n  className?: string;\n}\n\n/**\n * 통합 color 입력을 Radix color prop과 className으로 정규화한다.\n *\n * - custom color(black 등): Radix color는 비우고 accent override className을 반환\n * - semantic color(error/neutral/success/accent): 대응 Radix color로 변환\n * - Radix color: 그대로 pass-through\n */\nexport const resolveColor = (color?: UiColor): ResolvedColor => {\n  if (isCustomColor(color)) {\n    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];\n    return { color: fallbackColor, className };\n  }\n\n  if (isSemanticColor(color)) {\n    return { color: SEMANTIC_COLOR_MAP[color] };\n  }\n\n  return { color };\n};\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\nimport { clampStyle } from '../utils/clamp-style';\nimport { MONO_STYLE } from '../utils/mono-style';\nimport {\n  resolveColor,\n  type DistributiveOmit,\n  type UiColor,\n} from '../utils/resolve-color';\n\nexport type TypoProps = DistributiveOmit<RadixTextProps, 'color'> & {\n  variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n  color?: UiColor;\n  /** 등폭(monospace) 폰트 + 숫자 고정폭 정렬(tabular-nums). 점수·퍼센트 등 수치 표시에 사용한다. */\n  mono?: boolean;\n  /** 여러 줄 말줄임(line-clamp). 지정한 줄 수까지만 표시하고 넘치면 …로 자른다. */\n  clamp?: number;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactNode => {\n    const {\n      size,\n      variant,\n      children,\n      color,\n      className,\n      mono,\n      clamp,\n      style,\n      ...rest\n    } = props;\n\n    const { color: radixColor, className: colorClassName } = useMemo(\n      () => resolveColor(color),\n      [color]\n    );\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n\n      if (variant === undefined) return '2';\n\n      return mapWithResponsive({\n        value: variant,\n        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n          switch (variantValue) {\n            case 'caption':\n              return '1';\n            case 'subtitle':\n              return '3';\n            case 'body':\n            default:\n              return '2';\n          }\n        },\n      });\n    }, [size, variant]);\n\n    return (\n      <RadixText\n        {...rest}\n        className={clsx(colorClassName, className)}\n        color={radixColor}\n        ref={ref}\n        size={radixSize}\n        style={{\n          ...(mono ? MONO_STYLE : null),\n          ...(clamp ? clampStyle(clamp) : null),\n          ...style,\n        }}\n      >\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\n/**\n * 빈 상태(데이터 없음)를 나타내는 빈 상자 일러스트.\n * 단색 아이콘이므로 `color`(기본 currentColor)로 색을 지정한다.\n * 크기는 width/height prop으로 조절한다(기본 120).\n *\n * Source: https://www.svgrepo.com/svg/97068/empty-box (License: CC0)\n */\nexport const EmptyBoxIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ color = 'currentColor', width = 120, height = 120, ...props }, forwardedRef) => {\n    return (\n      <svg\n        fill={color}\n        height={height}\n        viewBox=\"0 0 462.035 462.035\"\n        width={width}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n        ref={forwardedRef}\n      >\n        <path d=\"M457.83,158.441c-0.021-0.028-0.033-0.058-0.057-0.087l-50.184-62.48c-0.564-0.701-1.201-1.305-1.879-1.845c-2.16-2.562-5.355-4.225-8.967-4.225H65.292c-3.615,0-6.804,1.661-8.965,4.225c-0.678,0.54-1.316,1.138-1.885,1.845l-50.178,62.48c-0.023,0.029-0.034,0.059-0.057,0.087C1.655,160.602,0,163.787,0,167.39v193.07c0,6.5,5.27,11.771,11.77,11.771h438.496c6.5,0,11.77-5.271,11.77-11.771V167.39C462.037,163.787,460.381,160.602,457.83,158.441z M408.516,134.615l16.873,21.005h-16.873V134.615z M384.975,113.345v42.274H296.84c-2.514,0-4.955,0.805-6.979,2.293l-58.837,43.299l-58.849-43.305c-2.023-1.482-4.466-2.287-6.978-2.287H77.061v-42.274H384.975z M53.523,155.62H36.65l16.873-21.005V155.62z M438.498,348.69H23.54V179.16h137.796l62.711,46.148c4.15,3.046,9.805,3.052,13.954-0.005l62.698-46.144h137.799V348.69L438.498,348.69z\" />\n      </svg>\n    );\n  }\n);\n\nEmptyBoxIcon.displayName = 'EmptyBoxIcon';\n"],"mappings":"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","names":["import_themes","import_themes","Heading","RadixHeading","import_themes","import_clsx","import_react","import_jsx_runtime","RadixText","React","import_jsx_runtime","import_jsx_runtime","Heading"]}

package/dist/molecules/empty-state.d.cts

@@ -0,0 +1,21 @@
+import { FlexProps } from '@radix-ui/themes';
+import * as React from 'react';
+
+type EmptyStateSize = 'illustration' | 'compact';
+type EmptyStateProps = FlexProps & {
+    /** 일러스트 크기 — illustration: 페이지 전체용(큰 일러스트), compact: 테이블 셀 등 좁은 곳(작은 일러스트) */
+    size?: EmptyStateSize;
+    /** 제목 텍스트 */
+    heading?: string;
+    /** 보조 설명 텍스트 */
+    body?: string;
+    /** 기본 empty-box 일러스트 대신 사용할 아이콘/이미지 */
+    icon?: React.ReactNode;
+};
+/**
+ * 데이터 없음(빈 상태)을 표시하는 공용 컴포넌트.
+ * ExpandTable 등 데이터가 비는 모든 화면에서 공용으로 사용한다.
+ */
+declare function EmptyState({ size, heading, body, icon, ...flexProps }: EmptyStateProps): React.ReactElement;
+
+export { EmptyState, type EmptyStateProps, type EmptyStateSize };

package/dist/molecules/empty-state.d.ts

@@ -0,0 +1,21 @@
+import { FlexProps } from '@radix-ui/themes';
+import * as React from 'react';
+
+type EmptyStateSize = 'illustration' | 'compact';
+type EmptyStateProps = FlexProps & {
+    /** 일러스트 크기 — illustration: 페이지 전체용(큰 일러스트), compact: 테이블 셀 등 좁은 곳(작은 일러스트) */
+    size?: EmptyStateSize;
+    /** 제목 텍스트 */
+    heading?: string;
+    /** 보조 설명 텍스트 */
+    body?: string;
+    /** 기본 empty-box 일러스트 대신 사용할 아이콘/이미지 */
+    icon?: React.ReactNode;
+};
+/**
+ * 데이터 없음(빈 상태)을 표시하는 공용 컴포넌트.
+ * ExpandTable 등 데이터가 비는 모든 화면에서 공용으로 사용한다.
+ */
+declare function EmptyState({ size, heading, body, icon, ...flexProps }: EmptyStateProps): React.ReactElement;
+
+export { EmptyState, type EmptyStateProps, type EmptyStateSize };

package/dist/molecules/empty-state.js

@@ -0,0 +1,16 @@
+import {
+  EmptyState
+} from "../chunk-2EPKY2VT.js";
+import "../chunk-USGOLLYO.js";
+import "../chunk-L4QQGIYQ.js";
+import "../chunk-LDBWASUA.js";
+import "../chunk-PO2PBAHW.js";
+import "../chunk-36W7VD2Z.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-IAKMJR72.js";
+import "../chunk-VFQD57ZY.js";
+import "../chunk-CRTRMMJ7.js";
+export {
+  EmptyState
+};
+//# sourceMappingURL=empty-state.js.map

package/dist/molecules/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}