@x-plat/design-system 0.1.1

package/README.md

@@ -0,0 +1,123 @@
+# @x-plat/design-system
+
+XPLAT UI 디자인 시스템. React 컴포넌트, 레이아웃, 토큰(색상·브레이크포인트)을 제공합니다.
+
+---
+
+## 요구 사항
+
+| 항목 | 버전 |
+|------|------|
+| Node.js | 18+ |
+| React | 18+ |
+
+---
+
+## 설치
+
+```bash
+yarn add @x-plat/design-system
+```
+
+또는
+
+```bash
+npm install @x-plat/design-system
+```
+
+---
+
+## 사용법
+
+### 1. 스타일 로드 (필수)
+
+앱 진입점에서 한 번만 불러옵니다. **반드시 `style.css` 경로를 사용하세요.** (`index.css`는 패키지에서 export되지 않습니다.)
+
+```tsx
+import "@x-plat/design-system/style.css";
+```
+
+### 2. Import 방식 요약
+
+| 방식 | 예시 |
+|------|------|
+| **루트 barrel** | `import { Button, colors } from "@x-plat/design-system"` |
+| **서브패스 barrel** | `import { Button } from "@x-plat/design-system/components"` |
+| **Deep import** | `import Button from "@x-plat/design-system/components/Button"` |
+
+### 3. 루트 barrel
+
+```tsx
+import { Button, Layout, FullGrid, GridItem, colors } from "@x-plat/design-system";
+```
+
+### 4. 서브패스 barrel
+
+```tsx
+import { Button, Chip } from "@x-plat/design-system/components";
+import { Layout, Grid, Header, SideBar } from "@x-plat/design-system/layout";
+import { colors, breakpoints } from "@x-plat/design-system";
+```
+
+### 5. Deep import
+
+```tsx
+import Button from "@x-plat/design-system/components/Button";
+import Layout from "@x-plat/design-system/layout/Layout";
+import FullGrid from "@x-plat/design-system/layout/Grid/FullGrid";
+import GridItem from "@x-plat/design-system/layout/Grid/Item";
+```
+
+---
+
+## 개발
+
+### 스크립트
+
+| 명령어 | 설명 |
+|--------|------|
+| `npm run build` | 테마·그리드 생성 후 빌드 |
+| `npm run generate-theme` | `tokens/colors.ts` → `styles/colors.scss` |
+| `npm run generate-grid` | `tokens/breakpoints.ts` → `styles/_screen-generated.scss` |
+| `npm run dev` | tsup watch |
+| `npm run clean` | `dist` 삭제 |
+| `npm run lint` | ESLint (import 순서 등) |
+| `npm run lint:fix` | import 순서 자동 수정 |
+
+### 코드 생성 흐름
+
+- **색상**: `src/tokens/colors.ts` 수정 → `npm run generate-theme` → `src/styles/colors.scss` 갱신
+- **브레이크포인트/그리드**: `src/tokens/breakpoints.ts` 수정 → `npm run generate-grid` → `src/styles/_screen-generated.scss` 갱신
+
+---
+
+## 프로젝트 구조
+
+```
+src/
+├── index.ts
+├── components/     # Button, Card, Chart, CheckBox, Chip, DatePicker, Input, Modal, Radio, Switch, Tab, Table, TextArea, Tooltip, Swiper, ...
+├── layout/         # Layout, Header, SideBar, Grid(FullGrid, FullScreen, GapGrid, Item)
+├── tokens/         # colors, breakpoints, interface, hooks, svg
+├── styles/         # colors.scss, screen.scss, utils, _screen-generated.scss
+└── util/
+```
+
+---
+
+## 세부 문서
+
+| 경로 | 내용 |
+|------|------|
+| [src/components/README.md](src/components/README.md) | 컴포넌트 목록, import |
+| [src/layout/README.md](src/layout/README.md) | 레이아웃 |
+| [src/layout/Grid/README.md](src/layout/Grid/README.md) | Grid, 브레이크포인트 |
+| [src/tokens/README.md](src/tokens/README.md) | 토큰(colors, breakpoints) |
+| [src/tokens/interface/README.md](src/tokens/interface/README.md) | 타입 정의 |
+| [src/styles/README.md](src/styles/README.md) | 글로벌 SCSS |
+
+---
+
+## 라이선스
+
+Private. XPLAT WOONG.

package/dist/attributes-DJIWir_0.d.cts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+type InputAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "color" | "error">;
+type ButtonAttributes = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "color" | "error">;
+type TextareaAttributes = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "type" | "color" | "error">;
+
+export type { ButtonAttributes as B, InputAttributes as I, TextareaAttributes as T };

package/dist/attributes-DJIWir_0.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+type InputAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "color" | "error">;
+type ButtonAttributes = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "color" | "error">;
+type TextareaAttributes = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "type" | "color" | "error">;
+
+export type { ButtonAttributes as B, InputAttributes as I, TextareaAttributes as T };

package/dist/breakpoints-DsXkJgdl.d.cts

@@ -0,0 +1,35 @@
+/**
+ * 브레이크포인트/그리드 설정 (세팅값만).
+ * 수정 후 `npm run generate-grid` 실행 → styles/_screen-generated.scss 갱신.
+ * 타입은 tokens/interface/breakpoints.ts 또는 src/tokens 에서 export.
+ */
+/** 브레이크포인트 키 (뷰포트 큰 순). 새 브레이크 추가 시 breakpoints·gridColumns 에 동일 키 추가 */
+declare const BREAKPOINT_KEYS_ORDERED: readonly ["laptop", "tablet", "mobile"];
+/** 각 브레이크의 min-width(px). SCSS 미디어 쿼리 min/max 는 generate-grid 에서 자동 계산 */
+declare const breakpoints: {
+    readonly laptop: 1024;
+    readonly tablet: 768;
+    readonly mobile: 0;
+};
+/** 브레이크포인트별 최대 컬럼 수 */
+declare const gridColumns: {
+    readonly laptop: 12;
+    readonly tablet: 8;
+    readonly mobile: 4;
+};
+
+type BreakpointKey = (typeof BREAKPOINT_KEYS_ORDERED)[number];
+type TupleOfLength<N extends number, Acc extends unknown[] = []> = Acc["length"] extends N ? Acc : TupleOfLength<N, [...Acc, unknown]>;
+type Enumerate<T extends unknown[]> = T extends [unknown, ...infer R] ? R["length"] | Enumerate<R> : never;
+type OneToN<N extends number> = Exclude<Enumerate<[...TupleOfLength<N>, unknown]>, 0>;
+/** 특정 브레이크의 span 타입 (1 ~ gridColumns[K]) */
+type GridSpanFor<K extends BreakpointKey> = OneToN<(typeof gridColumns)[K]>;
+type DefaultBreakpointKey = (typeof BREAKPOINT_KEYS_ORDERED)[0];
+/** GridItem column prop — 브레이크 추가 시 자동으로 해당 키 타입 추가됨 */
+type GridColumnConfig = {
+    default: GridSpanFor<DefaultBreakpointKey>;
+} & {
+    [K in BreakpointKey]?: GridSpanFor<K>;
+};
+
+export { BREAKPOINT_KEYS_ORDERED as B, type GridSpanFor as G, type BreakpointKey as a, type GridColumnConfig as b, breakpoints as c, gridColumns as g };

