@x-plat/design-system 0.1.5 → 0.2.1

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

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
-import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.cjs';
+import { a as ColorNamespace, b as ColorName, e as ColorProps } from '../../colors-DmMsWD7G.cjs';
 import React from 'react';
 
-interface RadioProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends InputAttributes, ColorProps<N, C> {
+type RadioSize = "sm" | "md" | "lg";
+interface RadioProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends Omit<InputAttributes, "size">, ColorProps<N, C> {
     label?: string;
     className?: string;
     /**
@@ -11,129 +12,14 @@ interface RadioProps<N extends ColorNamespace, C extends ColorName<N> = ColorNam
      */
     name?: string;
     value: string | number;
+    size?: RadioSize;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value
  * 단일모드 check 조건 : props 중 checked = true
  */
 declare const Radio: {
-    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
-        readonly xplat: {
-            readonly red: {
-                readonly 50: "#FFF0F0";
-                readonly 100: "#FFDDDE";
-                readonly 200: "#FFC1C2";
-                readonly 300: "#FF9698";
-                readonly 400: "#FF5A5D";
-                readonly 500: "#FF272B";
-                readonly 600: "#F80409";
-                readonly 700: "#D40105";
-                readonly 800: "#AE0609";
-                readonly 900: "#900C0F";
-            };
-            readonly green: {
-                readonly 50: "#E5F6EA";
-                readonly 100: "#C1E7CC";
-                readonly 200: "#98D8AC";
-                readonly 300: "#6CCA8B";
-                readonly 400: "#47BE72";
-                readonly 500: "#10B259";
-                readonly 600: "#00A34F";
-                readonly 700: "#009143";
-                readonly 800: "#007F38";
-                readonly 900: "#006024";
-            };
-            readonly orange: {
-                readonly 50: "#FFF8EC";
-                readonly 100: "#FFF0D3";
-                readonly 200: "#FFDDA5";
-                readonly 300: "#FFC46D";
-                readonly 400: "#FF9F32";
-                readonly 500: "#FF820A";
-                readonly 600: "#FF6900";
-                readonly 700: "#CC4B02";
-                readonly 800: "#A13A0B";
-                readonly 900: "#82320C";
-            };
-            readonly yellow: {
-                readonly 50: "#FFFDE7";
-                readonly 100: "#FFFAC1";
-                readonly 200: "#FFF186";
-                readonly 300: "#FFE041";
-                readonly 400: "#FFCC0D";
-                readonly 500: "#F0B100";
-                readonly 600: "#D18800";
-                readonly 700: "#A66002";
-                readonly 800: "#894B0A";
-                readonly 900: "#743D0F";
-            };
-            readonly blue: {
-                readonly 50: "#F1F4FD";
-                readonly 100: "#DFE7FA";
-                readonly 200: "#C5D4F8";
-                readonly 300: "#9EB8F2";
-                readonly 400: "#7093EA";
-                readonly 500: "#4D6DE3";
-                readonly 600: "#3950D7";
-                readonly 700: "#303EC5";
-                readonly 800: "#2D35A0";
-                readonly 900: "#29317F";
-            };
-            readonly lightblue: {
-                readonly 50: "#EEFAFF";
-                readonly 100: "#D9F4FF";
-                readonly 200: "#BBEDFF";
-                readonly 300: "#8DE3FF";
-                readonly 400: "#57D0FF";
-                readonly 500: "#30B6FF";
-                readonly 600: "#1999F7";
-                readonly 700: "#1280E3";
-                readonly 800: "#1566B8";
-                readonly 900: "#175791";
-            };
-            readonly purple: {
-                readonly 50: "#FBF6FE";
-                readonly 100: "#F5EAFD";
-                readonly 200: "#EDD8FC";
-                readonly 300: "#E0BAF8";
-                readonly 400: "#CD8DF3";
-                readonly 500: "#B961EB";
-                readonly 600: "#A541DC";
-                readonly 700: "#9230C5";
-                readonly 800: "#782B9E";
-                readonly 900: "#62247F";
-            };
-            readonly pink: {
-                readonly 50: "#FFF4FE";
-                readonly 100: "#FFE7FD";
-                readonly 200: "#FFCFFA";
-                readonly 300: "#FEA9F1";
-                readonly 400: "#FD75E7";
-                readonly 500: "#F553DA";
-                readonly 600: "#D821B6";
-                readonly 700: "#B31892";
-                readonly 800: "#921676";
-                readonly 900: "#781761";
-            };
-            readonly neutral: {
-                readonly 50: "#FAFAFA";
-                readonly 100: "#F5F5F5";
-                readonly 200: "#E5E5E5";
-                readonly 300: "#D4D4D4";
-                readonly 400: "#A1A1A1";
-                readonly 500: "#737373";
-                readonly 600: "#525252";
-                readonly 700: "#404040";
-                readonly 800: "#262626";
-                readonly 900: "#171717";
-            };
-            readonly black: "#000000";
-            readonly white: "#FFFFFF";
-        };
-        readonly test: {
-            readonly default: "#ffffff";
-        };
-    }[N]>(props: RadioProps<N, C>): react_jsx_runtime.JSX.Element;
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>>(props: RadioProps<N, C>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -141,6 +27,7 @@ interface RadioGroupContextProps {
     value?: string | number;
     name: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
+    size?: "sm" | "md" | "lg";
 }
 
 interface RadioGroupProps extends RadioGroupContextProps {

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

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
-import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.js';
+import { a as ColorNamespace, b as ColorName, e as ColorProps } from '../../colors-DmMsWD7G.js';
 import React from 'react';
 
-interface RadioProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends InputAttributes, ColorProps<N, C> {
+type RadioSize = "sm" | "md" | "lg";
+interface RadioProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends Omit<InputAttributes, "size">, ColorProps<N, C> {
     label?: string;
     className?: string;
     /**
@@ -11,129 +12,14 @@ interface RadioProps<N extends ColorNamespace, C extends ColorName<N> = ColorNam
      */
     name?: string;
     value: string | number;
+    size?: RadioSize;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value
  * 단일모드 check 조건 : props 중 checked = true
  */
 declare const Radio: {
-    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
-        readonly xplat: {
-            readonly red: {
-                readonly 50: "#FFF0F0";
-                readonly 100: "#FFDDDE";
-                readonly 200: "#FFC1C2";
-                readonly 300: "#FF9698";
-                readonly 400: "#FF5A5D";
-                readonly 500: "#FF272B";
-                readonly 600: "#F80409";
-                readonly 700: "#D40105";
-                readonly 800: "#AE0609";
-                readonly 900: "#900C0F";
-            };
-            readonly green: {
-                readonly 50: "#E5F6EA";
-                readonly 100: "#C1E7CC";
-                readonly 200: "#98D8AC";
-                readonly 300: "#6CCA8B";
-                readonly 400: "#47BE72";
-                readonly 500: "#10B259";
-                readonly 600: "#00A34F";
-                readonly 700: "#009143";
-                readonly 800: "#007F38";
-                readonly 900: "#006024";
-            };
-            readonly orange: {
-                readonly 50: "#FFF8EC";
-                readonly 100: "#FFF0D3";
-                readonly 200: "#FFDDA5";
-                readonly 300: "#FFC46D";
-                readonly 400: "#FF9F32";
-                readonly 500: "#FF820A";
-                readonly 600: "#FF6900";
-                readonly 700: "#CC4B02";
-                readonly 800: "#A13A0B";
-                readonly 900: "#82320C";
-            };
-            readonly yellow: {
-                readonly 50: "#FFFDE7";
-                readonly 100: "#FFFAC1";
-                readonly 200: "#FFF186";
-                readonly 300: "#FFE041";
-                readonly 400: "#FFCC0D";
-                readonly 500: "#F0B100";
-                readonly 600: "#D18800";
-                readonly 700: "#A66002";
-                readonly 800: "#894B0A";
-                readonly 900: "#743D0F";
-            };
-            readonly blue: {
-                readonly 50: "#F1F4FD";
-                readonly 100: "#DFE7FA";
-                readonly 200: "#C5D4F8";
-                readonly 300: "#9EB8F2";
-                readonly 400: "#7093EA";
-                readonly 500: "#4D6DE3";
-                readonly 600: "#3950D7";
-                readonly 700: "#303EC5";
-                readonly 800: "#2D35A0";
-                readonly 900: "#29317F";
-            };
-            readonly lightblue: {
-                readonly 50: "#EEFAFF";
-                readonly 100: "#D9F4FF";
-                readonly 200: "#BBEDFF";
-                readonly 300: "#8DE3FF";
-                readonly 400: "#57D0FF";
-                readonly 500: "#30B6FF";
-                readonly 600: "#1999F7";
-                readonly 700: "#1280E3";
-                readonly 800: "#1566B8";
-                readonly 900: "#175791";
-            };
-            readonly purple: {
-                readonly 50: "#FBF6FE";
-                readonly 100: "#F5EAFD";
-                readonly 200: "#EDD8FC";
-                readonly 300: "#E0BAF8";
-                readonly 400: "#CD8DF3";
-                readonly 500: "#B961EB";
-                readonly 600: "#A541DC";
-                readonly 700: "#9230C5";
-                readonly 800: "#782B9E";
-                readonly 900: "#62247F";
-            };
-            readonly pink: {
-                readonly 50: "#FFF4FE";
-                readonly 100: "#FFE7FD";
-                readonly 200: "#FFCFFA";
-                readonly 300: "#FEA9F1";
-                readonly 400: "#FD75E7";
-                readonly 500: "#F553DA";
-                readonly 600: "#D821B6";
-                readonly 700: "#B31892";
-                readonly 800: "#921676";
-                readonly 900: "#781761";
-            };
-            readonly neutral: {
-                readonly 50: "#FAFAFA";
-                readonly 100: "#F5F5F5";
-                readonly 200: "#E5E5E5";
-                readonly 300: "#D4D4D4";
-                readonly 400: "#A1A1A1";
-                readonly 500: "#737373";
-                readonly 600: "#525252";
-                readonly 700: "#404040";
-                readonly 800: "#262626";
-                readonly 900: "#171717";
-            };
-            readonly black: "#000000";
-            readonly white: "#FFFFFF";
-        };
-        readonly test: {
-            readonly default: "#ffffff";
-        };
-    }[N]>(props: RadioProps<N, C>): react_jsx_runtime.JSX.Element;
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>>(props: RadioProps<N, C>): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -141,6 +27,7 @@ interface RadioGroupContextProps {
     value?: string | number;
     name: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
+    size?: "sm" | "md" | "lg";
 }
 
 interface RadioGroupProps extends RadioGroupContextProps {

package/dist/components/Radio/index.js

@@ -125,7 +125,7 @@ var getColorClass = (namespace, palette, shade) => {
   return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
 };
 
-// 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;
@@ -161,9 +161,11 @@ var Radio = (props) => {
     colorNamespace = "xplat",
     color = "blue",
     colorDepth,
+    size: sizeProp,
     ...rest
   } = props;
   const context = useRadioGroupContext();
+  const size = sizeProp ?? context?.size ?? "md";
   const isGroup = !!context;
   const localChecked = isGroup ? context.value === value : rest.checked ?? false;
   const inputProps = context ? { name: context.name, value, onChange: context.onChange } : {
@@ -181,6 +183,7 @@ var Radio = (props) => {
     {
       className: clsx_default(
         "lib-xplat-radio",
+        size,
         localChecked ? "checked" : void 0,
         className
       ),

package/dist/components/Select/index.cjs

@@ -1001,7 +1001,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;
@@ -1066,7 +1066,8 @@ var SelectRoot = (props) => {
     onChange,
     children,
     disabled = false,
-    error = false
+    error = false,
+    size = "md"
   } = props;
   const itemChildren = import_react5.default.Children.toArray(children).filter(
     (child) => import_react5.default.isValidElement(child) && child.type === SelectItem_default
@@ -1137,6 +1138,7 @@ var SelectRoot = (props) => {
     {
       className: clsx_default(
         "lib-xplat-select",
+        size,
         disabled && "disabled",
         error && "error",
         mounted && "is-open"

package/dist/components/Select/index.css

@@ -7,6 +7,29 @@
 .lib-xplat-select.is-open {
   z-index: 1;
 }
+.lib-xplat-select.sm .select-trigger {
+  min-height: 32px;
+  padding: 4px 10px;
+  font-size: 0.75rem;
+}
+.lib-xplat-select.md .select-trigger {
+  min-height: 40px;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+}
+.lib-xplat-select.lg .select-trigger {
+  min-height: 48px;
+  padding: 10px 14px;
+  font-size: 1rem;
+}
+.lib-xplat-select.sm .select-content .select-item {
+  padding: 6px 10px;
+  font-size: 0.75rem;
+}
+.lib-xplat-select.lg .select-content .select-item {
+  padding: 10px 14px;
+  font-size: 1rem;
+}
 .lib-xplat-select .select-trigger {
   cursor: pointer;
   user-select: none;
@@ -15,36 +38,33 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  min-height: 40px;
-  padding: 8px 12px;
-  border: 1px solid #D4D4D4;
+  border: 1px solid var(--xplat-neutral-300);
   border-radius: 8px;
   background-color: #fff;
-  font-size: 0.875rem;
-  color: #171717;
+  color: var(--xplat-neutral-900);
 }
 .lib-xplat-select .select-trigger:focus-visible {
-  outline: 2px solid #4D6DE3;
+  outline: 2px solid var(--xplat-blue-500);
   outline-offset: 2px;
 }
 .lib-xplat-select .select-trigger.disabled {
   cursor: not-allowed;
   pointer-events: none;
-  background-color: #F5F5F5;
-  border-color: #D4D4D4;
-  color: #A1A1A1;
+  background-color: var(--xplat-neutral-100);
+  border-color: var(--xplat-neutral-300);
+  color: var(--xplat-neutral-400);
 }
 .lib-xplat-select .select-trigger.disabled .select-trigger-value.placeholder {
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
 }
 .lib-xplat-select .select-trigger.disabled .select-trigger-icon {
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
 }
 .lib-xplat-select .select-trigger.error:not(.disabled) {
-  border-color: #FF272B;
+  border-color: var(--xplat-red-500);
 }
 .lib-xplat-select .select-trigger.error:not(.disabled):focus-visible {
-  outline-color: #FF272B;
+  outline-color: var(--xplat-red-500);
 }
 .lib-xplat-select .select-trigger .select-trigger-value {
   flex: 1;
@@ -55,14 +75,14 @@
   white-space: nowrap;
 }
 .lib-xplat-select .select-trigger .select-trigger-value.placeholder {
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
 }
 .lib-xplat-select .select-trigger .select-trigger-icon {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #737373;
+  color: var(--xplat-neutral-500);
   transition: transform 0.2s ease;
 }
 .lib-xplat-select .select-trigger .select-trigger-icon.open {
@@ -125,12 +145,12 @@
   outline: none;
 }
 .lib-xplat-select .select-item:hover:not(.disabled) {
-  background-color: #F5F5F5;
+  background-color: var(--xplat-neutral-100);
 }
 .lib-xplat-select .select-item:focus-visible:not(.disabled) {
-  background-color: #F5F5F5;
+  background-color: var(--xplat-neutral-100);
 }
 .lib-xplat-select .select-item.disabled {
   cursor: not-allowed;
-  color: #A1A1A1;
+  color: var(--xplat-neutral-400);
 }

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

@@ -19,6 +19,7 @@ declare const SelectItem: {
 type SelectItemElement = React.ReactElement<SelectItemProps, typeof SelectItem>;
 /** 값 변경 시 호출 (value: 아이템 value, label: 표시 텍스트) */
 type SelectChangeHandler = (value: string | number | undefined, label: React.ReactNode) => void;
+type SelectSize = "sm" | "md" | "lg";
 interface SelectProps {
     /** 선택 전 표시할 문구 */
     placeholder?: string;
@@ -32,6 +33,8 @@ interface SelectProps {
     disabled?: boolean;
     /** 에러 상태 */
     error?: boolean;
+    /** 사이즈 */
+    size?: SelectSize;
 }
 declare const Select: {
     (props: SelectProps): react_jsx_runtime.JSX.Element;

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

@@ -19,6 +19,7 @@ declare const SelectItem: {
 type SelectItemElement = React.ReactElement<SelectItemProps, typeof SelectItem>;
 /** 값 변경 시 호출 (value: 아이템 value, label: 표시 텍스트) */
 type SelectChangeHandler = (value: string | number | undefined, label: React.ReactNode) => void;
+type SelectSize = "sm" | "md" | "lg";
 interface SelectProps {
     /** 선택 전 표시할 문구 */
     placeholder?: string;
@@ -32,6 +33,8 @@ interface SelectProps {
     disabled?: boolean;
     /** 에러 상태 */
     error?: boolean;
+    /** 사이즈 */
+    size?: SelectSize;
 }
 declare const Select: {
     (props: SelectProps): react_jsx_runtime.JSX.Element;

package/dist/components/Select/index.js

@@ -964,7 +964,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;
@@ -1029,7 +1029,8 @@ var SelectRoot = (props) => {
     onChange,
     children,
     disabled = false,
-    error = false
+    error = false,
+    size = "md"
   } = props;
   const itemChildren = React5.Children.toArray(children).filter(
     (child) => React5.isValidElement(child) && child.type === SelectItem_default
@@ -1100,6 +1101,7 @@ var SelectRoot = (props) => {
     {
       className: clsx_default(
         "lib-xplat-select",
+        size,
         disabled && "disabled",
         error && "error",
         mounted && "is-open"

package/dist/components/Skeleton/index.cjs

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

@@ -1,6 +1,6 @@
 /* src/components/Skeleton/skeleton.scss */
 .lib-xplat-skeleton {
-  background-color: #E5E5E5;
+  background-color: var(--xplat-neutral-200);
   animation: lib-xplat-skeleton-pulse 1.5s ease-in-out infinite;
 }
 .lib-xplat-skeleton.text {

package/dist/components/Skeleton/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/Spinner/index.cjs

@@ -151,7 +151,7 @@ var getColorClass = (namespace, palette, shade) => {
   return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
 };
 
-// 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;