@x-plat/design-system 0.1.1

package/dist/components/PopOver/index.cjs

@@ -0,0 +1,176 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PopOver/index.ts
+var PopOver_exports = {};
+__export(PopOver_exports, {
+  PopOver: () => PopOver_default
+});
+module.exports = __toCommonJS(PopOver_exports);
+
+// src/components/PopOver/PopOver.tsx
+var import_react3 = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useAutoPosition.ts
+var import_react = __toESM(require("react"), 1);
+var useAutoPosition = (triggerRef, popRef, enabled = true) => {
+  const [position, setPosition] = import_react.default.useState({
+    position: {},
+    direction: "bottom"
+  });
+  const calculatePosition = import_react.default.useCallback(() => {
+    if (!triggerRef.current || !popRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popRect = popRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const position2 = {};
+    let direction = "bottom";
+    if (triggerRect.bottom + popRect.height > viewportHeight) {
+      direction = "top";
+    }
+    if (triggerRect.left + popRect.width > viewportWidth) {
+      position2["right"] = 10;
+    }
+    if (triggerRect.left < 0) {
+      position2["left"] = 10;
+    }
+    setPosition({
+      position: position2,
+      direction
+    });
+  }, [triggerRef, popRef]);
+  import_react.default.useEffect(() => {
+    calculatePosition();
+    window.addEventListener("resize", calculatePosition);
+    return () => window.removeEventListener("resize", calculatePosition);
+  }, [calculatePosition, enabled]);
+  return position;
+};
+var useAutoPosition_default = useAutoPosition;
+
+// src/tokens/hooks/useClickOutside.ts
+var import_react2 = __toESM(require("react"), 1);
+var useClickOutside = (refs, handler, enabled = true) => {
+  import_react2.default.useEffect(() => {
+    if (!enabled) return;
+    const refArray = Array.isArray(refs) ? refs : [refs];
+    const listener = (event) => {
+      const target = event.target;
+      const isInside = refArray.some(
+        (ref) => ref.current && ref.current.contains(target)
+      );
+      if (!isInside) {
+        handler();
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, handler, enabled]);
+};
+var useClickOutside_default = useClickOutside;
+
+// 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/PopOver/PopOver.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var PopOver = (props) => {
+  const { children, isOpen, onClose, PopOverEl } = props;
+  const popRef = import_react3.default.useRef(null);
+  const triggerRef = import_react3.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react3.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react3.default.useState(false);
+  useClickOutside_default([popRef, triggerRef], onClose, isOpen);
+  const position = useAutoPosition_default(triggerRef, popRef, localOpen);
+  import_react3.default.useEffect(() => {
+    if (isOpen) {
+      setLocalOpen(isOpen);
+      setTimeout(() => {
+        setEventTrigger(true);
+      }, 1);
+    } else {
+      setEventTrigger(false);
+      setTimeout(() => {
+        setLocalOpen(isOpen);
+      }, 200);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "lib-xplat-pop-over",
+      ref: triggerRef,
+      onClick: () => {
+        if (isOpen) onClose();
+      },
+      children: [
+        children,
+        localOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: clsx_default(
+              "content-wrap",
+              position.direction,
+              eventTrigger && "visible"
+            ),
+            ref: popRef,
+            style: {
+              ...position.position
+            },
+            children: PopOverEl
+          }
+        )
+      ]
+    }
+  );
+};
+PopOver.displayName = "PopOver";
+var PopOver_default = PopOver;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PopOver
+});

package/dist/components/PopOver/index.css

