@x-plat/design-system 0.1.5 → 0.2.0

package/dist/components/Dropdown/index.css

@@ -10,8 +10,8 @@
   position: absolute;
   z-index: 100;
   min-width: 160px;
-  background: #FFFFFF;
-  border: 1px solid #E5E5E5;
+  background: var(--xplat-white);
+  border: 1px solid var(--xplat-neutral-200);
   border-radius: 0.5rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   padding: 4px 0;
@@ -34,21 +34,21 @@
   border: none;
   background: none;
   font-size: 14px;
-  color: #262626;
+  color: var(--xplat-neutral-800);
   cursor: pointer;
   text-align: left;
   transition: background-color 0.15s;
 }
 .lib-xplat-dropdown .dropdown-item:hover:not(:disabled) {
-  background-color: #FAFAFA;
+  background-color: var(--xplat-neutral-50);
 }
 .lib-xplat-dropdown .dropdown-item.danger {
-  color: #F80409;
+  color: var(--xplat-red-600);
 }
 .lib-xplat-dropdown .dropdown-item.danger:hover:not(:disabled) {
-  background-color: #FFF0F0;
+  background-color: var(--xplat-red-50);
 }
 .lib-xplat-dropdown .dropdown-item:disabled {
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
   cursor: not-allowed;
 }

package/dist/components/Dropdown/index.js

@@ -64,7 +64,7 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// 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/EmptyState/index.cjs

@@ -24,7 +24,7 @@ __export(EmptyState_exports, {
 });
 module.exports = __toCommonJS(EmptyState_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/EmptyState/index.css

@@ -8,7 +8,7 @@
   text-align: center;
 }
 .lib-xplat-empty-state .empty-icon {
-  color: #D4D4D4;
+  color: var(--xplat-neutral-300);
   margin-bottom: 1rem;
 }
 .lib-xplat-empty-state .empty-icon svg {
@@ -18,12 +18,12 @@
 .lib-xplat-empty-state .empty-title {
   font-size: 15px;
   font-weight: 500;
-  color: #525252;
+  color: var(--xplat-neutral-600);
   margin: 0;
 }
 .lib-xplat-empty-state .empty-description {
   font-size: 13px;
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
   margin: 0.375rem 0 0;
   max-width: 320px;
 }

package/dist/components/EmptyState/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/FileUpload/index.cjs

@@ -946,7 +946,7 @@ var import_jsx_runtime293 = require("react/jsx-runtime");
 // src/tokens/svg/validation/SuccessIcon.tsx
 var import_jsx_runtime294 = require("react/jsx-runtime");
 
-// 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/FileUpload/index.css

@@ -5,24 +5,24 @@
   align-items: center;
   justify-content: center;
   padding: 2rem 1.5rem;
-  border: 2px dashed #D4D4D4;
+  border: 2px dashed var(--xplat-neutral-300);
   border-radius: 0.5rem;
   cursor: pointer;
   transition: border-color 0.2s, background-color 0.2s;
 }
 .lib-xplat-file-upload:hover {
-  border-color: #7093EA;
-  background-color: #F1F4FD;
+  border-color: var(--xplat-blue-400);
+  background-color: var(--xplat-blue-50);
 }
 .lib-xplat-file-upload.drag-over {
-  border-color: #4D6DE3;
-  background-color: #F1F4FD;
+  border-color: var(--xplat-blue-500);
+  background-color: var(--xplat-blue-50);
 }
 .lib-xplat-file-upload input[type=file] {
   display: none;
 }
 .lib-xplat-file-upload .upload-icon {
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
   margin-bottom: 0.75rem;
 }
 .lib-xplat-file-upload .upload-icon svg {
@@ -32,11 +32,11 @@
 .lib-xplat-file-upload .upload-label {
   font-size: 14px;
   font-weight: 500;
-  color: #525252;
+  color: var(--xplat-neutral-600);
   margin: 0;
 }
 .lib-xplat-file-upload .upload-description {
   font-size: 12px;
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
   margin: 0.25rem 0 0;
 }

package/dist/components/FileUpload/index.js

@@ -910,7 +910,7 @@ import { jsx as jsx293, jsxs as jsxs188 } from "react/jsx-runtime";
 // src/tokens/svg/validation/SuccessIcon.tsx
 import { jsx as jsx294 } from "react/jsx-runtime";
 
-// 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/HtmlTypeWriter/index.css

@@ -17,7 +17,7 @@
   font-size: 20px;
 }
 .lib-xplat-htmlTypewriter hr {
-  color: #E5E5E5;
+  color: var(--xplat-neutral-200);
   margin-top: 1rem;
   margin-bottom: 1rem;
 }

