@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/Card/index.cjs

@@ -24,26 +24,10 @@ __export(Card_exports, {
 });
 module.exports = __toCommonJS(Card_exports);
 
-// ../../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/Card/Card.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Card = ({ children, title, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-card", className), children: [
+var Card = ({ children, title }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-card", children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "content", children })
   ] });

package/dist/components/Card/index.css

@@ -5,15 +5,15 @@
   flex: 1;
   min-width: 0;
   height: fit-content;
-  border-radius: 1rem;
-  border: 1px solid var(--xplat-neutral-400);
-  background-color: var(--xplat-white);
+  border-radius: var(--spacing-radius-xl);
+  border: 1px solid var(--semantic-border-strong);
+  background-color: var(--semantic-surface-neutral-default);
   overflow: hidden;
 }
 .lib-xplat-card > .title {
   font-weight: 600;
-  background-color: var(--xplat-neutral-100);
-  padding: 0.25rem 0.75rem;
+  background-color: var(--semantic-surface-neutral-disabled);
+  padding: var(--spacing-space-1) var(--spacing-space-3);
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -22,5 +22,5 @@
 .lib-xplat-card > .content {
   display: flex;
   flex-direction: column;
-  padding: 1rem;
+  padding: var(--spacing-space-4);
 }

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

@@ -3,10 +3,6 @@ import React from 'react';
 interface CardProps {
     children: React.ReactNode;
     title?: string;
-    /**
-     * 추가 스타일링 용도
-     */
-    className?: string;
 }
 declare const Card: React.FC<CardProps>;
 

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

@@ -3,10 +3,6 @@ import React from 'react';
 interface CardProps {
     children: React.ReactNode;
     title?: string;
-    /**
-     * 추가 스타일링 용도
-     */
-    className?: string;
 }
 declare const Card: React.FC<CardProps>;
 

package/dist/components/Card/index.js

@@ -1,23 +1,7 @@
-// ../../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/Card/Card.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var Card = ({ children, title, className }) => {
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-card", className), children: [
+var Card = ({ children, title }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-card", children: [
     title && /* @__PURE__ */ jsx("div", { className: "title", children: title }),
     /* @__PURE__ */ jsx("div", { className: "content", children })
   ] });

package/dist/components/CardTab/index.cjs

@@ -56,11 +56,11 @@ 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;
+  const { children, columns = 3 } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: clsx_default("card-tab-panel", className),
+      className: "card-tab-panel",
       style: { "--card-tab-columns": columns },
       children
     }
@@ -77,8 +77,7 @@ var CardTabRoot = (props) => {
     activeValue: activeValueProp,
     onChange,
     size = "md",
-    children,
-    className
+    children
   } = props;
   const isControlled = activeValueProp !== void 0;
   const [uncontrolledValue, setUncontrolledValue] = import_react.default.useState(tabs[0]?.value ?? "");
@@ -95,7 +94,7 @@ var CardTabRoot = (props) => {
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: clsx_default("lib-xplat-card-tab", size), 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)(

package/dist/components/CardTab/index.css

@@ -11,67 +11,67 @@
 .lib-xplat-card-tab .card-tab-trigger {
   position: relative;
   cursor: pointer;
-  border: 1px solid var(--xplat-neutral-300);
+  border: 1px solid var(--semantic-border-default);
   border-bottom: none;
-  border-radius: 0.5rem 0.5rem 0 0;
-  background-color: var(--xplat-neutral-100);
-  color: var(--xplat-neutral-500);
+  border-radius: var(--spacing-radius-md) var(--spacing-radius-md) 0 0;
+  background-color: var(--semantic-surface-neutral-disabled);
+  color: var(--semantic-text-muted);
   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);
+  background-color: var(--semantic-surface-neutral-subtle);
+  color: var(--semantic-text-subtle);
 }
 .lib-xplat-card-tab .card-tab-trigger.active {
-  background-color: var(--xplat-white);
-  color: var(--xplat-neutral-900);
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-text-strong);
   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;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: 0 var(--spacing-radius-md) var(--spacing-radius-md) var(--spacing-radius-md);