package/dist/breakpoints-DsXkJgdl.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 브레이크포인트/그리드 설정 (세팅값만).
+ * 수정 후 `npm run generate-grid` 실행 → styles/_screen-generated.scss 갱신.
+ * 타입은 tokens/interface/breakpoints.ts 또는 src/tokens 에서 export.
+ */
+/** 브레이크포인트 키 (뷰포트 큰 순). 새 브레이크 추가 시 breakpoints·gridColumns 에 동일 키 추가 */
+declare const BREAKPOINT_KEYS_ORDERED: readonly ["laptop", "tablet", "mobile"];
+/** 각 브레이크의 min-width(px). SCSS 미디어 쿼리 min/max 는 generate-grid 에서 자동 계산 */
+declare const breakpoints: {
+    readonly laptop: 1024;
+    readonly tablet: 768;
+    readonly mobile: 0;
+};
+/** 브레이크포인트별 최대 컬럼 수 */
+declare const gridColumns: {
+    readonly laptop: 12;
+    readonly tablet: 8;
+    readonly mobile: 4;
+};
+
+type BreakpointKey = (typeof BREAKPOINT_KEYS_ORDERED)[number];
+type TupleOfLength<N extends number, Acc extends unknown[] = []> = Acc["length"] extends N ? Acc : TupleOfLength<N, [...Acc, unknown]>;
+type Enumerate<T extends unknown[]> = T extends [unknown, ...infer R] ? R["length"] | Enumerate<R> : never;
+type OneToN<N extends number> = Exclude<Enumerate<[...TupleOfLength<N>, unknown]>, 0>;
+/** 특정 브레이크의 span 타입 (1 ~ gridColumns[K]) */
+type GridSpanFor<K extends BreakpointKey> = OneToN<(typeof gridColumns)[K]>;
+type DefaultBreakpointKey = (typeof BREAKPOINT_KEYS_ORDERED)[0];
+/** GridItem column prop — 브레이크 추가 시 자동으로 해당 키 타입 추가됨 */
+type GridColumnConfig = {
+    default: GridSpanFor<DefaultBreakpointKey>;
+} & {
+    [K in BreakpointKey]?: GridSpanFor<K>;
+};
+
+export { BREAKPOINT_KEYS_ORDERED as B, type GridSpanFor as G, type BreakpointKey as a, type GridColumnConfig as b, breakpoints as c, gridColumns as g };

package/dist/colors-BG91q_uV.d.cts

