@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/TextArea/index.cjs

@@ -57,7 +57,7 @@ var clsx_default = clsx;
 var import_jsx_runtime = require("react/jsx-runtime");
 var TextArea = import_react.default.forwardRef(
   (props, ref) => {
-    const { value, onChange, className, disabled, ...textareaProps } = props;
+    const { value, onChange, disabled, ...textareaProps } = props;
     const localRef = import_react.default.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -85,7 +85,7 @@ var TextArea = import_react.default.forwardRef(
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         className: clsx_default(

package/dist/components/TextArea/index.css

@@ -2,30 +2,41 @@
 .lib-xplat-textarea-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea {
   display: flex;
   align-items: center;
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 0.5rem;
-  min-height: 2.5rem;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
+  min-height: var(--spacing-control-height-md);
   overflow: hidden;
-  background-color: var(--xplat-white);
+  background-color: var(--semantic-surface-neutral-default);
   width: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea.disabled {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
   cursor: not-allowed;
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea {
   border: none;
   outline: none;
   flex: 1;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: var(--spacing-space-4);
+  padding-right: var(--spacing-space-4);
   width: 100%;
-  color: var(--xplat-neutral-700);
+  color: var(--semantic-text-subtle);
   resize: none;
   height: 1.5em;
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.cjs';
 
-declare const TextArea: React.ForwardRefExoticComponent<TextareaAttributes & React.RefAttributes<HTMLTextAreaElement>>;
+type TextareaProps = Omit<TextareaAttributes, "className">;
+declare const TextArea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 export { TextArea };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.js';
 
-declare const TextArea: React.ForwardRefExoticComponent<TextareaAttributes & React.RefAttributes<HTMLTextAreaElement>>;
+type TextareaProps = Omit<TextareaAttributes, "className">;
+declare const TextArea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 export { TextArea };

package/dist/components/TextArea/index.js

@@ -21,7 +21,7 @@ var clsx_default = clsx;
 import { jsx } from "react/jsx-runtime";
 var TextArea = React.forwardRef(
   (props, ref) => {
-    const { value, onChange, className, disabled, ...textareaProps } = props;
+    const { value, onChange, disabled, ...textareaProps } = props;
     const localRef = React.useRef(null);
     const setRefs = (el) => {
       localRef.current = el;
@@ -49,7 +49,7 @@ var TextArea = React.forwardRef(
       const nextHeight = Math.min(el.scrollHeight, 400);
       el.style.height = `${nextHeight}px`;
     }, [value]);
-    return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx(
       "div",
       {
         className: clsx_default(

package/dist/components/Toast/index.css

@@ -8,41 +8,41 @@
   pointer-events: none;
 }
 .lib-xplat-toast-container.top {
-  top: 16px;
+  top: var(--spacing-space-4);
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
 .lib-xplat-toast-container.bottom {
-  bottom: 16px;
+  bottom: var(--spacing-space-4);
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
 .lib-xplat-toast-container.top-left {
-  top: 16px;
-  left: 16px;
+  top: var(--spacing-space-4);
+  left: var(--spacing-space-4);
   align-items: flex-start;
 }
 .lib-xplat-toast-container.top-right {
-  top: 16px;
-  right: 16px;
+  top: var(--spacing-space-4);
+  right: var(--spacing-space-4);
   align-items: flex-end;
 }
 .lib-xplat-toast-container.bottom-left {
-  bottom: 16px;
-  left: 16px;
+  bottom: var(--spacing-space-4);
+  left: var(--spacing-space-4);
   align-items: flex-start;
 }
 .lib-xplat-toast-container.bottom-right {
-  bottom: 16px;
-  right: 16px;
+  bottom: var(--spacing-space-4);
+  right: var(--spacing-space-4);
   align-items: flex-end;
 }
 .lib-xplat-toast-wrapper {
   overflow: hidden;
   transition: max-height 0.3s ease, margin-bottom 0.3s ease;
-  margin-bottom: 8px;
+  margin-bottom: var(--spacing-space-2);
 }
 .lib-xplat-toast-wrapper.exit {
   margin-bottom: 0;
@@ -50,9 +50,9 @@
 .lib-xplat-toast {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
+  gap: var(--spacing-space-2);
+  padding: var(--spacing-space-3) var(--spacing-space-4);
+  border-radius: var(--spacing-radius-md);
   font-size: 14px;
   line-height: 1.5;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
@@ -84,20 +84,20 @@
   opacity: 1;
 }
 .lib-xplat-toast.info {
-  background-color: var(--xplat-lightblue-600);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-info-default);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-toast.success {
-  background-color: var(--xplat-green-600);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-success-default);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-toast.warning {
-  background-color: var(--xplat-yellow-500);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-warning-default);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-toast.error {
-  background-color: var(--xplat-red-600);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-error-default);
+  color: var(--semantic-text-inverse);
 }
 @keyframes lib-xplat-toast-enter {
   from {

package/dist/components/Tooltip/index.cjs

@@ -58,15 +58,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Tooltip = (props) => {
   const {
     type = "primary",
-    color = "xplat-neutral-900",
     description,
     children
   } = props;
   const iconRef = import_react.default.useRef(null);
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-tooltip", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("tooltip-wrapper", type), children: description })
   ] });
 };
 Tooltip.displayName = "Tooltip";

package/dist/components/Tooltip/index.css

@@ -13,20 +13,20 @@
   left: 50%;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   white-space: nowrap;
-  border-radius: 0.25rem;
-  padding: 6px 10px;
+  border-radius: var(--spacing-radius-sm);
+  padding: var(--spacing-space-2) var(--spacing-space-2);
   opacity: 0;
   pointer-events: none;
   bottom: 100%;
   transition: opacity 0.12s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .lib-xplat-tooltip > .tooltip-wrapper.primary {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-neutral-strong);
 }
 .lib-xplat-tooltip > .tooltip-wrapper.secondary {
-  background-color: var(--xplat-white);
-  color: var(--ds-color);
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-tooltip.tooltip-bottom > .tooltip-wrapper {
   top: 100%;

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

@@ -1,8 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
-interface TooltipProps extends ColorProps {
+interface TooltipProps {
     type?: "primary" | "secondary";
     description: React.ReactNode;
     children?: React.ReactNode;

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

@@ -1,8 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
-interface TooltipProps extends ColorProps {
+interface TooltipProps {
     type?: "primary" | "secondary";
     description: React.ReactNode;
     children?: React.ReactNode;

package/dist/components/Tooltip/index.js

@@ -22,15 +22,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Tooltip = (props) => {
   const {
     type = "primary",
-    color = "xplat-neutral-900",
     description,
     children
   } = props;
   const iconRef = React.useRef(null);
-  const colorClass = color;
   return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-tooltip", children: [
     /* @__PURE__ */ jsx("div", { className: "tooltip-content", ref: iconRef, children: children || "Tooltip" }),
-    /* @__PURE__ */ jsx("div", { className: clsx_default("tooltip-wrapper", colorClass, type), children: description })
+    /* @__PURE__ */ jsx("div", { className: clsx_default("tooltip-wrapper", type), children: description })
   ] });
 };
 Tooltip.displayName = "Tooltip";

package/dist/components/Video/index.cjs

@@ -181,7 +181,6 @@ var Video = import_react.default.forwardRef((props, ref) => {
     muted,
     loop,
     playsInline,
-    className,
     onPlay,
     onPause,
     ...rest
@@ -222,8 +221,7 @@ var Video = import_react.default.forwardRef((props, ref) => {
     {
       className: clsx_default(
         "lib-xplat-video",
-        showCustomOverlay && "custom-overlay",
-        className
+        showCustomOverlay && "custom-overlay"
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(

package/dist/components/Video/index.css

@@ -2,9 +2,9 @@
 .lib-xplat-video {
   position: relative;
   width: 100%;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
   overflow: hidden;
-  background-color: var(--xplat-neutral-900);
+  background-color: var(--semantic-surface-neutral-strong);
 }
 .lib-xplat-video > video {
   display: block;
@@ -30,7 +30,7 @@
   background: transparent;
   cursor: pointer;
   padding: 0;
-  color: var(--xplat-white);
+  color: var(--semantic-icon-inverse);
   transition: opacity 0.2s ease, background-color 0.2s ease;
 }
 .lib-xplat-video.custom-overlay > .play-overlay::before {
@@ -46,7 +46,7 @@
   opacity: 1;
 }
 .lib-xplat-video.custom-overlay > .play-overlay:focus-visible {
-  outline: 2px solid var(--xplat-blue-500);
+  outline: 2px solid var(--semantic-interaction-focus-ring);
   outline-offset: 2px;
 }
 .lib-xplat-video.custom-overlay > .play-overlay > .play-icon {
@@ -55,7 +55,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 4rem;
+  font-size: 64px;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
 }
 .lib-xplat-video.custom-overlay > .play-overlay.is-playing {

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

@@ -7,8 +7,6 @@ interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "
     poster?: string;
     /** 네이티브 컨트롤 표시 여부. false면 커스텀 재생/일시정지 오버레이만 표시 */
     controls?: boolean;
-    /** 추가 스타일링용 클래스 */
-    className?: string;
 }
 declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
 

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

@@ -7,8 +7,6 @@ interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "
     poster?: string;
     /** 네이티브 컨트롤 표시 여부. false면 커스텀 재생/일시정지 오버레이만 표시 */
     controls?: boolean;
-    /** 추가 스타일링용 클래스 */
-    className?: string;
 }
 declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
 

package/dist/components/Video/index.js

@@ -145,7 +145,6 @@ var Video = React.forwardRef((props, ref) => {
     muted,
     loop,
     playsInline,
-    className,
     onPlay,
     onPause,
     ...rest
@@ -186,8 +185,7 @@ var Video = React.forwardRef((props, ref) => {
     {
       className: clsx_default(
         "lib-xplat-video",
-        showCustomOverlay && "custom-overlay",
-        className
+        showCustomOverlay && "custom-overlay"
       ),
       children: [
         /* @__PURE__ */ jsx29(