@x-plat/design-system 0.1.2 → 0.1.4

package/dist/components/Avatar/index.js

@@ -0,0 +1,169 @@
+// src/tokens/colors.ts
+var colors = {
+  xplat: {
+    red: {
+      50: "#FFF0F0",
+      100: "#FFDDDE",
+      200: "#FFC1C2",
+      300: "#FF9698",
+      400: "#FF5A5D",
+      500: "#FF272B",
+      600: "#F80409",
+      700: "#D40105",
+      800: "#AE0609",
+      900: "#900C0F"
+    },
+    green: {
+      50: "#E5F6EA",
+      100: "#C1E7CC",
+      200: "#98D8AC",
+      300: "#6CCA8B",
+      400: "#47BE72",
+      500: "#10B259",
+      600: "#00A34F",
+      700: "#009143",
+      800: "#007F38",
+      900: "#006024"
+    },
+    orange: {
+      50: "#FFF8EC",
+      100: "#FFF0D3",
+      200: "#FFDDA5",
+      300: "#FFC46D",
+      400: "#FF9F32",
+      500: "#FF820A",
+      600: "#FF6900",
+      700: "#CC4B02",
+      800: "#A13A0B",
+      900: "#82320C"
+    },
+    yellow: {
+      50: "#FFFDE7",
+      100: "#FFFAC1",
+      200: "#FFF186",
+      300: "#FFE041",
+      400: "#FFCC0D",
+      500: "#F0B100",
+      600: "#D18800",
+      700: "#A66002",
+      800: "#894B0A",
+      900: "#743D0F"
+    },
+    blue: {
+      50: "#F1F4FD",
+      100: "#DFE7FA",
+      200: "#C5D4F8",
+      300: "#9EB8F2",
+      400: "#7093EA",
+      500: "#4D6DE3",
+      600: "#3950D7",
+      700: "#303EC5",
+      800: "#2D35A0",
+      900: "#29317F"
+    },
+    lightblue: {
+      50: "#EEFAFF",
+      100: "#D9F4FF",
+      200: "#BBEDFF",
+      300: "#8DE3FF",
+      400: "#57D0FF",
+      500: "#30B6FF",
+      600: "#1999F7",
+      700: "#1280E3",
+      800: "#1566B8",
+      900: "#175791"
+    },
+    purple: {
+      50: "#FBF6FE",
+      100: "#F5EAFD",
+      200: "#EDD8FC",
+      300: "#E0BAF8",
+      400: "#CD8DF3",
+      500: "#B961EB",
+      600: "#A541DC",
+      700: "#9230C5",
+      800: "#782B9E",
+      900: "#62247F"
+    },
+    pink: {
+      50: "#FFF4FE",
+      100: "#FFE7FD",
+      200: "#FFCFFA",
+      300: "#FEA9F1",
+      400: "#FD75E7",
+      500: "#F553DA",
+      600: "#D821B6",
+      700: "#B31892",
+      800: "#921676",
+      900: "#781761"
+    },
+    neutral: {
+      50: "#FAFAFA",
+      100: "#F5F5F5",
+      200: "#E5E5E5",
+      300: "#D4D4D4",
+      400: "#A1A1A1",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717"
+    },
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  test: {
+    default: "#ffffff"
+  }
+};
+
+// src/util/getColor.ts
+var getColorClass = (namespace, palette, shade) => {
+  const namespaceMap = colors[namespace];
+  const paletteMap = namespaceMap[palette];
+  const hasShade = paletteMap && typeof paletteMap === "object" && shade !== void 0 && shade in paletteMap;
+  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
+};
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Avatar/Avatar.tsx
+import { jsx } from "react/jsx-runtime";
+var Avatar = (props) => {
+  const {
+    src,
+    alt,
+    name,
+    size = "md",
+    colorNamespace = "xplat",
+    color = "blue",
+    colorDepth,
+    className
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  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, className), 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" }) }) }) });
+};
+Avatar.displayName = "Avatar";
+var Avatar_default = Avatar;
+export {
+  Avatar_default as Avatar
+};

package/dist/components/Badge/index.cjs

@@ -0,0 +1,200 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Badge/index.ts
+var Badge_exports = {};
+__export(Badge_exports, {
+  Badge: () => Badge_default
+});
+module.exports = __toCommonJS(Badge_exports);
+
+// src/tokens/colors.ts
+var colors = {
+  xplat: {
+    red: {
+      50: "#FFF0F0",
+      100: "#FFDDDE",
+      200: "#FFC1C2",
+      300: "#FF9698",
+      400: "#FF5A5D",
+      500: "#FF272B",
+      600: "#F80409",
+      700: "#D40105",
+      800: "#AE0609",
+      900: "#900C0F"
+    },
+    green: {
+      50: "#E5F6EA",
+      100: "#C1E7CC",
+      200: "#98D8AC",
+      300: "#6CCA8B",
+      400: "#47BE72",
+      500: "#10B259",
+      600: "#00A34F",
+      700: "#009143",
+      800: "#007F38",
+      900: "#006024"
+    },
+    orange: {
+      50: "#FFF8EC",
+      100: "#FFF0D3",
+      200: "#FFDDA5",
+      300: "#FFC46D",
+      400: "#FF9F32",
+      500: "#FF820A",
+      600: "#FF6900",
+      700: "#CC4B02",
+      800: "#A13A0B",
+      900: "#82320C"
+    },
+    yellow: {
+      50: "#FFFDE7",
+      100: "#FFFAC1",
+      200: "#FFF186",
+      300: "#FFE041",
+      400: "#FFCC0D",
+      500: "#F0B100",
+      600: "#D18800",
+      700: "#A66002",
+      800: "#894B0A",
+      900: "#743D0F"
+    },
+    blue: {
+      50: "#F1F4FD",
+      100: "#DFE7FA",
+      200: "#C5D4F8",
+      300: "#9EB8F2",
+      400: "#7093EA",
+      500: "#4D6DE3",
+      600: "#3950D7",
+      700: "#303EC5",
+      800: "#2D35A0",
+      900: "#29317F"
+    },
+    lightblue: {
+      50: "#EEFAFF",
+      100: "#D9F4FF",
+      200: "#BBEDFF",
+      300: "#8DE3FF",
+      400: "#57D0FF",
+      500: "#30B6FF",
+      600: "#1999F7",
+      700: "#1280E3",
+      800: "#1566B8",
+      900: "#175791"
+    },
+    purple: {
+      50: "#FBF6FE",
+      100: "#F5EAFD",
+      200: "#EDD8FC",
+      300: "#E0BAF8",
+      400: "#CD8DF3",
+      500: "#B961EB",
+      600: "#A541DC",
+      700: "#9230C5",
+      800: "#782B9E",
+      900: "#62247F"
+    },
+    pink: {
+      50: "#FFF4FE",
+      100: "#FFE7FD",
+      200: "#FFCFFA",
+      300: "#FEA9F1",
+      400: "#FD75E7",
+      500: "#F553DA",
+      600: "#D821B6",
+      700: "#B31892",
+      800: "#921676",
+      900: "#781761"
+    },
+    neutral: {
+      50: "#FAFAFA",
+      100: "#F5F5F5",
+      200: "#E5E5E5",
+      300: "#D4D4D4",
+      400: "#A1A1A1",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717"
+    },
+    black: "#000000",
+    white: "#FFFFFF"
+  },
+  test: {
+    default: "#ffffff"
+  }
+};
+
+// src/util/getColor.ts
+var getColorClass = (namespace, palette, shade) => {
+  const namespaceMap = colors[namespace];
+  const paletteMap = namespaceMap[palette];
+  const hasShade = paletteMap && typeof paletteMap === "object" && shade !== void 0 && shade in paletteMap;
+  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
+};
+
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Badge/Badge.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Badge = (props) => {
+  const {
+    children,
+    count,
+    maxCount = 99,
+    dot = false,
+    colorNamespace = "xplat",
+    color = "red",
+    colorDepth,
+    className
+  } = props;
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  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", className), children: [
+    children,
+    showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: clsx_default("badge-indicator", colorClass, { dot }), children: !dot && displayCount })
+  ] });
+};
+Badge.displayName = "Badge";
+var Badge_default = Badge;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge
+});

