@x-plat/design-system 0.1.5 → 0.2.1

package/dist/components/Button/index.d.cts

@@ -1,131 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { B as ButtonAttributes } from '../../attributes-DJIWir_0.cjs';
-import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.cjs';
+import { a as ColorNamespace, b as ColorName, e as ColorProps } from '../../colors-DmMsWD7G.cjs';
 
 type ButtonType = "primary" | "secondary";
+type ButtonSize = "sm" | "md" | "lg";
 interface ButtonProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ButtonAttributes, ColorProps<N, C> {
     children: React.ReactNode;
     type?: ButtonType;
+    size?: ButtonSize;
 }
 declare const Button: {
-    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
-        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";
-        };
-    }[N]>(props: ButtonProps<N, C>): react_jsx_runtime.JSX.Element;
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>>(props: ButtonProps<N, C>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/components/Button/index.d.ts

@@ -1,131 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { B as ButtonAttributes } from '../../attributes-DJIWir_0.js';
-import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.js';
+import { a as ColorNamespace, b as ColorName, e as ColorProps } from '../../colors-DmMsWD7G.js';
 
 type ButtonType = "primary" | "secondary";
+type ButtonSize = "sm" | "md" | "lg";
 interface ButtonProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ButtonAttributes, ColorProps<N, C> {
     children: React.ReactNode;
     type?: ButtonType;
+    size?: ButtonSize;
 }
 declare const Button: {
-    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
-        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";
-        };
-    }[N]>(props: ButtonProps<N, C>): react_jsx_runtime.JSX.Element;
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>>(props: ButtonProps<N, C>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/components/Button/index.js

@@ -125,7 +125,7 @@ var getColorClass = (namespace, palette, shade) => {
   return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
 };
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -147,6 +147,7 @@ var Button = (props) => {
   const {
     children,
     type = "primary",
+    size = "md",
     colorNamespace = "xplat",
     color = "black",
     colorDepth,
@@ -162,7 +163,7 @@ var Button = (props) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, colorClass, className),
+      className: clsx_default("lib-xplat-button", type, size, colorClass, className),
       disabled,
       ...rest,
       children

package/dist/components/Card/index.cjs

@@ -24,7 +24,7 @@ __export(Card_exports, {
 });
 module.exports = __toCommonJS(Card_exports);
 
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/components/Card/index.css

@@ -7,13 +7,13 @@
   max-width: 100%;
   height: fit-content;
   border-radius: 1rem;
-  border: 1px solid #A1A1A1;
-  background-color: #FFFFFF;
+  border: 1px solid var(--xplat-neutral-400);
+  background-color: var(--xplat-white);
   overflow: hidden;
 }
 .lib-xplat-card > .title {
   font-weight: 600;
-  background-color: #F5F5F5;
+  background-color: var(--xplat-neutral-100);
   padding: 0.25rem 0.75rem;
   min-width: 0;
   overflow: hidden;

package/dist/components/Card/index.js

@@ -1,4 +1,4 @@
-// node_modules/clsx/dist/clsx.mjs
+// ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;

package/dist/components/CardTab/index.cjs

@@ -0,0 +1,124 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __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/components/CardTab/index.ts
+var CardTab_exports = {};
+__export(CardTab_exports, {
+  CardTab: () => CardTab_default
+});
+module.exports = __toCommonJS(CardTab_exports);
+
+// src/components/CardTab/CardTab.tsx
+var import_react = __toESM(require("react"), 1);
+
+// ../../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/CardTab/CardTabPanel.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CardTabPanel = (props) => {
+  const { children, columns = 3, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: clsx_default("card-tab-panel", className),
+      style: { "--card-tab-columns": columns },
+      children
+    }
+  );
+};
+CardTabPanel.displayName = "CardTab.Panel";
+var CardTabPanel_default = CardTabPanel;
+
+// src/components/CardTab/CardTab.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CardTabRoot = (props) => {
+  const {
+    tabs,
+    activeValue: activeValueProp,
+    onChange,
+    size = "md",
+    children,
+    className
+  } = props;
+  const isControlled = activeValueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = import_react.default.useState(tabs[0]?.value ?? "");
+  const activeValue = isControlled ? activeValueProp : uncontrolledValue;
+  const handleTabClick = (tab) => {
+    if (!isControlled) {
+      setUncontrolledValue(tab.value);
+    }
+    onChange?.(tab);
+  };
+  const panels = import_react.default.Children.toArray(children).filter(
+    (child) => import_react.default.isValidElement(child) && child.type === CardTabPanel_default
+  );
+  const activePanel = panels.find(
+    (panel) => panel.props.value === activeValue
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: clsx_default("lib-xplat-card-tab", size, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card-tab-bar", children: tabs.map((tab) => {
+      const isActive = tab.value === activeValue;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          className: clsx_default("card-tab-trigger", isActive && "active"),
+          onClick: () => handleTabClick(tab),
+          role: "tab",
+          "aria-selected": isActive,
+          children: tab.title
+        },
+        tab.value
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card-tab-body", children: activePanel })
+  ] });
+};
+CardTabRoot.displayName = "CardTab";
+var CardTab = Object.assign(CardTabRoot, {
+  Panel: CardTabPanel_default
+});
+var CardTab_default = CardTab;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CardTab
+});

