@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/Skeleton/index.cjs

@@ -43,7 +43,7 @@ var clsx_default = clsx;
 // src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Skeleton = (props) => {
-  const { variant = "text", width, height, className } = props;
+  const { variant = "text", width, height } = props;
   const style = {
     width: typeof width === "number" ? `${width}px` : width,
     height: typeof height === "number" ? `${height}px` : height
@@ -51,7 +51,7 @@ var Skeleton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: clsx_default("lib-xplat-skeleton", variant, className),
+      className: clsx_default("lib-xplat-skeleton", variant),
       style,
       "aria-hidden": "true"
     }

package/dist/components/Skeleton/index.css

@@ -1,18 +1,18 @@
 /* src/components/Skeleton/skeleton.scss */
 .lib-xplat-skeleton {
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-surface-neutral-disabled);
   animation: lib-xplat-skeleton-pulse 1.5s ease-in-out infinite;
 }
 .lib-xplat-skeleton.text {
   width: 100%;
   height: 1em;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
 }
 .lib-xplat-skeleton.circular {
   border-radius: 50%;
 }
 .lib-xplat-skeleton.rectangular {
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
 }
 @keyframes lib-xplat-skeleton-pulse {
   0% {

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

@@ -5,7 +5,6 @@ interface SkeletonProps {
     variant?: SkeletonVariant;
     width?: string | number;
     height?: string | number;
-    className?: string;
 }
 declare const Skeleton: React.FC<SkeletonProps>;
 

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

@@ -5,7 +5,6 @@ interface SkeletonProps {
     variant?: SkeletonVariant;
     width?: string | number;
     height?: string | number;
-    className?: string;
 }
 declare const Skeleton: React.FC<SkeletonProps>;
 

package/dist/components/Skeleton/index.js

@@ -17,7 +17,7 @@ var clsx_default = clsx;
 // src/components/Skeleton/Skeleton.tsx
 import { jsx } from "react/jsx-runtime";
 var Skeleton = (props) => {
-  const { variant = "text", width, height, className } = props;
+  const { variant = "text", width, height } = props;
   const style = {
     width: typeof width === "number" ? `${width}px` : width,
     height: typeof height === "number" ? `${height}px` : height
@@ -25,7 +25,7 @@ var Skeleton = (props) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx_default("lib-xplat-skeleton", variant, className),
+      className: clsx_default("lib-xplat-skeleton", variant),
       style,
       "aria-hidden": "true"
     }

package/dist/components/Spinner/index.cjs

@@ -45,14 +45,12 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
-    color = "xplat-blue-500",
-    className
+    type = "brand"
   } = props;
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: clsx_default("lib-xplat-spinner", size, colorClass, className),
+      className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [

package/dist/components/Spinner/index.css

@@ -5,16 +5,16 @@
   justify-content: center;
 }
 .lib-xplat-spinner.sm {
-  width: 16px;
-  height: 16px;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-spinner.md {
-  width: 24px;
-  height: 24px;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-spinner.lg {
-  width: 36px;
-  height: 36px;
+  width: var(--spacing-space-9);
+  height: var(--spacing-space-9);
 }
 .lib-xplat-spinner svg {
   width: 100%;
@@ -22,12 +22,26 @@
   animation: lib-xplat-spin 0.8s linear infinite;
 }
 .lib-xplat-spinner .track {
-  stroke: var(--xplat-neutral-200);
+  stroke: var(--semantic-border-default);
 }
 .lib-xplat-spinner .indicator {
   stroke-dasharray: 42;
   stroke-dashoffset: 28;
-  stroke: var(--ds-color);
+}
+.lib-xplat-spinner.brand .indicator {
+  stroke: var(--semantic-surface-brand-default);
+}
+.lib-xplat-spinner.success .indicator {
+  stroke: var(--semantic-surface-success-default);
+}
+.lib-xplat-spinner.error .indicator {
+  stroke: var(--semantic-surface-error-default);
+}
+.lib-xplat-spinner.warning .indicator {
+  stroke: var(--semantic-surface-warning-default);
+}
+.lib-xplat-spinner.info .indicator {
+  stroke: var(--semantic-surface-info-default);
 }
 @keyframes lib-xplat-spin {
   from {

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

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 type SpinnerSize = "sm" | "md" | "lg";
-interface SpinnerProps extends ColorProps {
+type SpinnerType = "brand" | "success" | "error" | "warning" | "info";
+interface SpinnerProps {
     size?: SpinnerSize;
-    className?: string;
+    type?: SpinnerType;
 }
 declare const Spinner: {
     (props: SpinnerProps): react_jsx_runtime.JSX.Element;

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

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 type SpinnerSize = "sm" | "md" | "lg";
-interface SpinnerProps extends ColorProps {
+type SpinnerType = "brand" | "success" | "error" | "warning" | "info";
+interface SpinnerProps {
     size?: SpinnerSize;
-    className?: string;
+    type?: SpinnerType;
 }
 declare const Spinner: {
     (props: SpinnerProps): react_jsx_runtime.JSX.Element;

package/dist/components/Spinner/index.js

@@ -19,14 +19,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Spinner = (props) => {
   const {
     size = "md",
-    color = "xplat-blue-500",
-    className
+    type = "brand"
   } = props;
-  const colorClass = color;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx_default("lib-xplat-spinner", size, colorClass, className),
+      className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
       children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [