@x-plat/design-system 0.4.6 → 0.5.0

package/dist/components/Accordion/index.cjs

@@ -436,10 +436,10 @@ var import_jsx_runtime126 = require("react/jsx-runtime");
 // src/tokens/svg/file/BookIcon.tsx
 var import_jsx_runtime127 = require("react/jsx-runtime");
 
-// src/tokens/svg/file/BookOpenIcon.tsx
+// src/tokens/svg/file/BookmarkIcon.tsx
 var import_jsx_runtime128 = require("react/jsx-runtime");
 
-// src/tokens/svg/file/BookmarkIcon.tsx
+// src/tokens/svg/file/BookOpenIcon.tsx
 var import_jsx_runtime129 = require("react/jsx-runtime");
 
 // src/tokens/svg/file/ClipboardIcon.tsx
@@ -895,10 +895,10 @@ var import_jsx_runtime279 = require("react/jsx-runtime");
 // src/tokens/svg/user/UserPlusIcon.tsx
 var import_jsx_runtime280 = require("react/jsx-runtime");
 
-// src/tokens/svg/user/UserXIcon.tsx
+// src/tokens/svg/user/UsersIcon.tsx
 var import_jsx_runtime281 = require("react/jsx-runtime");
 
-// src/tokens/svg/user/UsersIcon.tsx
+// src/tokens/svg/user/UserXIcon.tsx
 var import_jsx_runtime282 = require("react/jsx-runtime");
 
 // src/tokens/svg/weather/CloudDrizzleIcon.tsx

package/dist/components/Accordion/index.css