+  background-color: var(--semantic-surface-neutral-default);
+  padding: var(--spacing-space-5);
 }
 .lib-xplat-card-tab .card-tab-panel {
   display: grid;
   grid-template-columns: repeat(var(--card-tab-columns, 3), 1fr);
-  gap: 1rem;
+  gap: var(--spacing-space-4);
 }
 .lib-xplat-card-tab.sm .card-tab-trigger {
-  --tab-py: 0.25rem;
-  padding: 0.25rem 0.75rem;
-  font-size: 0.8125rem;
+  --tab-py: var(--spacing-space-1);
+  padding: var(--spacing-space-1) var(--spacing-space-3);
+  font-size: 13px;
 }
 .lib-xplat-card-tab.sm .card-tab-body {
-  padding: 1rem;
+  padding: var(--spacing-space-4);
 }
 .lib-xplat-card-tab.sm .card-tab-panel {
-  gap: 0.75rem;
+  gap: var(--spacing-space-3);
 }
 .lib-xplat-card-tab.md .card-tab-trigger {
-  --tab-py: 0.375rem;
-  padding: 0.375rem 1rem;
-  font-size: 0.875rem;
+  --tab-py: 6px;
+  padding: 6px var(--spacing-space-4);
+  font-size: 14px;
 }
 .lib-xplat-card-tab.md .card-tab-body {
-  padding: 1.25rem;
+  padding: var(--spacing-space-5);
 }
 .lib-xplat-card-tab.md .card-tab-panel {
-  gap: 1rem;
+  gap: var(--spacing-space-4);
 }
 .lib-xplat-card-tab.lg .card-tab-trigger {
-  --tab-py: 0.5rem;
-  padding: 0.5rem 1.25rem;
-  font-size: 1rem;
+  --tab-py: var(--spacing-space-2);
+  padding: var(--spacing-space-2) var(--spacing-space-5);
+  font-size: 16px;
 }
 .lib-xplat-card-tab.lg .card-tab-body {
-  padding: 1.5rem;
+  padding: var(--spacing-space-6);
 }
 .lib-xplat-card-tab.lg .card-tab-panel {
-  gap: 1.25rem;
+  gap: var(--spacing-space-5);
 }

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

@@ -7,7 +7,6 @@ interface CardTabPanelProps {
     children: React.ReactNode;
     /** 카드 그리드 열 수 (기본 3) */
     columns?: number;
-    className?: string;
 }
 declare const CardTabPanel: {
     (props: CardTabPanelProps): react_jsx_runtime.JSX.Element;
@@ -29,7 +28,6 @@ interface CardTabProps {
     size?: CardTabSize;
     /** CardTab.Panel 만 허용 */
     children: CardTabPanelElement | CardTabPanelElement[];
-    className?: string;
 }
 declare const CardTab: {
     (props: CardTabProps): react_jsx_runtime.JSX.Element;

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

@@ -7,7 +7,6 @@ interface CardTabPanelProps {
     children: React.ReactNode;
     /** 카드 그리드 열 수 (기본 3) */
     columns?: number;
-    className?: string;
 }
 declare const CardTabPanel: {
     (props: CardTabPanelProps): react_jsx_runtime.JSX.Element;
@@ -29,7 +28,6 @@ interface CardTabProps {
     size?: CardTabSize;
     /** CardTab.Panel 만 허용 */
     children: CardTabPanelElement | CardTabPanelElement[];
-    className?: string;
 }
 declare const CardTab: {
     (props: CardTabProps): react_jsx_runtime.JSX.Element;

package/dist/components/CardTab/index.js

@@ -20,11 +20,11 @@ var clsx_default = clsx;
 // src/components/CardTab/CardTabPanel.tsx
 import { jsx } from "react/jsx-runtime";
 var CardTabPanel = (props) => {
-  const { children, columns = 3, className } = props;
+  const { children, columns = 3 } = props;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx_default("card-tab-panel", className),
+      className: "card-tab-panel",
       style: { "--card-tab-columns": columns },
       children
     }
@@ -41,8 +41,7 @@ var CardTabRoot = (props) => {
     activeValue: activeValueProp,
     onChange,
     size = "md",
-    children,
-    className
+    children
   } = props;
   const isControlled = activeValueProp !== void 0;
   const [uncontrolledValue, setUncontrolledValue] = React.useState(tabs[0]?.value ?? "");
@@ -59,7 +58,7 @@ var CardTabRoot = (props) => {
   const activePanel = panels.find(
     (panel) => panel.props.value === activeValue
   );
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-card-tab", size, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-card-tab", size), children: [
     /* @__PURE__ */ jsx2("div", { className: "card-tab-bar", children: tabs.map((tab) => {
       const isActive = tab.value === activeValue;
       return /* @__PURE__ */ jsx2(