@x-plat/design-system 0.1.1 → 0.1.3

package/dist/components/Badge/index.js

@@ -0,0 +1,173 @@
+// 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
+import { jsx, jsxs } from "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__ */ jsxs("div", { className: clsx_default("lib-xplat-badge", className), children: [
+    children,
+    showBadge && /* @__PURE__ */ jsx("span", { className: clsx_default("badge-indicator", colorClass, { dot }), children: !dot && displayCount })
+  ] });
+};
+Badge.displayName = "Badge";
+var Badge_default = Badge;
+export {
+  Badge_default as Badge
+};

package/dist/components/Breadcrumb/index.cjs

@@ -0,0 +1,60 @@
+"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/Breadcrumb/index.ts
+var Breadcrumb_exports = {};
+__export(Breadcrumb_exports, {
+  Breadcrumb: () => Breadcrumb_default
+});
+module.exports = __toCommonJS(Breadcrumb_exports);
+
+// 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/Breadcrumb/Breadcrumb.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Breadcrumb = (props) => {
+  const { items, separator = "/", className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: clsx_default("lib-xplat-breadcrumb", className), "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+      isLast ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: item.href, className: "link", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "link", onClick: item.onClick, children: item.label }),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "separator", children: separator })
+    ] }, index);
+  }) }) });
+};
+Breadcrumb.displayName = "Breadcrumb";
+var Breadcrumb_default = Breadcrumb;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breadcrumb
+});

package/dist/components/Breadcrumb/index.css

@@ -0,0 +1,37 @@
+/* src/components/Breadcrumb/breadcrumb.scss */
+.lib-xplat-breadcrumb ol {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.lib-xplat-breadcrumb li {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+}
+.lib-xplat-breadcrumb .link {
+  color: #737373;
+  text-decoration: none;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.lib-xplat-breadcrumb .link:hover {
+  color: #262626;
+}
+.lib-xplat-breadcrumb .current {
+  color: #171717;
+  font-weight: 500;
+}
+.lib-xplat-breadcrumb .separator {
+  color: #A1A1A1;
+  user-select: none;
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+    className?: string;
+}
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+
+export { Breadcrumb };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+    className?: string;
+}
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+
+export { Breadcrumb };

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,33 @@
+// 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/Breadcrumb/Breadcrumb.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Breadcrumb = (props) => {
+  const { items, separator = "/", className } = props;
+  return /* @__PURE__ */ jsx("nav", { className: clsx_default("lib-xplat-breadcrumb", className), "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ jsx("ol", { children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs("li", { children: [
+      isLast ? /* @__PURE__ */ jsx("span", { className: "current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx("a", { href: item.href, className: "link", children: item.label }) : /* @__PURE__ */ jsx("button", { className: "link", onClick: item.onClick, children: item.label }),
+      !isLast && /* @__PURE__ */ jsx("span", { className: "separator", children: separator })
+    ] }, index);
+  }) }) });
+};
+Breadcrumb.displayName = "Breadcrumb";
+var Breadcrumb_default = Breadcrumb;
+export {
+  Breadcrumb_default as Breadcrumb
+};

package/dist/components/Chart/index.cjs