@@ -1,11 +1,11 @@
 /* src/components/Accordion/accordion.scss */
 .lib-xplat-accordion {
-  border: 1px solid var(--xplat-neutral-200);
-  border-radius: 0.5rem;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   overflow: hidden;
 }
 .lib-xplat-accordion .accordion-item {
-  border-bottom: 1px solid var(--xplat-neutral-200);
+  border-bottom: 1px solid var(--semantic-border-default);
 }
 .lib-xplat-accordion .accordion-item:last-child {
   border-bottom: none;
@@ -15,28 +15,28 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0.875rem 1rem;
+  padding: 14px var(--spacing-space-4);
   background: none;
   border: none;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
   text-align: left;
   transition: background-color 0.2s;
 }
 .lib-xplat-accordion .accordion-header:hover {
-  background-color: var(--xplat-neutral-50);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-accordion .accordion-header .chevron {
-  width: 20px;
-  height: 20px;
+  width: var(--spacing-space-5);
+  height: var(--spacing-space-5);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.25s ease;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
 }
 .lib-xplat-accordion .accordion-body {
   overflow: hidden;
@@ -44,9 +44,9 @@
   transition: max-height 0.25s ease;
 }
 .lib-xplat-accordion .accordion-content {
-  padding: 0 1rem 0.875rem;
+  padding: 0 var(--spacing-space-4) 14px;
   font-size: 14px;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   line-height: 1.6;
 }
 .lib-xplat-accordion .accordion-item.open .chevron {

package/dist/components/Accordion/index.js

@@ -400,10 +400,10 @@ import { jsx as jsx126, jsxs as jsxs72 } from "react/jsx-runtime";
 // src/tokens/svg/file/BookIcon.tsx
 import { jsx as jsx127 } from "react/jsx-runtime";
 
-// src/tokens/svg/file/BookOpenIcon.tsx
+// src/tokens/svg/file/BookmarkIcon.tsx
 import { jsx as jsx128 } from "react/jsx-runtime";
 
-// src/tokens/svg/file/BookmarkIcon.tsx
+// src/tokens/svg/file/BookOpenIcon.tsx
 import { jsx as jsx129 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/ClipboardIcon.tsx
@@ -859,10 +859,10 @@ import { jsx as jsx279, jsxs as jsxs177 } from "react/jsx-runtime";
 // src/tokens/svg/user/UserPlusIcon.tsx
 import { jsx as jsx280, jsxs as jsxs178 } from "react/jsx-runtime";
 
-// src/tokens/svg/user/UserXIcon.tsx
+// src/tokens/svg/user/UsersIcon.tsx
 import { jsx as jsx281, jsxs as jsxs179 } from "react/jsx-runtime";
 
-// src/tokens/svg/user/UsersIcon.tsx
+// src/tokens/svg/user/UserXIcon.tsx
 import { jsx as jsx282, jsxs as jsxs180 } from "react/jsx-runtime";
 
 // src/tokens/svg/weather/CloudDrizzleIcon.tsx

package/dist/components/Alert/index.css

@@ -3,8 +3,8 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
+  padding: var(--spacing-space-3) var(--spacing-space-4);
+  border-radius: var(--spacing-radius-md);
   font-size: 14px;
   line-height: 1.5;
   border: 1px solid;
@@ -18,7 +18,7 @@
   cursor: pointer;
   font-size: 18px;
   line-height: 1;
-  margin-left: 0.5rem;
+  margin-left: var(--spacing-space-2);
   padding: 0;
   opacity: 0.6;
   transition: opacity 0.2s;
@@ -27,34 +27,34 @@
   opacity: 1;
 }
 .lib-xplat-alert.info {
-  background-color: var(--xplat-lightblue-50);
-  border-color: var(--xplat-lightblue-200);
-  color: var(--xplat-lightblue-700);
+  background-color: var(--semantic-surface-info-subtle);
+  border-color: var(--semantic-border-info);
+  color: var(--semantic-text-info);
 }
 .lib-xplat-alert.info .close-btn {
-  color: var(--xplat-lightblue-700);
+  color: var(--semantic-text-info);
 }
 .lib-xplat-alert.success {
-  background-color: var(--xplat-green-50);
-  border-color: var(--xplat-green-200);
-  color: var(--xplat-green-700);
+  background-color: var(--semantic-surface-success-subtle);
+  border-color: var(--semantic-border-success);
+  color: var(--semantic-text-success);
 }
 .lib-xplat-alert.success .close-btn {
-  color: var(--xplat-green-700);
+  color: var(--semantic-text-success);
 }
 .lib-xplat-alert.warning {
-  background-color: var(--xplat-yellow-50);
-  border-color: var(--xplat-yellow-200);
-  color: var(--xplat-yellow-700);
+  background-color: var(--semantic-surface-warning-subtle);
+  border-color: var(--semantic-border-warning);
+  color: var(--semantic-text-warning);
 }
 .lib-xplat-alert.warning .close-btn {
-  color: var(--xplat-yellow-700);
+  color: var(--semantic-text-warning);
 }
 .lib-xplat-alert.error {
-  background-color: var(--xplat-red-50);
-  border-color: var(--xplat-red-200);
-  color: var(--xplat-red-700);
+  background-color: var(--semantic-surface-error-subtle);
+  border-color: var(--semantic-border-error);
+  color: var(--semantic-text-error);
 }
 .lib-xplat-alert.error .close-btn {
-  color: var(--xplat-red-700);
+  color: var(--semantic-text-error);
 }

package/dist/components/Avatar/index.cjs

@@ -42,17 +42,23 @@ var clsx_default = clsx;
 
 // src/components/Avatar/Avatar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var CATEGORICAL_COUNT = 8;
+var getColorIndex = (name) => {
+  if (!name) return 1;
+  const code = name.charCodeAt(0) || 0;
+  return code % CATEGORICAL_COUNT + 1;
+};
 var Avatar = (props) => {
   const {
     src,
     alt,
     name,
-    size = "md",
-    color = "xplat-blue-500"
+    size = "md"
   } = props;
-  const colorClass = color;
-  const initials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
+  const fullInitials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
+  const initials = size === "sm" ? fullInitials.slice(0, 1) : fullInitials;
+  const catIndex = getColorIndex(name || "");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("fallback", `cat-${catIndex}`), children: initials || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
 };
 Avatar.displayName = "Avatar";
 var Avatar_default = Avatar;

package/dist/components/Avatar/index.css

@@ -9,18 +9,18 @@
   user-select: none;
 }
 .lib-xplat-avatar.sm {
-  width: 32px;
-  height: 32px;
-  font-size: 12px;
+  width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
+  font-size: 11px;
 }
 .lib-xplat-avatar.md {
-  width: 40px;
-  height: 40px;
+  width: var(--spacing-control-height-md);
+  height: var(--spacing-control-height-md);
   font-size: 14px;
 }
 .lib-xplat-avatar.lg {
-  width: 56px;
-  height: 56px;
+  width: var(--spacing-control-height-lg);
+  height: var(--spacing-control-height-lg);
   font-size: 18px;
 }
 .lib-xplat-avatar img {
@@ -34,13 +34,43 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--xplat-white);
   font-weight: 600;
+  background-color: var(--semantic-surface-neutral-subtle);
+  color: var(--semantic-text-muted);
+}
+.lib-xplat-avatar .fallback.cat-1 {
+  background-color: var(--semantic-categorical-1-bg);
+  color: var(--semantic-categorical-1-text);
+}
+.lib-xplat-avatar .fallback.cat-2 {
+  background-color: var(--semantic-categorical-2-bg);
+  color: var(--semantic-categorical-2-text);
+}
+.lib-xplat-avatar .fallback.cat-3 {
+  background-color: var(--semantic-categorical-3-bg);
+  color: var(--semantic-categorical-3-text);
+}
+.lib-xplat-avatar .fallback.cat-4 {
+  background-color: var(--semantic-categorical-4-bg);
+  color: var(--semantic-categorical-4-text);
+}
+.lib-xplat-avatar .fallback.cat-5 {
+  background-color: var(--semantic-categorical-5-bg);
+  color: var(--semantic-categorical-5-text);
+}
+.lib-xplat-avatar .fallback.cat-6 {
+  background-color: var(--semantic-categorical-6-bg);
+  color: var(--semantic-categorical-6-text);
+}
+.lib-xplat-avatar .fallback.cat-7 {
+  background-color: var(--semantic-categorical-7-bg);
+  color: var(--semantic-categorical-7-text);
+}
+.lib-xplat-avatar .fallback.cat-8 {
+  background-color: var(--semantic-categorical-8-bg);
+  color: var(--semantic-categorical-8-text);
 }
 .lib-xplat-avatar .fallback svg {
   width: 60%;
   height: 60%;
 }