@@ -0,0 +1,133 @@
+/**
+ * 색상 토큰 설정 (세팅값만).
+ * generate-theme 으로 styles/colors.scss 갱신.
+ * 타입은 tokens/interface/colors.ts 또는 src/tokens 에서 export.
+ */
+declare const colors: {
+    readonly xplat: {
+        readonly red: {
+            readonly 50: "#FFF0F0";
+            readonly 100: "#FFDDDE";
+            readonly 200: "#FFC1C2";
+            readonly 300: "#FF9698";
+            readonly 400: "#FF5A5D";
+            readonly 500: "#FF272B";
+            readonly 600: "#F80409";
+            readonly 700: "#D40105";
+            readonly 800: "#AE0609";
+            readonly 900: "#900C0F";
+        };
+        readonly green: {
+            readonly 50: "#E5F6EA";
+            readonly 100: "#C1E7CC";
+            readonly 200: "#98D8AC";
+            readonly 300: "#6CCA8B";
+            readonly 400: "#47BE72";
+            readonly 500: "#10B259";
+            readonly 600: "#00A34F";
+            readonly 700: "#009143";
+            readonly 800: "#007F38";
+            readonly 900: "#006024";
+        };
+        readonly orange: {
+            readonly 50: "#FFF8EC";
+            readonly 100: "#FFF0D3";
+            readonly 200: "#FFDDA5";
+            readonly 300: "#FFC46D";
+            readonly 400: "#FF9F32";
+            readonly 500: "#FF820A";
+            readonly 600: "#FF6900";
+            readonly 700: "#CC4B02";
+            readonly 800: "#A13A0B";
+            readonly 900: "#82320C";
+        };
+        readonly yellow: {
+            readonly 50: "#FFFDE7";
+            readonly 100: "#FFFAC1";
+            readonly 200: "#FFF186";
+            readonly 300: "#FFE041";
+            readonly 400: "#FFCC0D";
+            readonly 500: "#F0B100";
+            readonly 600: "#D18800";
+            readonly 700: "#A66002";
+            readonly 800: "#894B0A";
+            readonly 900: "#743D0F";
+        };
+        readonly blue: {
+            readonly 50: "#F1F4FD";
+            readonly 100: "#DFE7FA";
+            readonly 200: "#C5D4F8";
+            readonly 300: "#9EB8F2";
+            readonly 400: "#7093EA";
+            readonly 500: "#4D6DE3";
+            readonly 600: "#3950D7";
+            readonly 700: "#303EC5";
+            readonly 800: "#2D35A0";
+            readonly 900: "#29317F";
+        };
+        readonly lightblue: {
+            readonly 50: "#EEFAFF";
+            readonly 100: "#D9F4FF";
+            readonly 200: "#BBEDFF";
+            readonly 300: "#8DE3FF";
+            readonly 400: "#57D0FF";
+            readonly 500: "#30B6FF";
+            readonly 600: "#1999F7";
+            readonly 700: "#1280E3";
+            readonly 800: "#1566B8";
+            readonly 900: "#175791";
+        };
+        readonly purple: {
+            readonly 50: "#FBF6FE";
+            readonly 100: "#F5EAFD";
+            readonly 200: "#EDD8FC";
+            readonly 300: "#E0BAF8";
+            readonly 400: "#CD8DF3";
+            readonly 500: "#B961EB";
+            readonly 600: "#A541DC";
+            readonly 700: "#9230C5";
+            readonly 800: "#782B9E";
+            readonly 900: "#62247F";
+        };
+        readonly pink: {
+            readonly 50: "#FFF4FE";
+            readonly 100: "#FFE7FD";
+            readonly 200: "#FFCFFA";
+            readonly 300: "#FEA9F1";
+            readonly 400: "#FD75E7";
+            readonly 500: "#F553DA";
+            readonly 600: "#D821B6";
+            readonly 700: "#B31892";
+            readonly 800: "#921676";
+            readonly 900: "#781761";
+        };
+        readonly neutral: {
+            readonly 50: "#FAFAFA";
+            readonly 100: "#F5F5F5";
+            readonly 200: "#E5E5E5";
+            readonly 300: "#D4D4D4";
+            readonly 400: "#A1A1A1";
+            readonly 500: "#737373";
+            readonly 600: "#525252";
+            readonly 700: "#404040";
+            readonly 800: "#262626";
+            readonly 900: "#171717";
+        };
+        readonly black: "#000000";
+        readonly white: "#FFFFFF";
+    };
+    readonly test: {
+        readonly default: "#ffffff";
+    };
+};
+
+type ColorNamespace = keyof typeof colors;
+type ColorName<C extends ColorNamespace> = keyof (typeof colors)[C];
+type ColorDepth<C extends ColorNamespace, K extends ColorName<C>> = (typeof colors)[C][K] extends string ? undefined : keyof (typeof colors)[C][K];
+interface ColorProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> {
+    colorNamespace?: N;
+    color?: C;
+    colorDepth?: ColorDepth<N, C>;
+}
+
+export { type ColorNamespace as C, type ColorName as a, type ColorDepth as b, colors as c, type ColorProps as d };

package/dist/colors-BG91q_uV.d.ts

