@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/Divider/index.cjs

@@ -43,11 +43,11 @@ var clsx_default = clsx;
 // src/components/Divider/Divider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Divider = (props) => {
-  const { orientation = "horizontal", className } = props;
+  const { orientation = "horizontal" } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: clsx_default("lib-xplat-divider", orientation, className),
+      className: clsx_default("lib-xplat-divider", orientation),
       role: "separator",
       "aria-orientation": orientation
     }

package/dist/components/Divider/index.css

@@ -6,10 +6,10 @@
 .lib-xplat-divider.horizontal {
   width: 100%;
   height: 1px;
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-border-default);
 }
 .lib-xplat-divider.vertical {
   width: 1px;
   align-self: stretch;
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-border-default);
 }

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

@@ -3,7 +3,6 @@ import React from 'react';
 type DividerOrientation = "horizontal" | "vertical";
 interface DividerProps {
     orientation?: DividerOrientation;
-    className?: string;
 }
 declare const Divider: React.FC<DividerProps>;
 

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

@@ -3,7 +3,6 @@ import React from 'react';
 type DividerOrientation = "horizontal" | "vertical";
 interface DividerProps {
     orientation?: DividerOrientation;
-    className?: string;
 }
 declare const Divider: React.FC<DividerProps>;
 

package/dist/components/Divider/index.js

@@ -17,11 +17,11 @@ var clsx_default = clsx;
 // src/components/Divider/Divider.tsx
 import { jsx } from "react/jsx-runtime";
 var Divider = (props) => {
-  const { orientation = "horizontal", className } = props;
+  const { orientation = "horizontal" } = props;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx_default("lib-xplat-divider", orientation, className),
+      className: clsx_default("lib-xplat-divider", orientation),
       role: "separator",
       "aria-orientation": orientation
     }

package/dist/components/Drawer/index.css

@@ -16,7 +16,7 @@
   position: fixed;
   top: 0;
   height: 100%;
-  background: var(--xplat-white);
+  background: var(--semantic-surface-neutral-default);
   box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
