@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/Input/index.cjs

@@ -54,7 +54,7 @@ function clsx() {
 }
 var clsx_default = clsx;
 
-// src/tokens/svg/validation/ErrorIcon.tsx
+// src/tokens/svg/status/ErrorIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var ErrorIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   "svg",
@@ -89,7 +89,7 @@ var ErrorIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
 );
 var ErrorIcon_default = ErrorIcon;
 
-// src/tokens/svg/validation/InfoIcon.tsx
+// src/tokens/svg/status/InfoIcon.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var InfoIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
   "svg",
@@ -131,7 +131,7 @@ var InfoIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
 );
 var InfoIcon_default = InfoIcon;
 
-// src/tokens/svg/validation/SuccessIcon.tsx
+// src/tokens/svg/status/SuccessIcon.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "svg",
@@ -260,7 +260,6 @@ var Input = import_react.default.forwardRef((props, ref) => {
     type = "text",
     size = "md",
     suffix,
-    className,
     disabled,
     validations,
     ...inputProps
@@ -280,7 +279,7 @@ var Input = import_react.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lib-xplat-input-wrap", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
@@ -316,7 +315,7 @@ var Input_default = Input;
 // src/components/Input/PasswordInput/PasswordInput.tsx
 var import_react3 = __toESM(require("react"), 1);
 
-// src/tokens/svg/Input/CloseEyeIcon.tsx
+// src/tokens/svg/form/CloseEyeIcon.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var CloseEyeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
   "svg",
@@ -348,7 +347,7 @@ var CloseEyeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
 );
 var CloseEyeIcon_default = CloseEyeIcon;
 
-// src/tokens/svg/Input/OpenEyeIcon.tsx
+// src/tokens/svg/form/OpenEyeIcon.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var OpenEyeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
   "svg",

package/dist/components/Input/index.css

@@ -2,42 +2,53 @@
 .lib-xplat-input-wrap {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
 }
 .lib-xplat-input-wrap .lib-xplat-input {
   display: flex;
   align-items: center;
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 0.5rem;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   overflow: hidden;
-  background-color: var(--xplat-white);
-  padding-right: 0.5rem;
+  background-color: var(--semantic-surface-neutral-default);
+  padding-right: var(--spacing-space-2);
   width: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.lib-xplat-input-wrap .lib-xplat-input:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-input-wrap .lib-xplat-input:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
 }
 .lib-xplat-input-wrap .lib-xplat-input.sm {
-  height: 2rem;
-  font-size: 0.875rem;
+  height: var(--spacing-control-height-sm);
+  font-size: 14px;
 }
 .lib-xplat-input-wrap .lib-xplat-input.md {
-  height: 2.5rem;
-  font-size: 1rem;
+  height: var(--spacing-control-height-md);
+  font-size: 16px;
 }
 .lib-xplat-input-wrap .lib-xplat-input.lg {
-  height: 3rem;
-  font-size: 1.125rem;
+  height: var(--spacing-control-height-lg);
+  font-size: 18px;
 }
 .lib-xplat-input-wrap .lib-xplat-input.disabled {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
   cursor: not-allowed;
 }
 .lib-xplat-input-wrap .lib-xplat-input > input {
   border: none;
   outline: none;
   flex: 1;
-  padding-left: 1rem;
-  padding-right: 0.5rem;
+  padding-left: var(--spacing-space-4);
+  padding-right: var(--spacing-space-2);
   width: 100%;
-  color: var(--xplat-neutral-700);
+  color: var(--semantic-text-subtle);
 }
 .lib-xplat-input-wrap .lib-xplat-input > input :disabled {
   cursor: not-allowed;
@@ -47,8 +58,8 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: var(--xplat-neutral-400);
-  padding-right: 0.5rem;
+  color: var(--semantic-icon-subtle);
+  padding-right: var(--spacing-space-2);
 }
 .lib-xplat-input-wrap .lib-xplat-input > .suffix > .wrapper {
   font: 500;
@@ -58,28 +69,28 @@
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap {
   display: flex;
-  gap: 0.5rem;
-  margin-left: 0.25rem;
+  gap: var(--spacing-space-2);
+  margin-left: var(--spacing-space-1);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
   display: flex;
-  gap: 0.25rem;
-  font-size: 0.75rem;
+  gap: var(--spacing-space-1);
+  font-size: 12px;
   align-items: center;
   user-select: none;
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.default {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-icon-subtle);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.success {
-  color: var(--xplat-green-600);
+  color: var(--semantic-text-success);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.warning {
-  color: var(--xplat-yellow-600);
+  color: var(--semantic-text-warning);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.error {
-  color: var(--xplat-red-600);
+  color: var(--semantic-text-error);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
-  font-size: 1rem;
+  font-size: 16px;
 }

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

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

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

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

package/dist/components/Input/index.js

@@ -17,7 +17,7 @@ function clsx() {
 }
 var clsx_default = clsx;
 
-// src/tokens/svg/validation/ErrorIcon.tsx
+// src/tokens/svg/status/ErrorIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var ErrorIcon = () => /* @__PURE__ */ jsxs(
   "svg",
@@ -52,7 +52,7 @@ var ErrorIcon = () => /* @__PURE__ */ jsxs(
 );
 var ErrorIcon_default = ErrorIcon;
 
-// src/tokens/svg/validation/InfoIcon.tsx
+// src/tokens/svg/status/InfoIcon.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var InfoIcon = () => /* @__PURE__ */ jsxs2(
   "svg",
@@ -94,7 +94,7 @@ var InfoIcon = () => /* @__PURE__ */ jsxs2(
 );
 var InfoIcon_default = InfoIcon;
 
-// src/tokens/svg/validation/SuccessIcon.tsx
+// src/tokens/svg/status/SuccessIcon.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var SuccessIcon = () => /* @__PURE__ */ jsx3(
   "svg",
@@ -223,7 +223,6 @@ var Input = React.forwardRef((props, ref) => {
     type = "text",
     size = "md",
     suffix,
-    className,
     disabled,
     validations,
     ...inputProps
@@ -243,7 +242,7 @@ var Input = React.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "lib-xplat-input-wrap", children: [
     /* @__PURE__ */ jsxs4(
       "div",
       {
@@ -279,7 +278,7 @@ var Input_default = Input;
 // src/components/Input/PasswordInput/PasswordInput.tsx
 import React2 from "react";
 
-// src/tokens/svg/Input/CloseEyeIcon.tsx
+// src/tokens/svg/form/CloseEyeIcon.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var CloseEyeIcon = () => /* @__PURE__ */ jsxs5(
   "svg",
@@ -311,7 +310,7 @@ var CloseEyeIcon = () => /* @__PURE__ */ jsxs5(
 );
 var CloseEyeIcon_default = CloseEyeIcon;
 
-// src/tokens/svg/Input/OpenEyeIcon.tsx
+// src/tokens/svg/form/OpenEyeIcon.tsx
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var OpenEyeIcon = () => /* @__PURE__ */ jsxs6(
   "svg",

package/dist/components/Modal/index.css

@@ -3,11 +3,12 @@
   z-index: 11;
 }
 .lib-xplat-modal.modal-box {
-  border-radius: 12px;
+  border-radius: var(--spacing-radius-lg);
   background-color: #fff;
-  padding: 24px;
-  max-width: calc(100vw - 2rem);
-  max-height: calc(100vh - 2rem);
+  padding: var(--spacing-space-6);
+  min-width: min-content;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
   overflow: visible;
   transform: scale(0.9);
   opacity: 0;