-.lib-xplat-avatar .fallback {
-  background-color: var(--ds-color);
-}

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

@@ -1,8 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 type AvatarSize = "sm" | "md" | "lg";
-interface AvatarProps extends ColorProps {
+interface AvatarProps {
     src?: string;
     alt?: string;
     name?: string;

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

@@ -1,8 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 type AvatarSize = "sm" | "md" | "lg";
-interface AvatarProps extends ColorProps {
+interface AvatarProps {
     src?: string;
     alt?: string;
     name?: string;

package/dist/components/Avatar/index.js

@@ -16,17 +16,23 @@ var clsx_default = clsx;
 
 // src/components/Avatar/Avatar.tsx
 import { jsx } from "react/jsx-runtime";
+var CATEGORICAL_COUNT = 8;
+var getColorIndex = (name) => {
+  if (!name) return 1;
+  const code = name.charCodeAt(0) || 0;
+  return code % CATEGORICAL_COUNT + 1;
+};
 var Avatar = (props) => {
   const {
     src,
     alt,
     name,
-    size = "md",
-    color = "xplat-blue-500"
+    size = "md"
   } = props;
-  const colorClass = color;
-  const initials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
-  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ jsx("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ jsx("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
+  const fullInitials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
+  const initials = size === "sm" ? fullInitials.slice(0, 1) : fullInitials;
+  const catIndex = getColorIndex(name || "");
+  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ jsx("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ jsx("div", { className: clsx_default("fallback", `cat-${catIndex}`), children: initials || /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
 };
 Avatar.displayName = "Avatar";
 var Avatar_default = Avatar;

package/dist/components/Badge/index.cjs

@@ -45,18 +45,17 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Badge = (props) => {
   const {
     children,
+    type = "error",
     count,
     maxCount = 99,
     dot = false,
-    size = "md",
-    color = "xplat-red-500"
+    size = "md"
   } = props;
-  const colorClass = color;
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: clsx_default("badge-indicator", colorClass, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
   ] });
 };
 Badge.displayName = "Badge";

package/dist/components/Badge/index.css

@@ -4,24 +4,24 @@
   display: inline-flex;
 }
 .lib-xplat-badge.sm .badge-indicator {
-  min-width: 14px;
-  height: 14px;
+  min-width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
   font-size: 9px;
-  padding: 0 3px;
+  padding: 0 var(--spacing-space-1);
 }
 .lib-xplat-badge.sm .badge-indicator.dot {
-  min-width: 6px;
-  height: 6px;
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
 }
 .lib-xplat-badge.lg .badge-indicator {
-  min-width: 22px;
-  height: 22px;
+  min-width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
   font-size: 13px;
-  padding: 0 6px;
+  padding: 0 var(--spacing-space-2);
 }
 .lib-xplat-badge.lg .badge-indicator.dot {
-  min-width: 10px;
-  height: 10px;
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
 }
 .lib-xplat-badge .badge-indicator {
   position: absolute;
@@ -31,21 +31,34 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 10rem;
-  color: var(--xplat-white);
+  border-radius: var(--spacing-radius-full);
+  color: var(--semantic-text-inverse);
   font-size: 11px;
   font-weight: 600;
   line-height: 1;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
+  min-width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
+  padding: 0 var(--spacing-space-1);
   box-sizing: border-box;
 }
 .lib-xplat-badge .badge-indicator.dot {
-  min-width: 8px;
-  height: 8px;
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
   padding: 0;
 }
-.lib-xplat-badge .badge-indicator {
-  background-color: var(--ds-color);
+.lib-xplat-badge .badge-indicator.error {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-badge .badge-indicator.success {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-badge .badge-indicator.warning {
+  background-color: var(--semantic-surface-warning-default);
+  color: var(--semantic-text-strong);
+}
+.lib-xplat-badge .badge-indicator.info {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-badge .badge-indicator.brand {
+  background-color: var(--semantic-surface-brand-default);
 }

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

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
+type BadgeType = "error" | "success" | "warning" | "info" | "brand";
 type BadgeSize = "sm" | "md" | "lg";
-interface BadgeProps extends ColorProps {
+interface BadgeProps {
     children: React.ReactNode;
+    type?: BadgeType;
     count?: number;
     maxCount?: number;
     dot?: boolean;

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

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
+type BadgeType = "error" | "success" | "warning" | "info" | "brand";
 type BadgeSize = "sm" | "md" | "lg";
-interface BadgeProps extends ColorProps {
+interface BadgeProps {
     children: React.ReactNode;
+    type?: BadgeType;
     count?: number;
     maxCount?: number;
     dot?: boolean;

package/dist/components/Badge/index.js

@@ -19,18 +19,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Badge = (props) => {
   const {
     children,
+    type = "error",
     count,
     maxCount = 99,
     dot = false,
-    size = "md",
-    color = "xplat-red-500"
+    size = "md"
   } = props;
-  const colorClass = color;
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
   return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ jsx("span", { className: clsx_default("badge-indicator", colorClass, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ jsx("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
   ] });
 };
 Badge.displayName = "Badge";

package/dist/components/Breadcrumb/index.css

@@ -5,17 +5,17 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  gap: 4px;
+  gap: var(--spacing-space-1);
   flex-wrap: wrap;
 }
 .lib-xplat-breadcrumb li {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-space-1);
   font-size: 14px;
 }
 .lib-xplat-breadcrumb .link {
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
   text-decoration: none;
   background: none;
   border: none;
@@ -25,13 +25,13 @@
   transition: color 0.2s;
 }
 .lib-xplat-breadcrumb .link:hover {
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-breadcrumb .current {
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
   font-weight: 500;
 }
 .lib-xplat-breadcrumb .separator {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-icon-subtle);
   user-select: none;
 }

package/dist/components/Button/index.cjs

@@ -47,15 +47,13 @@ var Button = (props) => {
     children,
     type = "primary",
     size = "md",
-    color = "xplat-black",
     disabled,
     ...rest
   } = props;
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size, colorClass),
+      className: clsx_default("lib-xplat-button", type, size),
       disabled,
       ...rest,
       children