package/dist/components/CardTab/index.css

@@ -0,0 +1,78 @@
+/* src/components/CardTab/cardTab.scss */
+.lib-xplat-card-tab {
+  display: flex;
+  flex-direction: column;
+}
+.lib-xplat-card-tab .card-tab-bar {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  padding-left: 0.5rem;
+}
+.lib-xplat-card-tab .card-tab-trigger {
+  position: relative;
+  cursor: pointer;
+  border: 1px solid var(--xplat-neutral-300);
+  border-bottom: none;
+  border-radius: 0.5rem 0.5rem 0 0;
+  background-color: var(--xplat-neutral-100);
+  color: var(--xplat-neutral-500);
+  font-weight: 500;
+  transition: background-color 0.2s, color 0.2s;
+}
+.lib-xplat-card-tab .card-tab-trigger:hover:not(.active) {
+  background-color: var(--xplat-neutral-200);
+  color: var(--xplat-neutral-700);
+}
+.lib-xplat-card-tab .card-tab-trigger.active {
+  background-color: var(--xplat-white);
+  color: var(--xplat-neutral-900);
+  font-weight: 600;
+  z-index: 1;
+  margin-bottom: -1px;
+  padding-bottom: calc(var(--tab-py) + 1px);
+}
+.lib-xplat-card-tab .card-tab-body {
+  border: 1px solid var(--xplat-neutral-300);
+  border-radius: 0 0.5rem 0.5rem 0.5rem;
+  background-color: var(--xplat-white);
+  padding: 1.25rem;
+}
+.lib-xplat-card-tab .card-tab-panel {
+  display: grid;
+  grid-template-columns: repeat(var(--card-tab-columns, 3), 1fr);
+  gap: 1rem;
+}
+.lib-xplat-card-tab.sm .card-tab-trigger {
+  --tab-py: 0.25rem;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8125rem;
+}
+.lib-xplat-card-tab.sm .card-tab-body {
+  padding: 1rem;
+}
+.lib-xplat-card-tab.sm .card-tab-panel {
+  gap: 0.75rem;
+}
+.lib-xplat-card-tab.md .card-tab-trigger {
+  --tab-py: 0.375rem;
+  padding: 0.375rem 1rem;
+  font-size: 0.875rem;
+}
+.lib-xplat-card-tab.md .card-tab-body {
+  padding: 1.25rem;
+}
+.lib-xplat-card-tab.md .card-tab-panel {
+  gap: 1rem;
+}
+.lib-xplat-card-tab.lg .card-tab-trigger {
+  --tab-py: 0.5rem;
+  padding: 0.5rem 1.25rem;
+  font-size: 1rem;
+}
+.lib-xplat-card-tab.lg .card-tab-body {
+  padding: 1.5rem;
+}
+.lib-xplat-card-tab.lg .card-tab-panel {
+  gap: 1.25rem;
+}

package/dist/components/CardTab/index.d.cts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface CardTabPanelProps {
+    /** tabs 배열의 value 와 매칭 */
+    value: string | number;
+    children: React.ReactNode;
+    /** 카드 그리드 열 수 (기본 3) */
+    columns?: number;
+    className?: string;
+}
+declare const CardTabPanel: {
+    (props: CardTabPanelProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface CardTabItem {
+    value: string | number;
+    title: string;
+}
+type CardTabPanelElement = React.ReactElement<CardTabPanelProps, typeof CardTabPanel>;
+type CardTabSize = "sm" | "md" | "lg";
+interface CardTabProps {
+    tabs: CardTabItem[];
+    /** controlled: 외부에서 활성 탭 제어 */
+    activeValue?: string | number;
+    /** 탭 변경 콜백 */
+    onChange?: (tab: CardTabItem) => void;
+    size?: CardTabSize;
+    /** CardTab.Panel 만 허용 */
+    children: CardTabPanelElement | CardTabPanelElement[];
+    className?: string;
+}
+declare const CardTab: {
+    (props: CardTabProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Panel: {
+        (props: CardTabPanelProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+};
+
+export { CardTab };

package/dist/components/CardTab/index.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface CardTabPanelProps {
+    /** tabs 배열의 value 와 매칭 */
+    value: string | number;
+    children: React.ReactNode;
+    /** 카드 그리드 열 수 (기본 3) */
+    columns?: number;
+    className?: string;
+}
+declare const CardTabPanel: {
+    (props: CardTabPanelProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface CardTabItem {
+    value: string | number;
+    title: string;
+}
+type CardTabPanelElement = React.ReactElement<CardTabPanelProps, typeof CardTabPanel>;
+type CardTabSize = "sm" | "md" | "lg";
+interface CardTabProps {
+    tabs: CardTabItem[];
+    /** controlled: 외부에서 활성 탭 제어 */
+    activeValue?: string | number;
+    /** 탭 변경 콜백 */
+    onChange?: (tab: CardTabItem) => void;
+    size?: CardTabSize;
+    /** CardTab.Panel 만 허용 */
+    children: CardTabPanelElement | CardTabPanelElement[];
+    className?: string;
+}
+declare const CardTab: {
+    (props: CardTabProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Panel: {
+        (props: CardTabPanelProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+};
+
+export { CardTab };