package/dist/components/ImageSelector/index.css

@@ -6,7 +6,7 @@
   height: 100%;
   flex-direction: column;
   position: relative;
-  background-color: #FFFFFF;
+  background-color: var(--xplat-white);
   border-radius: 0.25rem;
   overflow: hidden;
 }
@@ -14,10 +14,10 @@
   display: none;
 }
 .lib-xplat-imageselector.none-value {
-  border: 1px dashed #737373;
+  border: 1px dashed var(--xplat-neutral-500);
 }
 .lib-xplat-imageselector:hover {
-  background-color: #E5E5E5;
+  background-color: var(--xplat-neutral-200);
 }
 .lib-xplat-imageselector:hover > .action-bar {
   opacity: 1;
@@ -46,18 +46,18 @@
   cursor: pointer;
 }
 .lib-xplat-imageselector > .content .skeleton > .icon-wrapper {
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
 }
 .lib-xplat-imageselector > .content .skeleton > .label {
   margin-top: 0.25rem;
   font-size: 0.875rem;
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .icon-wrapper {
-  color: #737373;
+  color: var(--xplat-neutral-500);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .label {
-  color: #737373;
+  color: var(--xplat-neutral-500);
 }
 .lib-xplat-imageselector > .action-bar {
   position: absolute;
@@ -67,7 +67,7 @@
   display: flex;
   gap: 0.5em;
   font-size: 24px;
-  background-color: #171717;
+  background-color: var(--xplat-neutral-900);
   padding: 0.25rem 0.75rem;
   align-items: center;
   opacity: 0;
@@ -75,7 +75,7 @@
   border-radius: 4px;
 }
 .lib-xplat-imageselector > .action-bar > .icon-wrapper {
-  color: #FFFFFF;
+  color: var(--xplat-white);
 }
 .lib-xplat-imageselector .icon-wrapper {
   display: flex;

package/dist/components/Input/index.cjs

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(Input_exports);
 // src/components/Input/Input.tsx
 var import_react = __toESM(require("react"), 1);
 
-// 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;
@@ -258,6 +258,7 @@ var Input = import_react.default.forwardRef((props, ref) => {
     value,
     onChange,
     type = "text",
+    size = "md",
     suffix,
     className,
     disabled,
@@ -283,7 +284,7 @@ var Input = import_react.default.forwardRef((props, ref) => {
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
-        className: clsx_default("lib-xplat-input", disabled ? "disabled" : void 0),
+        className: clsx_default("lib-xplat-input", size, disabled ? "disabled" : void 0),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",

package/dist/components/Input/index.css

@@ -7,16 +7,27 @@
 .lib-xplat-input-wrap .lib-xplat-input {
   display: flex;
   align-items: center;
-  border: 1px solid #D4D4D4;
+  border: 1px solid var(--xplat-neutral-300);
   border-radius: 0.5rem;
-  height: 2.5rem;
   overflow: hidden;
-  background-color: #FFFFFF;
+  background-color: var(--xplat-white);
   padding-right: 0.5rem;
   width: 100%;
 }
+.lib-xplat-input-wrap .lib-xplat-input.sm {
+  height: 2rem;
+  font-size: 0.875rem;
+}
+.lib-xplat-input-wrap .lib-xplat-input.md {
+  height: 2.5rem;
+  font-size: 1rem;
+}
+.lib-xplat-input-wrap .lib-xplat-input.lg {
+  height: 3rem;
+  font-size: 1.125rem;
+}
 .lib-xplat-input-wrap .lib-xplat-input.disabled {
-  background-color: #F5F5F5;
+  background-color: var(--xplat-neutral-100);
   cursor: not-allowed;
 }
 .lib-xplat-input-wrap .lib-xplat-input > input {
@@ -26,7 +37,7 @@
   padding-left: 1rem;
   padding-right: 0.5rem;
   width: 100%;
-  color: #404040;
+  color: var(--xplat-neutral-700);
 }
 .lib-xplat-input-wrap .lib-xplat-input > input :disabled {
   cursor: not-allowed;
@@ -36,7 +47,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
   padding-right: 0.5rem;
 }
 .lib-xplat-input-wrap .lib-xplat-input > .suffix > .wrapper {
@@ -58,16 +69,16 @@
   user-select: none;
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.default {
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.success {
-  color: #00A34F;
+  color: var(--xplat-green-600);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.warning {
-  color: #D18800;
+  color: var(--xplat-yellow-600);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.error {
-  color: #F80409;
+  color: var(--xplat-red-600);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
   font-size: 1rem;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
 
-interface InputProps extends InputAttributes {
+type InputSize$1 = "sm" | "md" | "lg";
+interface InputProps extends Omit<InputAttributes, "size"> {
     type?: "text" | "number" | "email" | "password" | "tel";
+    size?: InputSize$1;
     validations?: {
         status: "error" | "warning" | "success" | "default";
         message: string;
@@ -11,11 +13,13 @@ interface InputProps extends InputAttributes {
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
-interface PasswordInputProps extends InputAttributes {
+type InputSize = "sm" | "md" | "lg";
+interface PasswordInputProps extends Omit<InputAttributes, "size"> {
     validations?: {
         status: "error" | "warning" | "success" | "default";
         message: string;
     }[];
+    size?: InputSize;
     reg?: RegExp;
 }
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
 
-interface InputProps extends InputAttributes {
+type InputSize$1 = "sm" | "md" | "lg";
+interface InputProps extends Omit<InputAttributes, "size"> {
     type?: "text" | "number" | "email" | "password" | "tel";
+    size?: InputSize$1;
     validations?: {
         status: "error" | "warning" | "success" | "default";
         message: string;
@@ -11,11 +13,13 @@ interface InputProps extends InputAttributes {
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
-interface PasswordInputProps extends InputAttributes {
+type InputSize = "sm" | "md" | "lg";
+interface PasswordInputProps extends Omit<InputAttributes, "size"> {
     validations?: {
         status: "error" | "warning" | "success" | "default";
         message: string;
     }[];
+    size?: InputSize;
     reg?: RegExp;
 }
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/index.js

@@ -1,7 +1,7 @@
 // src/components/Input/Input.tsx
 import React from "react";
 
-// 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;
@@ -221,6 +221,7 @@ var Input = React.forwardRef((props, ref) => {
     value,
     onChange,
     type = "text",
+    size = "md",
     suffix,
     className,
     disabled,
@@ -246,7 +247,7 @@ var Input = React.forwardRef((props, ref) => {
     /* @__PURE__ */ jsxs4(
       "div",
       {
-        className: clsx_default("lib-xplat-input", disabled ? "disabled" : void 0),
+        className: clsx_default("lib-xplat-input", size, disabled ? "disabled" : void 0),
         children: [
           /* @__PURE__ */ jsx5(
             "input",

package/dist/components/Modal/index.cjs

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(Modal_exports);
 var import_react = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
-// 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/Modal/index.js

@@ -2,7 +2,7 @@
 import React from "react";
 import { createPortal } from "react-dom";
 
-// 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/Pagination/index.cjs

@@ -1057,7 +1057,7 @@ var import_jsx_runtime293 = require("react/jsx-runtime");
 // src/tokens/svg/validation/SuccessIcon.tsx
 var import_jsx_runtime294 = require("react/jsx-runtime");
 
-// 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;
@@ -1107,6 +1107,7 @@ var Pagination = (props) => {
     pageSize = 10,
     siblingCount = 1,
     onChange,
+    size = "md",
     colorNamespace = "xplat",
     color = "blue",
     colorDepth,
@@ -1124,7 +1125,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", className), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, className), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
     /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
       "button",
       {