@@ -42,13 +42,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--xplat-neutral-200);
+  padding: var(--spacing-space-4) var(--spacing-space-5);
+  border-bottom: 1px solid var(--semantic-border-default);
 }
 .lib-xplat-drawer .drawer-title {
   font-size: 16px;
   font-weight: 600;
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-drawer .close-btn {
   background: none;
@@ -56,15 +56,15 @@
   cursor: pointer;
   font-size: 22px;
   line-height: 1;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-icon-strong);
   padding: 0;
   transition: color 0.2s;
 }
 .lib-xplat-drawer .close-btn:hover {
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-drawer .drawer-body {
   flex: 1;
-  padding: 1.25rem;
+  padding: var(--spacing-space-5);
   overflow-y: auto;
 }

package/dist/components/Dropdown/index.cjs

@@ -119,7 +119,7 @@ var clsx_default = clsx;
 // src/components/Dropdown/Dropdown.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Dropdown = (props) => {
-  const { items, children, className } = props;
+  const { items, children } = props;
   const [isOpen, setIsOpen] = import_react3.default.useState(false);
   const [mounted, setMounted] = import_react3.default.useState(false);
   const [visible, setVisible] = import_react3.default.useState(false);
@@ -142,7 +142,7 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-dropdown", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-dropdown", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {

package/dist/components/Dropdown/index.css

@@ -10,11 +10,11 @@
   position: absolute;
   z-index: 100;
   min-width: 160px;
-  background: var(--xplat-white);
-  border: 1px solid var(--xplat-neutral-200);
-  border-radius: 0.5rem;
+  background: var(--semantic-surface-neutral-default);
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  padding: 4px 0;
+  padding: var(--spacing-space-1) 0;
   opacity: 0;
   transform: translateY(-4px);
   transition: opacity 0.15s ease, transform 0.15s ease;
@@ -30,25 +30,25 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 0.5rem 0.875rem;
+  padding: var(--spacing-space-2) 14px;
   border: none;
   background: none;
   font-size: 14px;
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
   cursor: pointer;
   text-align: left;
   transition: background-color 0.15s;
 }
 .lib-xplat-dropdown .dropdown-item:hover:not(:disabled) {
-  background-color: var(--xplat-neutral-50);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-dropdown .dropdown-item.danger {
-  color: var(--xplat-red-600);
+  color: var(--semantic-text-error);
 }
 .lib-xplat-dropdown .dropdown-item.danger:hover:not(:disabled) {
-  background-color: var(--xplat-red-50);
+  background-color: var(--semantic-surface-error-subtle);
 }
 .lib-xplat-dropdown .dropdown-item:disabled {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
   cursor: not-allowed;
 }

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

@@ -10,7 +10,6 @@ interface DropdownItem {
 interface DropdownProps {
     items: DropdownItem[];
     children: React.ReactNode;
-    className?: string;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 

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

@@ -10,7 +10,6 @@ interface DropdownItem {
 interface DropdownProps {
     items: DropdownItem[];
     children: React.ReactNode;
-    className?: string;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 

package/dist/components/Dropdown/index.js

@@ -83,7 +83,7 @@ var clsx_default = clsx;
 // src/components/Dropdown/Dropdown.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var Dropdown = (props) => {
-  const { items, children, className } = props;
+  const { items, children } = props;
   const [isOpen, setIsOpen] = React3.useState(false);
   const [mounted, setMounted] = React3.useState(false);
   const [visible, setVisible] = React3.useState(false);
@@ -106,7 +106,7 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-dropdown", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-dropdown", children: [
     /* @__PURE__ */ jsx(
       "div",
       {

package/dist/components/EmptyState/index.cjs

@@ -24,27 +24,11 @@ __export(EmptyState_exports, {
 });
 module.exports = __toCommonJS(EmptyState_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/EmptyState/EmptyState.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var EmptyState = (props) => {
-  const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-empty-state", className), children: [
+  const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-empty-state", children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "empty-icon", children: icon }),
     !icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "empty-title", children: title }),

package/dist/components/EmptyState/index.css

@@ -4,29 +4,28 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 3rem 1.5rem;
+  padding: var(--spacing-space-11) var(--spacing-space-6);
   text-align: center;
 }
 .lib-xplat-empty-state .empty-icon {
-  color: var(--xplat-neutral-300);
-  margin-bottom: 1rem;
+  color: var(--semantic-icon-disabled);
+  margin-bottom: var(--spacing-space-4);
 }
 .lib-xplat-empty-state .empty-icon svg {
-  width: 48px;
-  height: 48px;
+  font-size: 48px;
 }
 .lib-xplat-empty-state .empty-title {
   font-size: 15px;
   font-weight: 500;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   margin: 0;
 }
 .lib-xplat-empty-state .empty-description {
   font-size: 13px;
-  color: var(--xplat-neutral-400);
-  margin: 0.375rem 0 0;
+  color: var(--semantic-text-muted);
+  margin: var(--spacing-space-2) 0 0;
   max-width: 320px;
 }
 .lib-xplat-empty-state .empty-action {
-  margin-top: 1.25rem;
+  margin-top: var(--spacing-space-5);
 }

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

@@ -5,7 +5,6 @@ interface EmptyStateProps {
     title?: string;
     description?: string;
     action?: React.ReactNode;
-    className?: string;
 }
 declare const EmptyState: React.FC<EmptyStateProps>;
 

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

@@ -5,7 +5,6 @@ interface EmptyStateProps {
     title?: string;
     description?: string;
     action?: React.ReactNode;
-    className?: string;
 }
 declare const EmptyState: React.FC<EmptyStateProps>;
 

package/dist/components/EmptyState/index.js

@@ -1,24 +1,8 @@
-// ../../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/EmptyState/EmptyState.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var EmptyState = (props) => {
-  const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action, className } = props;
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-empty-state", className), children: [
+  const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action } = props;
+  return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-empty-state", children: [
     icon && /* @__PURE__ */ jsx("div", { className: "empty-icon", children: icon }),
     !icon && /* @__PURE__ */ jsx("div", { className: "empty-icon", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
     /* @__PURE__ */ jsx("p", { className: "empty-title", children: title }),