@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/PopOver/index.css

@@ -11,7 +11,7 @@
   cursor: default;
   transition: transform 0.2s ease, opacity 0.2s ease;
   background: white;
-  border-radius: 0.5rem;
+  border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 10;
   opacity: 0;
@@ -19,11 +19,11 @@
 }
 .lib-xplat-pop-over > .content-wrap.top {
   transform-origin: bottom;
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--spacing-space-2);
 }
 .lib-xplat-pop-over > .content-wrap.bottom {
   transform-origin: top;
-  margin-top: 0.5rem;
+  margin-top: var(--spacing-space-2);
 }
 .lib-xplat-pop-over > .content-wrap.visible {
   opacity: 1;

package/dist/components/Progress/index.cjs

@@ -47,13 +47,11 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    showLabel = false,
-    color = "xplat-blue-500",
-    className
+    type = "brand",
+    showLabel = false
   } = props;
-  const colorClass = color;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -65,7 +63,7 @@ var Progress = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            className: clsx_default("bar", colorClass),
+            className: "bar",
             style: { width: `${percentage}%` }
           }
         )

package/dist/components/Progress/index.css

@@ -2,34 +2,48 @@
 .lib-xplat-progress {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--spacing-space-2);
   width: 100%;
 }
 .lib-xplat-progress .track {
   flex: 1;
-  background-color: var(--xplat-neutral-200);
-  border-radius: 10rem;
+  background-color: var(--semantic-surface-neutral-disabled);
+  border-radius: var(--spacing-radius-full);
   overflow: hidden;
 }
 .lib-xplat-progress.sm .track {
-  height: 4px;
+  height: var(--spacing-space-1);
 }
 .lib-xplat-progress.md .track {
-  height: 8px;
+  height: var(--spacing-space-2);
 }
 .lib-xplat-progress.lg .track {
-  height: 12px;
+  height: var(--spacing-space-3);
 }
 .lib-xplat-progress .bar {
   height: 100%;
-  border-radius: 10rem;
+  border-radius: var(--spacing-radius-full);
   transition: width 0.3s ease;
-  background-color: var(--ds-color);
+}
+.lib-xplat-progress.brand .bar {
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-progress.success .bar {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-progress.error .bar {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-progress.warning .bar {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-progress.info .bar {
+  background-color: var(--semantic-surface-info-default);
 }
 .lib-xplat-progress .label {
   font-size: 12px;
   font-weight: 500;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   min-width: 36px;
   text-align: right;
 }

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

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 type ProgressSize = "sm" | "md" | "lg";
-interface ProgressProps extends ColorProps {
+type ProgressType = "brand" | "success" | "error" | "warning" | "info";
+interface ProgressProps {
     value: number;
     max?: number;
     size?: ProgressSize;
+    type?: ProgressType;
     showLabel?: boolean;
-    className?: string;
 }
 declare const Progress: {
     (props: ProgressProps): react_jsx_runtime.JSX.Element;

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

@@ -1,13 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 type ProgressSize = "sm" | "md" | "lg";
-interface ProgressProps extends ColorProps {
+type ProgressType = "brand" | "success" | "error" | "warning" | "info";
+interface ProgressProps {
     value: number;
     max?: number;
     size?: ProgressSize;
+    type?: ProgressType;
     showLabel?: boolean;
-    className?: string;
 }
 declare const Progress: {
     (props: ProgressProps): react_jsx_runtime.JSX.Element;

package/dist/components/Progress/index.js

@@ -21,13 +21,11 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    showLabel = false,
-    color = "xplat-blue-500",
-    className
+    type = "brand",
+    showLabel = false
   } = props;
-  const colorClass = color;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-progress", size, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -39,7 +37,7 @@ var Progress = (props) => {
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: clsx_default("bar", colorClass),
+            className: "bar",
             style: { width: `${percentage}%` }
           }
         )

package/dist/components/Radio/index.cjs

@@ -67,9 +67,8 @@ var Radio = (props) => {
   const {
     label,
     value,
-    className,
-    color = "xplat-blue-500",
     size: sizeProp,
+    type = "brand",
     ...rest
   } = props;
   const context = useRadioGroupContext();
@@ -81,15 +80,14 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "label",
     {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        localChecked ? "checked" : void 0,
-        className
+        type,
+        localChecked ? "checked" : void 0
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
@@ -98,8 +96,7 @@ var Radio = (props) => {
           {
             className: clsx_default(
               "circle",
-              localChecked ? "checked" : void 0,
-              colorClass
+              localChecked ? "checked" : void 0
             ),
             children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "inner-circle" })
           }

package/dist/components/Radio/index.css

@@ -2,7 +2,7 @@
 .lib-xplat-radio {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
   user-select: none;
   cursor: pointer;
 }
@@ -10,57 +10,89 @@
   display: none;
 }
 .lib-xplat-radio.sm > .circle {
-  width: 1rem;
-  height: 1rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
   border-width: 1.5px;
 }
 .lib-xplat-radio.sm > .circle > .inner-circle {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
 }
 .lib-xplat-radio.sm > span {
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 .lib-xplat-radio.md > .circle {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--spacing-space-5);
+  height: var(--spacing-space-5);
 }
 .lib-xplat-radio.lg > .circle {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-radio.lg > .circle > .inner-circle {
-  width: 1rem;
-  height: 1rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-radio.lg > span {
-  font-size: 1.125rem;
+  font-size: 18px;
 }
 .lib-xplat-radio > .circle {
-  border: 2px solid var(--xplat-neutral-400);
+  border: 2px solid var(--semantic-border-strong);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background-color: var(--xplat-white);
+  background-color: var(--semantic-surface-neutral-default);
   transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
 }
-.lib-xplat-radio:hover .lib-xplat-radio > .circle:not(.checked) {
-  border-color: var(--xplat-neutral-600);
-  background-color: var(--xplat-neutral-100);
+.lib-xplat-radio > .circle > .inner-circle {
+  width: var(--spacing-space-3);
+  height: var(--spacing-space-3);
+  background-color: var(--semantic-surface-neutral-default);
+  border-radius: 50%;
 }
-.lib-xplat-radio > .circle.checked {
-  background-color: var(--ds-color);
-  border-color: var(--ds-color);
+.lib-xplat-radio:hover > .circle:not(.checked) {
+  border-color: var(--semantic-icon-strong);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
-.lib-xplat-radio > .circle.checked:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 15%);
-  border-color: color-mix(in srgb, var(--ds-color), black 15%);
+.lib-xplat-radio.brand > .circle.checked {
+  background-color: var(--semantic-surface-brand-default);
+  border-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-radio > .circle > .inner-circle {
-  width: 0.75rem;
-  height: 0.75rem;
-  background-color: white;
-  border-radius: 50%;
+.lib-xplat-radio.success > .circle.checked {
+  background-color: var(--semantic-surface-success-default);
+  border-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-radio.error > .circle.checked {
+  background-color: var(--semantic-surface-error-default);
+  border-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-radio.warning > .circle.checked {
+  background-color: var(--semantic-surface-warning-default);
+  border-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-radio.info > .circle.checked {
+  background-color: var(--semantic-surface-info-default);
+  border-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-radio:hover.brand > .circle.checked {
+  background-color: var(--semantic-surface-brand-strong);
+  border-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-radio:hover.success > .circle.checked {
+  background-color: var(--semantic-surface-success-strong);
+  border-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-radio:hover.error > .circle.checked {
+  background-color: var(--semantic-surface-error-strong);
+  border-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-radio:hover.warning > .circle.checked {
+  background-color: var(--semantic-surface-warning-strong);
+  border-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-radio:hover.info > .circle.checked {
+  background-color: var(--semantic-surface-info-strong);
+  border-color: var(--semantic-surface-info-strong);
 }

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

@@ -1,18 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
-interface RadioProps extends Omit<InputAttributes, "size">, ColorProps {
+type RadioType = "brand" | "success" | "error" | "warning" | "info";
+interface RadioProps extends Omit<InputAttributes, "size" | "className"> {
     label?: string;
-    className?: string;
     /**
      * 단일 사용시 name 필수 작성
      */
     name?: string;
     value: string | number;
     size?: RadioSize;
+    type?: RadioType;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value

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

@@ -1,18 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
-interface RadioProps extends Omit<InputAttributes, "size">, ColorProps {
+type RadioType = "brand" | "success" | "error" | "warning" | "info";
+interface RadioProps extends Omit<InputAttributes, "size" | "className"> {
     label?: string;
-    className?: string;
     /**
      * 단일 사용시 name 필수 작성
      */
     name?: string;
     value: string | number;
     size?: RadioSize;
+    type?: RadioType;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value

package/dist/components/Radio/index.js

@@ -30,9 +30,8 @@ var Radio = (props) => {
   const {
     label,
     value,
-    className,
-    color = "xplat-blue-500",
     size: sizeProp,
+    type = "brand",
     ...rest
   } = props;
   const context = useRadioGroupContext();
@@ -44,15 +43,14 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = color;
   return /* @__PURE__ */ jsxs(
     "label",
     {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        localChecked ? "checked" : void 0,
-        className
+        type,
+        localChecked ? "checked" : void 0
       ),
       children: [
         /* @__PURE__ */ jsx("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
@@ -61,8 +59,7 @@ var Radio = (props) => {
           {
             className: clsx_default(
               "circle",
-              localChecked ? "checked" : void 0,
-              colorClass
+              localChecked ? "checked" : void 0
             ),
             children: localChecked && /* @__PURE__ */ jsx("div", { className: "inner-circle" })
           }