@@ -0,0 +1,133 @@
+/**
+ * 색상 토큰 설정 (세팅값만).
+ * generate-theme 으로 styles/colors.scss 갱신.
+ * 타입은 tokens/interface/colors.ts 또는 src/tokens 에서 export.
+ */
+declare const colors: {
+    readonly xplat: {
+        readonly red: {
+            readonly 50: "#FFF0F0";
+            readonly 100: "#FFDDDE";
+            readonly 200: "#FFC1C2";
+            readonly 300: "#FF9698";
+            readonly 400: "#FF5A5D";
+            readonly 500: "#FF272B";
+            readonly 600: "#F80409";
+            readonly 700: "#D40105";
+            readonly 800: "#AE0609";
+            readonly 900: "#900C0F";
+        };
+        readonly green: {
+            readonly 50: "#E5F6EA";
+            readonly 100: "#C1E7CC";
+            readonly 200: "#98D8AC";
+            readonly 300: "#6CCA8B";
+            readonly 400: "#47BE72";
+            readonly 500: "#10B259";
+            readonly 600: "#00A34F";
+            readonly 700: "#009143";
+            readonly 800: "#007F38";
+            readonly 900: "#006024";
+        };
+        readonly orange: {
+            readonly 50: "#FFF8EC";
+            readonly 100: "#FFF0D3";
+            readonly 200: "#FFDDA5";
+            readonly 300: "#FFC46D";
+            readonly 400: "#FF9F32";
+            readonly 500: "#FF820A";
+            readonly 600: "#FF6900";
+            readonly 700: "#CC4B02";
+            readonly 800: "#A13A0B";
+            readonly 900: "#82320C";
+        };
+        readonly yellow: {
+            readonly 50: "#FFFDE7";
+            readonly 100: "#FFFAC1";
+            readonly 200: "#FFF186";
+            readonly 300: "#FFE041";
+            readonly 400: "#FFCC0D";
+            readonly 500: "#F0B100";
+            readonly 600: "#D18800";
+            readonly 700: "#A66002";
+            readonly 800: "#894B0A";
+            readonly 900: "#743D0F";
+        };
+        readonly blue: {
+            readonly 50: "#F1F4FD";
+            readonly 100: "#DFE7FA";
+            readonly 200: "#C5D4F8";
+            readonly 300: "#9EB8F2";
+            readonly 400: "#7093EA";
+            readonly 500: "#4D6DE3";
+            readonly 600: "#3950D7";
+            readonly 700: "#303EC5";
+            readonly 800: "#2D35A0";
+            readonly 900: "#29317F";
+        };
+        readonly lightblue: {
+            readonly 50: "#EEFAFF";
+            readonly 100: "#D9F4FF";
+            readonly 200: "#BBEDFF";
+            readonly 300: "#8DE3FF";
+            readonly 400: "#57D0FF";
+            readonly 500: "#30B6FF";
+            readonly 600: "#1999F7";
+            readonly 700: "#1280E3";
+            readonly 800: "#1566B8";
+            readonly 900: "#175791";
+        };
+        readonly purple: {
+            readonly 50: "#FBF6FE";
+            readonly 100: "#F5EAFD";
+            readonly 200: "#EDD8FC";
+            readonly 300: "#E0BAF8";
+            readonly 400: "#CD8DF3";
+            readonly 500: "#B961EB";
+            readonly 600: "#A541DC";
+            readonly 700: "#9230C5";
+            readonly 800: "#782B9E";
+            readonly 900: "#62247F";
+        };
+        readonly pink: {
+            readonly 50: "#FFF4FE";
+            readonly 100: "#FFE7FD";
+            readonly 200: "#FFCFFA";
+            readonly 300: "#FEA9F1";
+            readonly 400: "#FD75E7";
+            readonly 500: "#F553DA";
+            readonly 600: "#D821B6";
+            readonly 700: "#B31892";
+            readonly 800: "#921676";
+            readonly 900: "#781761";
+        };
+        readonly neutral: {
+            readonly 50: "#FAFAFA";
+            readonly 100: "#F5F5F5";
+            readonly 200: "#E5E5E5";
+            readonly 300: "#D4D4D4";
+            readonly 400: "#A1A1A1";
+            readonly 500: "#737373";
+            readonly 600: "#525252";
+            readonly 700: "#404040";
+            readonly 800: "#262626";
+            readonly 900: "#171717";
+        };
+        readonly black: "#000000";
+        readonly white: "#FFFFFF";
+    };
+    readonly test: {
+        readonly default: "#ffffff";
+    };
+};
+
+type ColorNamespace = keyof typeof colors;
+type ColorName<C extends ColorNamespace> = keyof (typeof colors)[C];
+type ColorDepth<C extends ColorNamespace, K extends ColorName<C>> = (typeof colors)[C][K] extends string ? undefined : keyof (typeof colors)[C][K];
+interface ColorProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> {
+    colorNamespace?: N;
+    color?: C;
+    colorDepth?: ColorDepth<N, C>;
+}
+
+export { type ColorNamespace as C, type ColorName as a, type ColorDepth as b, colors as c, type ColorProps as d };