package/dist/components/Badge/index.css

@@ -0,0 +1,307 @@
+/* src/components/Badge/badge.scss */
+.lib-xplat-badge {
+  position: relative;
+  display: inline-flex;
+}
+.lib-xplat-badge .badge-indicator {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10rem;
+  color: #FFFFFF;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+.lib-xplat-badge .badge-indicator.dot {
+  min-width: 8px;
+  height: 8px;
+  padding: 0;
+}
+.lib-xplat-badge .badge-indicator.xplat-red-50 {
+  background-color: #FFF0F0;
+}
+.lib-xplat-badge .badge-indicator.xplat-red-100 {
+  background-color: #FFDDDE;
+}
+.lib-xplat-badge .badge-indicator.xplat-red-200 {
+  background-color: #FFC1C2;
+}
+.lib-xplat-badge .badge-indicator.xplat-red-300 {
+  background-color: #FF9698;
+}
+.lib-xplat-badge .badge-indicator.xplat-red-400 {
+  background-color: #FF5A5D;
+}
+.lib-xplat-badge .badge-indicator.xplat-red-500 {
+  background-color: #FF272B;
+}
+.lib-xplat-badge .badge-indicator.xplat-red-600 {
+  background-color: #F80409;
+}
+.lib-xplat-badge .badge-indicator.xplat-red-700 {
+  background-color: #D40105;
+}
+.lib-xplat-badge .badge-indicator.xplat-red-800 {
+  background-color: #AE0609;
+}
+.lib-xplat-badge .badge-indicator.xplat-red-900 {
+  background-color: #900C0F;
+}
+.lib-xplat-badge .badge-indicator.xplat-green-50 {
+  background-color: #E5F6EA;
+}
+.lib-xplat-badge .badge-indicator.xplat-green-100 {
+  background-color: #C1E7CC;
+}
+.lib-xplat-badge .badge-indicator.xplat-green-200 {
+  background-color: #98D8AC;
+}
+.lib-xplat-badge .badge-indicator.xplat-green-300 {
+  background-color: #6CCA8B;
+}
+.lib-xplat-badge .badge-indicator.xplat-green-400 {
+  background-color: #47BE72;
+}
+.lib-xplat-badge .badge-indicator.xplat-green-500 {
+  background-color: #10B259;
+}
+.lib-xplat-badge .badge-indicator.xplat-green-600 {
+  background-color: #00A34F;
+}
+.lib-xplat-badge .badge-indicator.xplat-green-700 {
+  background-color: #009143;
+}
+.lib-xplat-badge .badge-indicator.xplat-green-800 {
+  background-color: #007F38;
+}
+.lib-xplat-badge .badge-indicator.xplat-green-900 {
+  background-color: #006024;
+}
+.lib-xplat-badge .badge-indicator.xplat-orange-50 {
+  background-color: #FFF8EC;
+}
+.lib-xplat-badge .badge-indicator.xplat-orange-100 {
+  background-color: #FFF0D3;
+}
+.lib-xplat-badge .badge-indicator.xplat-orange-200 {
+  background-color: #FFDDA5;
+}
+.lib-xplat-badge .badge-indicator.xplat-orange-300 {
+  background-color: #FFC46D;
+}
+.lib-xplat-badge .badge-indicator.xplat-orange-400 {
+  background-color: #FF9F32;
+}
+.lib-xplat-badge .badge-indicator.xplat-orange-500 {
+  background-color: #FF820A;
+}
+.lib-xplat-badge .badge-indicator.xplat-orange-600 {
+  background-color: #FF6900;
+}
+.lib-xplat-badge .badge-indicator.xplat-orange-700 {
+  background-color: #CC4B02;
+}
+.lib-xplat-badge .badge-indicator.xplat-orange-800 {
+  background-color: #A13A0B;
+}
+.lib-xplat-badge .badge-indicator.xplat-orange-900 {
+  background-color: #82320C;
+}
+.lib-xplat-badge .badge-indicator.xplat-yellow-50 {
+  background-color: #FFFDE7;
+}
+.lib-xplat-badge .badge-indicator.xplat-yellow-100 {
+  background-color: #FFFAC1;
+}
+.lib-xplat-badge .badge-indicator.xplat-yellow-200 {
+  background-color: #FFF186;
+}
+.lib-xplat-badge .badge-indicator.xplat-yellow-300 {
+  background-color: #FFE041;
+}
+.lib-xplat-badge .badge-indicator.xplat-yellow-400 {
+  background-color: #FFCC0D;
+}
+.lib-xplat-badge .badge-indicator.xplat-yellow-500 {
+  background-color: #F0B100;
+}
+.lib-xplat-badge .badge-indicator.xplat-yellow-600 {
+  background-color: #D18800;
+}
+.lib-xplat-badge .badge-indicator.xplat-yellow-700 {
+  background-color: #A66002;
+}
+.lib-xplat-badge .badge-indicator.xplat-yellow-800 {
+  background-color: #894B0A;
+}
+.lib-xplat-badge .badge-indicator.xplat-yellow-900 {
+  background-color: #743D0F;
+}
+.lib-xplat-badge .badge-indicator.xplat-blue-50 {
+  background-color: #F1F4FD;
+}
+.lib-xplat-badge .badge-indicator.xplat-blue-100 {
+  background-color: #DFE7FA;
+}
+.lib-xplat-badge .badge-indicator.xplat-blue-200 {
+  background-color: #C5D4F8;
+}
+.lib-xplat-badge .badge-indicator.xplat-blue-300 {
+  background-color: #9EB8F2;
+}
+.lib-xplat-badge .badge-indicator.xplat-blue-400 {
+  background-color: #7093EA;
+}
+.lib-xplat-badge .badge-indicator.xplat-blue-500 {
+  background-color: #4D6DE3;
+}
+.lib-xplat-badge .badge-indicator.xplat-blue-600 {
+  background-color: #3950D7;
+}
+.lib-xplat-badge .badge-indicator.xplat-blue-700 {
+  background-color: #303EC5;
+}
+.lib-xplat-badge .badge-indicator.xplat-blue-800 {
+  background-color: #2D35A0;
+}
+.lib-xplat-badge .badge-indicator.xplat-blue-900 {
+  background-color: #29317F;
+}
+.lib-xplat-badge .badge-indicator.xplat-lightblue-50 {
+  background-color: #EEFAFF;
+}
+.lib-xplat-badge .badge-indicator.xplat-lightblue-100 {
+  background-color: #D9F4FF;
+}
+.lib-xplat-badge .badge-indicator.xplat-lightblue-200 {
+  background-color: #BBEDFF;
+}
+.lib-xplat-badge .badge-indicator.xplat-lightblue-300 {
+  background-color: #8DE3FF;
+}
+.lib-xplat-badge .badge-indicator.xplat-lightblue-400 {
+  background-color: #57D0FF;
+}
+.lib-xplat-badge .badge-indicator.xplat-lightblue-500 {
+  background-color: #30B6FF;
+}
+.lib-xplat-badge .badge-indicator.xplat-lightblue-600 {
+  background-color: #1999F7;
+}
+.lib-xplat-badge .badge-indicator.xplat-lightblue-700 {
+  background-color: #1280E3;
+}
+.lib-xplat-badge .badge-indicator.xplat-lightblue-800 {
+  background-color: #1566B8;
+}
+.lib-xplat-badge .badge-indicator.xplat-lightblue-900 {
+  background-color: #175791;
+}
+.lib-xplat-badge .badge-indicator.xplat-purple-50 {
+  background-color: #FBF6FE;
+}
+.lib-xplat-badge .badge-indicator.xplat-purple-100 {
+  background-color: #F5EAFD;
+}
+.lib-xplat-badge .badge-indicator.xplat-purple-200 {
+  background-color: #EDD8FC;
+}
+.lib-xplat-badge .badge-indicator.xplat-purple-300 {
+  background-color: #E0BAF8;
+}
+.lib-xplat-badge .badge-indicator.xplat-purple-400 {
+  background-color: #CD8DF3;
+}
+.lib-xplat-badge .badge-indicator.xplat-purple-500 {
+  background-color: #B961EB;
+}
+.lib-xplat-badge .badge-indicator.xplat-purple-600 {
+  background-color: #A541DC;
+}
+.lib-xplat-badge .badge-indicator.xplat-purple-700 {
+  background-color: #9230C5;
+}
+.lib-xplat-badge .badge-indicator.xplat-purple-800 {
+  background-color: #782B9E;
+}
+.lib-xplat-badge .badge-indicator.xplat-purple-900 {
+  background-color: #62247F;
+}
+.lib-xplat-badge .badge-indicator.xplat-pink-50 {
+  background-color: #FFF4FE;
+}
+.lib-xplat-badge .badge-indicator.xplat-pink-100 {
+  background-color: #FFE7FD;
+}
+.lib-xplat-badge .badge-indicator.xplat-pink-200 {
+  background-color: #FFCFFA;
+}
+.lib-xplat-badge .badge-indicator.xplat-pink-300 {
+  background-color: #FEA9F1;
+}
+.lib-xplat-badge .badge-indicator.xplat-pink-400 {
+  background-color: #FD75E7;
+}
+.lib-xplat-badge .badge-indicator.xplat-pink-500 {
+  background-color: #F553DA;
+}
+.lib-xplat-badge .badge-indicator.xplat-pink-600 {
+  background-color: #D821B6;
+}
+.lib-xplat-badge .badge-indicator.xplat-pink-700 {
+  background-color: #B31892;
+}
+.lib-xplat-badge .badge-indicator.xplat-pink-800 {
+  background-color: #921676;
+}
+.lib-xplat-badge .badge-indicator.xplat-pink-900 {
+  background-color: #781761;
+}
+.lib-xplat-badge .badge-indicator.xplat-neutral-50 {
+  background-color: #FAFAFA;
+}
+.lib-xplat-badge .badge-indicator.xplat-neutral-100 {
+  background-color: #F5F5F5;
+}
+.lib-xplat-badge .badge-indicator.xplat-neutral-200 {
+  background-color: #E5E5E5;
+}
+.lib-xplat-badge .badge-indicator.xplat-neutral-300 {
+  background-color: #D4D4D4;
+}
+.lib-xplat-badge .badge-indicator.xplat-neutral-400 {
+  background-color: #A1A1A1;
+}
+.lib-xplat-badge .badge-indicator.xplat-neutral-500 {
+  background-color: #737373;
+}
+.lib-xplat-badge .badge-indicator.xplat-neutral-600 {
+  background-color: #525252;
+}
+.lib-xplat-badge .badge-indicator.xplat-neutral-700 {
+  background-color: #404040;
+}
+.lib-xplat-badge .badge-indicator.xplat-neutral-800 {
+  background-color: #262626;
+}
+.lib-xplat-badge .badge-indicator.xplat-neutral-900 {
+  background-color: #171717;
+}
+.lib-xplat-badge .badge-indicator.xplat-black {
+  background-color: #000000;
+}
+.lib-xplat-badge .badge-indicator.xplat-white {
+  background-color: #FFFFFF;
+}
+.lib-xplat-badge .badge-indicator.test-default {
+  background-color: #ffffff;
+}