@@ -303,8 +303,11 @@ import_chart.Chart.register(
 );
 var Chart = (props) => {
   const { type, data, labels } = props;
-  const chartRef = import_react.default.useRef(null);
+  const chartInstanceRef = import_react.default.useRef(null);
   const containerRef = import_react.default.useRef(null);
+  const chartRef = import_react.default.useCallback((instance) => {
+    chartInstanceRef.current = instance ?? null;
+  }, []);
   const datasets = import_react.default.useMemo(() => {
     const pallette = getChartColorPreset(type);
     return Object.entries(data).map(([key, values], index) => {
@@ -374,10 +377,10 @@ var Chart = (props) => {
     }
   }, [chartData, options, type]);
   import_react.default.useEffect(() => {
-    if (!containerRef.current || !chartRef.current) return;
+    if (!containerRef.current || !chartInstanceRef.current) return;
     const observer = new ResizeObserver(() => {
       requestAnimationFrame(() => {
-        chartRef.current?.resize();
+        chartInstanceRef.current?.resize();
       });
     });
     observer.observe(containerRef.current);

package/dist/components/Chart/index.js

@@ -278,8 +278,11 @@ ChartJS.register(
 );
 var Chart = (props) => {
   const { type, data, labels } = props;
-  const chartRef = React.useRef(null);
+  const chartInstanceRef = React.useRef(null);
   const containerRef = React.useRef(null);
+  const chartRef = React.useCallback((instance) => {
+    chartInstanceRef.current = instance ?? null;
+  }, []);
   const datasets = React.useMemo(() => {
     const pallette = getChartColorPreset(type);
     return Object.entries(data).map(([key, values], index) => {
@@ -349,10 +352,10 @@ var Chart = (props) => {
     }
   }, [chartData, options, type]);
   React.useEffect(() => {
-    if (!containerRef.current || !chartRef.current) return;
+    if (!containerRef.current || !chartInstanceRef.current) return;
     const observer = new ResizeObserver(() => {
       requestAnimationFrame(() => {
-        chartRef.current?.resize();
+        chartInstanceRef.current?.resize();
       });
     });
     observer.observe(containerRef.current);

package/dist/components/DatePicker/index.cjs

@@ -1529,6 +1529,8 @@ var Modal = (props) => {
           "div",
           {
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            role: "dialog",
+            "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children
           }

package/dist/components/DatePicker/index.js

@@ -1490,6 +1490,8 @@ var Modal = (props) => {
           "div",
           {
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            role: "dialog",
+            "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children
           }

package/dist/components/Divider/index.cjs

@@ -0,0 +1,61 @@
+"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/Divider/index.ts
+var Divider_exports = {};
+__export(Divider_exports, {
+  Divider: () => Divider_default
+});
+module.exports = __toCommonJS(Divider_exports);
+
+// 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/Divider/Divider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Divider = (props) => {
+  const { orientation = "horizontal", className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-divider", orientation, className),
+      role: "separator",
+      "aria-orientation": orientation
+    }
+  );
+};
+Divider.displayName = "Divider";
+var Divider_default = Divider;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Divider
+});

package/dist/components/Divider/index.css

@@ -0,0 +1,15 @@
+/* src/components/Divider/divider.scss */
+.lib-xplat-divider {
+  border: none;
+  flex-shrink: 0;
+}
+.lib-xplat-divider.horizontal {
+  width: 100%;
+  height: 1px;
+  background-color: #E5E5E5;
+}
+.lib-xplat-divider.vertical {
+  width: 1px;
+  align-self: stretch;
+  background-color: #E5E5E5;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+type DividerOrientation = "horizontal" | "vertical";
+interface DividerProps {
+    orientation?: DividerOrientation;
+    className?: string;
+}
+declare const Divider: React.FC<DividerProps>;
+
+export { Divider };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+type DividerOrientation = "horizontal" | "vertical";
+interface DividerProps {
+    orientation?: DividerOrientation;
+    className?: string;
+}
+declare const Divider: React.FC<DividerProps>;
+
+export { Divider };

package/dist/components/Divider/index.js

@@ -0,0 +1,34 @@
+// 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/Divider/Divider.tsx
+import { jsx } from "react/jsx-runtime";
+var Divider = (props) => {
+  const { orientation = "horizontal", className } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx_default("lib-xplat-divider", orientation, className),
+      role: "separator",
+      "aria-orientation": orientation
+    }
+  );
+};
+Divider.displayName = "Divider";
+var Divider_default = Divider;
+export {
+  Divider_default as Divider
+};

package/dist/components/ImageSelector/index.cjs

@@ -1017,9 +1017,15 @@ var import_jsx_runtime294 = require("react/jsx-runtime");
 var import_jsx_runtime295 = require("react/jsx-runtime");
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const previewUrl = import_react.default.useMemo(() => {
-    if (value) return URL.createObjectURL(value);
-    return void 0;
+  const [previewUrl, setPreviewUrl] = import_react.default.useState();
+  import_react.default.useEffect(() => {
+    if (!value) {
+      setPreviewUrl(void 0);
+      return;
+    }
+    const url = URL.createObjectURL(value);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
   }, [value]);
   const inputRef = import_react.default.useRef(null);
   const handleFileChange = (e) => {

package/dist/components/ImageSelector/index.js

@@ -981,9 +981,15 @@ import { jsx as jsx294 } from "react/jsx-runtime";
 import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
   const { value, label, onChange } = props;
-  const previewUrl = React.useMemo(() => {
-    if (value) return URL.createObjectURL(value);
-    return void 0;
+  const [previewUrl, setPreviewUrl] = React.useState();
+  React.useEffect(() => {
+    if (!value) {
+      setPreviewUrl(void 0);
+      return;
+    }
+    const url = URL.createObjectURL(value);
+    setPreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
   }, [value]);
   const inputRef = React.useRef(null);
   const handleFileChange = (e) => {

package/dist/components/Modal/index.cjs

@@ -84,6 +84,8 @@ var Modal = (props) => {
           "div",
           {
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            role: "dialog",
+            "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children
           }

package/dist/components/Modal/index.js

@@ -48,6 +48,8 @@ var Modal = (props) => {
           "div",
           {
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
+            role: "dialog",
+            "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
             children
           }