package/dist/components/Button/index.cjs

@@ -0,0 +1,203 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Button/index.ts
+var Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button_default
+});
+module.exports = __toCommonJS(Button_exports);
+
+// src/tokens/colors.ts
+var colors = {
+  xplat: {
+    red: {
+      50: "#FFF0F0",
+      100: "#FFDDDE",
+      200: "#FFC1C2",
+      300: "#FF9698",
+      400: "#FF5A5D",
+      500: "#FF272B",
+      600: "#F80409",
+      700: "#D40105",
+      800: "#AE0609",
+      900: "#900C0F"
+    },
+    green: {
+      50: "#E5F6EA",
+      100: "#C1E7CC",
+      200: "#98D8AC",
+      300: "#6CCA8B",
+      400: "#47BE72",
+      500: "#10B259",
+      600: "#00A34F",
+      700: "#009143",
+      800: "#007F38",
+      900: "#006024"
+    },
+    orange: {
+      50: "#FFF8EC",
+      100: "#FFF0D3",
+      200: "#FFDDA5",
+      300: "#FFC46D",
+      400: "#FF9F32",
+      500: "#FF820A",
+      600: "#FF6900",
+      700: "#CC4B02",
+      800: "#A13A0B",
+      900: "#82320C"
+    },
+    yellow: {
+      50: "#FFFDE7",
+      100: "#FFFAC1",
+      200: "#FFF186",
+      300: "#FFE041",
+      400: "#FFCC0D",
+      500: "#F0B100",
+      600: "#D18800",
+      700: "#A66002",
+      800: "#894B0A",
+      900: "#743D0F"
+    },
+    blue: {
+      50: "#F1F4FD",
+      100: "#DFE7FA",
+      200: "#C5D4F8",
+      300: "#9EB8F2",
+      400: "#7093EA",
+      500: "#4D6DE3",
+      600: "#3950D7",
+      700: "#303EC5",
+      800: "#2D35A0",
+      900: "#29317F"
+    },
+    lightblue: {
+      50: "#EEFAFF",
+      100: "#D9F4FF",
+      200: "#BBEDFF",
+      300: "#8DE3FF",
+      400: "#57D0FF",
+      500: "#30B6FF",
+      600: "#1999F7",
+      700: "#1280E3",
+      800: "#1566B8",
+      900: "#175791"
+    },
+    purple: {
+      50: "#FBF6FE",
+      100: "#F5EAFD",
+      200: "#EDD8FC",
+      300: "#E0BAF8",
+      400: "#CD8DF3",
+      500: "#B961EB",
+      600: "#A541DC",
+      700: "#9230C5",
+      800: "#782B9E",
+      900: "#62247F"
+    },
+    pink: {
+      50: "#FFF4FE",
+      100: "#FFE7FD",
+      200: "#FFCFFA",
+      300: "#FEA9F1",
+      400: "#FD75E7",
+      500: "#F553DA",
+      600: "#D821B6",
+      700: "#B31892",
+      800: "#921676",
+      900: "#781761"
+    },
+    neutral: {
+      50: "#FAFAFA",
+      100: "#F5F5F5",
+      200: "#E5E5E5",
+      300: "#D4D4D4",
+      400: "#A1A1A1",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717"
+    },
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  test: {
+    default: "#ffffff"
+  }
+};
+
+// src/util/getColor.ts
+var getColorClass = (namespace, palette, shade) => {
+  const namespaceMap = colors[namespace];
+  const paletteMap = namespaceMap[palette];
+  const hasShade = paletteMap && typeof paletteMap === "object" && shade !== void 0 && shade in paletteMap;
+  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
+};
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (props) => {
+  const {
+    children,
+    type = "primary",
+    colorNamespace = "xplat",
+    color = "black",
+    colorDepth,
+    disabled,
+    className,
+    ...rest
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      className: clsx_default("lib-xplat-button", type, colorClass, className),
+      disabled,
+      ...rest,
+      children
+    }
+  );
+};
+Button.displayName = "Button";
+var Button_default = Button;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});