@@ -0,0 +1,27 @@
+/* src/components/PopOver/popOver.scss */
+.lib-xplat-pop-over {
+  position: relative;
+  z-index: 10;
+  cursor: pointer;
+  user-select: none;
+}
+.lib-xplat-pop-over > .content-wrap {
+  position: absolute;
+  cursor: default;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  z-index: 10;
+  opacity: 0;
+  transform: scale(0.8);
+}
+.lib-xplat-pop-over > .content-wrap.top {
+  transform-origin: bottom;
+  margin-bottom: 0.5rem;
+}
+.lib-xplat-pop-over > .content-wrap.bottom {
+  transform-origin: top;
+  margin-top: 0.5rem;
+}
+.lib-xplat-pop-over > .content-wrap.visible {
+  opacity: 1;
+  transform: scale(1);
+}

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

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface PopOverProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    PopOverEl: React.ReactNode;
+}
+declare const PopOver: {
+    (props: PopOverProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { PopOver };

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

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface PopOverProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    PopOverEl: React.ReactNode;
+}
+declare const PopOver: {
+    (props: PopOverProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { PopOver };

package/dist/components/PopOver/index.js

@@ -0,0 +1,139 @@
+// src/components/PopOver/PopOver.tsx
+import React3 from "react";
+
+// src/tokens/hooks/useAutoPosition.ts
+import React from "react";
+var useAutoPosition = (triggerRef, popRef, enabled = true) => {
+  const [position, setPosition] = React.useState({
+    position: {},
+    direction: "bottom"
+  });
+  const calculatePosition = React.useCallback(() => {
+    if (!triggerRef.current || !popRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popRect = popRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const position2 = {};
+    let direction = "bottom";
+    if (triggerRect.bottom + popRect.height > viewportHeight) {
+      direction = "top";
+    }
+    if (triggerRect.left + popRect.width > viewportWidth) {
+      position2["right"] = 10;
+    }
+    if (triggerRect.left < 0) {
+      position2["left"] = 10;
+    }
+    setPosition({
+      position: position2,
+      direction
+    });
+  }, [triggerRef, popRef]);
+  React.useEffect(() => {
+    calculatePosition();
+    window.addEventListener("resize", calculatePosition);
+    return () => window.removeEventListener("resize", calculatePosition);
+  }, [calculatePosition, enabled]);
+  return position;
+};
+var useAutoPosition_default = useAutoPosition;
+
+// src/tokens/hooks/useClickOutside.ts
+import React2 from "react";
+var useClickOutside = (refs, handler, enabled = true) => {
+  React2.useEffect(() => {
+    if (!enabled) return;
+    const refArray = Array.isArray(refs) ? refs : [refs];
+    const listener = (event) => {
+      const target = event.target;
+      const isInside = refArray.some(
+        (ref) => ref.current && ref.current.contains(target)
+      );
+      if (!isInside) {
+        handler();
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, handler, enabled]);
+};
+var useClickOutside_default = useClickOutside;
+
+// 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/PopOver/PopOver.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var PopOver = (props) => {
+  const { children, isOpen, onClose, PopOverEl } = props;
+  const popRef = React3.useRef(null);
+  const triggerRef = React3.useRef(null);
+  const [localOpen, setLocalOpen] = React3.useState(false);
+  const [eventTrigger, setEventTrigger] = React3.useState(false);
+  useClickOutside_default([popRef, triggerRef], onClose, isOpen);
+  const position = useAutoPosition_default(triggerRef, popRef, localOpen);
+  React3.useEffect(() => {
+    if (isOpen) {
+      setLocalOpen(isOpen);
+      setTimeout(() => {
+        setEventTrigger(true);
+      }, 1);
+    } else {
+      setEventTrigger(false);
+      setTimeout(() => {
+        setLocalOpen(isOpen);
+      }, 200);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "lib-xplat-pop-over",
+      ref: triggerRef,
+      onClick: () => {
+        if (isOpen) onClose();
+      },
+      children: [
+        children,
+        localOpen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx_default(
+              "content-wrap",
+              position.direction,
+              eventTrigger && "visible"
+            ),
+            ref: popRef,
+            style: {
+              ...position.position
+            },
+            children: PopOverEl
+          }
+        )
+      ]
+    }
+  );
+};
+PopOver.displayName = "PopOver";
+var PopOver_default = PopOver;
+export {
+  PopOver_default as PopOver
+};

package/dist/components/Radio/index.cjs

@@ -0,0 +1,257 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Radio/index.ts
+var Radio_exports = {};
+__export(Radio_exports, {
+  Radio: () => Radio_default,
+  RadioGroup: () => RadioGroup_default
+});
+module.exports = __toCommonJS(Radio_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/Radio/RadioGroupContext.tsx
+var import_react = __toESM(require("react"), 1);
+var RadioGroupContext = import_react.default.createContext(
+  null
+);
+var useRadioGroupContext = () => {
+  return import_react.default.useContext(RadioGroupContext);
+};
+var RadioGroupContext_default = RadioGroupContext;
+
+// src/components/Radio/Radio.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Radio = (props) => {
+  const {
+    label,
+    value,
+    className,
+    colorNamespace = "xplat",
+    color = "blue",
+    colorDepth,
+    ...rest
+  } = props;
+  const context = useRadioGroupContext();
+  const isGroup = !!context;
+  const localChecked = isGroup ? context.value === value : rest.checked ?? false;
+  const inputProps = context ? { name: context.name, value, onChange: context.onChange } : {
+    name: rest.name,
+    value,
+    onChange: rest.onChange
+  };
+  const colorClass = getColorClass(
+    colorNamespace,
+    color,
+    colorDepth ?? 500
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "label",
+    {
+      className: clsx_default(
+        "lib-xplat-radio",
+        localChecked ? "checked" : void 0,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: clsx_default(
+              "circle",
+              localChecked ? "checked" : void 0,
+              colorClass
+            ),
+            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "inner-circle" })
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label })
+      ]
+    }
+  );
+};
+Radio.displayName = "Radio";
+var Radio_default = Radio;
+
+// src/components/Radio/RadioGroup.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var RadioGroup = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
+};
+RadioGroup.displayName = "RadioGroup";
+var RadioGroup_default = RadioGroup;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Radio,
+  RadioGroup
+});