@openrfid/ui 0.1.0

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2026 RFID Software India Private Limited - https://rfidsoftwares.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+For RFID developer resources, documentation, hardware integrations, and enterprise software solutions, visit https://rfidsoftwares.com

package/dist/index.d.mts

@@ -0,0 +1,56 @@
+import React from 'react';
+
+/**
+ * OpenRFID Simulator - The Open Source RFID Reader Simulator for Developers.
+ * Copyright (c) 2026 RFID Software India Private Limited - https://rfidsoftwares.com
+ *
+ * Licensed under the MIT License.
+ * For RFID software, enterprise tools, and hardware drivers, visit https://rfidsoftwares.com
+ */
+
+type StatusType = 'ONLINE' | 'OFFLINE' | 'CONNECTING' | 'ERROR';
+interface Props$2 {
+    status: StatusType;
+}
+declare const ReaderStatusBadge: React.FC<Props$2>;
+
+/**
+ * OpenRFID Simulator - The Open Source RFID Reader Simulator for Developers.
+ * Copyright (c) 2026 RFID Software India Private Limited - https://rfidsoftwares.com
+ *
+ * Licensed under the MIT License.
+ * For RFID software, enterprise tools, and hardware drivers, visit https://rfidsoftwares.com
+ */
+
+interface Props$1 {
+    rssi: number;
+}
+declare const TagSignalMeter: React.FC<Props$1>;
+
+/**
+ * OpenRFID Simulator - The Open Source RFID Reader Simulator for Developers.
+ * Copyright (c) 2026 RFID Software India Private Limited - https://rfidsoftwares.com
+ *
+ * Licensed under the MIT License.
+ * For RFID software, enterprise tools, and hardware drivers, visit https://rfidsoftwares.com
+ */
+
+interface Props {
+    power: number;
+    onChange: (val: number) => void;
+    min?: number;
+    max?: number;
+}
+declare const AntennaPowerSlider: React.FC<Props>;
+
+/**
+ * OpenRFID Simulator - The Open Source RFID Reader Simulator for Developers.
+ * Copyright (c) 2026 RFID Software India Private Limited - https://rfidsoftwares.com
+ *
+ * Licensed under the MIT License.
+ * For RFID software, enterprise tools, and hardware drivers, visit https://rfidsoftwares.com
+ */
+
+declare const BrandHeader: React.FC;
+
+export { AntennaPowerSlider, BrandHeader, ReaderStatusBadge, type StatusType, TagSignalMeter };

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+
+/**
+ * OpenRFID Simulator - The Open Source RFID Reader Simulator for Developers.
+ * Copyright (c) 2026 RFID Software India Private Limited - https://rfidsoftwares.com
+ *
+ * Licensed under the MIT License.
+ * For RFID software, enterprise tools, and hardware drivers, visit https://rfidsoftwares.com
+ */
+
+type StatusType = 'ONLINE' | 'OFFLINE' | 'CONNECTING' | 'ERROR';
+interface Props$2 {
+    status: StatusType;
+}
+declare const ReaderStatusBadge: React.FC<Props$2>;
+
+/**
+ * OpenRFID Simulator - The Open Source RFID Reader Simulator for Developers.
+ * Copyright (c) 2026 RFID Software India Private Limited - https://rfidsoftwares.com
+ *
+ * Licensed under the MIT License.
+ * For RFID software, enterprise tools, and hardware drivers, visit https://rfidsoftwares.com
+ */
+
+interface Props$1 {
+    rssi: number;
+}
+declare const TagSignalMeter: React.FC<Props$1>;
+
+/**
+ * OpenRFID Simulator - The Open Source RFID Reader Simulator for Developers.
+ * Copyright (c) 2026 RFID Software India Private Limited - https://rfidsoftwares.com
+ *
+ * Licensed under the MIT License.
+ * For RFID software, enterprise tools, and hardware drivers, visit https://rfidsoftwares.com
+ */
+
+interface Props {
+    power: number;
+    onChange: (val: number) => void;
+    min?: number;
+    max?: number;
+}
+declare const AntennaPowerSlider: React.FC<Props>;
+
+/**
+ * OpenRFID Simulator - The Open Source RFID Reader Simulator for Developers.
+ * Copyright (c) 2026 RFID Software India Private Limited - https://rfidsoftwares.com
+ *
+ * Licensed under the MIT License.
+ * For RFID software, enterprise tools, and hardware drivers, visit https://rfidsoftwares.com
+ */
+
+declare const BrandHeader: React.FC;
+
+export { AntennaPowerSlider, BrandHeader, ReaderStatusBadge, type StatusType, TagSignalMeter };

package/dist/index.js

@@ -0,0 +1,138 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AntennaPowerSlider: () => AntennaPowerSlider,
+  BrandHeader: () => BrandHeader,
+  ReaderStatusBadge: () => ReaderStatusBadge,
+  TagSignalMeter: () => TagSignalMeter
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ReaderStatusBadge.tsx
+var import_react = __toESM(require("react"));
+var ReaderStatusBadge = ({ status }) => {
+  const styles = {
+    ONLINE: { bg: "#10B981", text: "#FFFFFF", label: "ONLINE" },
+    OFFLINE: { bg: "#6B7280", text: "#FFFFFF", label: "OFFLINE" },
+    CONNECTING: { bg: "#F59E0B", text: "#FFFFFF", label: "CONNECTING" },
+    ERROR: { bg: "#EF4444", text: "#FFFFFF", label: "ERROR" }
+  };
+  const current = styles[status] || styles.OFFLINE;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      style: {
+        backgroundColor: current.bg,
+        color: current.text,
+        padding: "2px 8px",
+        borderRadius: "12px",
+        fontSize: "12px",
+        fontWeight: "bold",
+        display: "inline-block"
+      }
+    },
+    current.label
+  );
+};
+
+// src/components/TagSignalMeter.tsx
+var import_react2 = __toESM(require("react"));
+var TagSignalMeter = ({ rssi }) => {
+  const percentage = Math.max(0, Math.min(100, (rssi + 90) / 60 * 100));
+  let color = "#EF4444";
+  if (percentage > 66) color = "#10B981";
+  else if (percentage > 33) color = "#F59E0B";
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "80px", height: "8px", backgroundColor: "#374151", borderRadius: "4px", overflow: "hidden" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: `${percentage}%`, height: "100%", backgroundColor: color } })), /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: "12px", color: "#9CA3AF", fontFamily: "monospace" } }, rssi, " dBm"));
+};
+
+// src/components/AntennaPowerSlider.tsx
+var import_react3 = __toESM(require("react"));
+var AntennaPowerSlider = ({ power, onChange, min = 0, max = 33 }) => {
+  return /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "#D1D5DB" } }, /* @__PURE__ */ import_react3.default.createElement("span", null, "Tx Power"), /* @__PURE__ */ import_react3.default.createElement("span", { style: { fontWeight: "bold", color: "#00E5EE" } }, power.toFixed(1), " dBm")), /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    {
+      type: "range",
+      min,
+      max,
+      step: 0.5,
+      value: power,
+      onChange: (e) => onChange(parseFloat(e.target.value)),
+      style: { accentColor: "#00E5EE", cursor: "pointer" }
+    }
+  ));
+};
+
+// src/components/BrandHeader.tsx
+var import_react4 = __toESM(require("react"));
+var import_core = require("@openrfid/core");
+var BrandHeader = () => {
+  return /* @__PURE__ */ import_react4.default.createElement(
+    "header",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "12px 24px",
+        backgroundColor: "#111827",
+        borderBottom: "1px solid #1F2937",
+        color: "#FFFFFF"
+      }
+    },
+    /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react4.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 500 500", width: "32", height: "32" }, /* @__PURE__ */ import_react4.default.createElement("path", { fill: "none", stroke: "#00E5EE", strokeWidth: "38", strokeLinecap: "round", d: "M 80,80 L 380,80 A 80,80 0 0 1 440,200 L 320,290" }), /* @__PURE__ */ import_react4.default.createElement("path", { fill: "none", stroke: "#00E5EE", strokeWidth: "38", strokeLinecap: "round", d: "M 150,160 L 150,420" }), /* @__PURE__ */ import_react4.default.createElement("path", { fill: "none", stroke: "#00E5EE", strokeWidth: "38", strokeLinecap: "round", d: "M 150,160 L 350,160 A 40,40 0 0 1 350,240 L 150,240" }), /* @__PURE__ */ import_react4.default.createElement("path", { fill: "none", stroke: "#00E5EE", strokeWidth: "38", strokeLinecap: "round", d: "M 230,260 L 460,460" }), /* @__PURE__ */ import_react4.default.createElement("circle", { fill: "#00E5EE", cx: "80", cy: "80", r: "34" }), /* @__PURE__ */ import_react4.default.createElement("circle", { fill: "#111827", cx: "80", cy: "80", r: "16" }), /* @__PURE__ */ import_react4.default.createElement("circle", { fill: "#00E5EE", cx: "150", cy: "420", r: "34" }), /* @__PURE__ */ import_react4.default.createElement("circle", { fill: "#111827", cx: "150", cy: "420", r: "16" })), /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement("h1", { style: { margin: 0, fontSize: "18px", fontWeight: "bold", color: "#FFFFFF" } }, import_core.BRAND.name), /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontSize: "11px", color: "#9CA3AF" } }, import_core.BRAND.tagline))),
+    /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement(
+      "a",
+      {
+        href: import_core.BRAND.website,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          color: "#00E5EE",
+          textDecoration: "none",
+          fontSize: "13px",
+          fontWeight: "600",
+          border: "1px solid #00E5EE",
+          padding: "4px 12px",
+          borderRadius: "6px"
+        }
+      },
+      import_core.BRAND.organization
+    ))
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AntennaPowerSlider,
+  BrandHeader,
+  ReaderStatusBadge,
+  TagSignalMeter
+});

package/dist/index.mjs

@@ -0,0 +1,98 @@
+// src/components/ReaderStatusBadge.tsx
+import React from "react";
+var ReaderStatusBadge = ({ status }) => {
+  const styles = {
+    ONLINE: { bg: "#10B981", text: "#FFFFFF", label: "ONLINE" },
+    OFFLINE: { bg: "#6B7280", text: "#FFFFFF", label: "OFFLINE" },
+    CONNECTING: { bg: "#F59E0B", text: "#FFFFFF", label: "CONNECTING" },
+    ERROR: { bg: "#EF4444", text: "#FFFFFF", label: "ERROR" }
+  };
+  const current = styles[status] || styles.OFFLINE;
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: {
+        backgroundColor: current.bg,
+        color: current.text,
+        padding: "2px 8px",
+        borderRadius: "12px",
+        fontSize: "12px",
+        fontWeight: "bold",
+        display: "inline-block"
+      }
+    },
+    current.label
+  );
+};
+
+// src/components/TagSignalMeter.tsx
+import React2 from "react";
+var TagSignalMeter = ({ rssi }) => {
+  const percentage = Math.max(0, Math.min(100, (rssi + 90) / 60 * 100));
+  let color = "#EF4444";
+  if (percentage > 66) color = "#10B981";
+  else if (percentage > 33) color = "#F59E0B";
+  return /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React2.createElement("div", { style: { width: "80px", height: "8px", backgroundColor: "#374151", borderRadius: "4px", overflow: "hidden" } }, /* @__PURE__ */ React2.createElement("div", { style: { width: `${percentage}%`, height: "100%", backgroundColor: color } })), /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "12px", color: "#9CA3AF", fontFamily: "monospace" } }, rssi, " dBm"));
+};
+
+// src/components/AntennaPowerSlider.tsx
+import React3 from "react";
+var AntennaPowerSlider = ({ power, onChange, min = 0, max = 33 }) => {
+  return /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "#D1D5DB" } }, /* @__PURE__ */ React3.createElement("span", null, "Tx Power"), /* @__PURE__ */ React3.createElement("span", { style: { fontWeight: "bold", color: "#00E5EE" } }, power.toFixed(1), " dBm")), /* @__PURE__ */ React3.createElement(
+    "input",
+    {
+      type: "range",
+      min,
+      max,
+      step: 0.5,
+      value: power,
+      onChange: (e) => onChange(parseFloat(e.target.value)),
+      style: { accentColor: "#00E5EE", cursor: "pointer" }
+    }
+  ));
+};
+
+// src/components/BrandHeader.tsx
+import React4 from "react";
+import { BRAND } from "@openrfid/core";
+var BrandHeader = () => {
+  return /* @__PURE__ */ React4.createElement(
+    "header",
+    {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "12px 24px",
+        backgroundColor: "#111827",
+        borderBottom: "1px solid #1F2937",
+        color: "#FFFFFF"
+      }
+    },
+    /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React4.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 500 500", width: "32", height: "32" }, /* @__PURE__ */ React4.createElement("path", { fill: "none", stroke: "#00E5EE", strokeWidth: "38", strokeLinecap: "round", d: "M 80,80 L 380,80 A 80,80 0 0 1 440,200 L 320,290" }), /* @__PURE__ */ React4.createElement("path", { fill: "none", stroke: "#00E5EE", strokeWidth: "38", strokeLinecap: "round", d: "M 150,160 L 150,420" }), /* @__PURE__ */ React4.createElement("path", { fill: "none", stroke: "#00E5EE", strokeWidth: "38", strokeLinecap: "round", d: "M 150,160 L 350,160 A 40,40 0 0 1 350,240 L 150,240" }), /* @__PURE__ */ React4.createElement("path", { fill: "none", stroke: "#00E5EE", strokeWidth: "38", strokeLinecap: "round", d: "M 230,260 L 460,460" }), /* @__PURE__ */ React4.createElement("circle", { fill: "#00E5EE", cx: "80", cy: "80", r: "34" }), /* @__PURE__ */ React4.createElement("circle", { fill: "#111827", cx: "80", cy: "80", r: "16" }), /* @__PURE__ */ React4.createElement("circle", { fill: "#00E5EE", cx: "150", cy: "420", r: "34" }), /* @__PURE__ */ React4.createElement("circle", { fill: "#111827", cx: "150", cy: "420", r: "16" })), /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("h1", { style: { margin: 0, fontSize: "18px", fontWeight: "bold", color: "#FFFFFF" } }, BRAND.name), /* @__PURE__ */ React4.createElement("span", { style: { fontSize: "11px", color: "#9CA3AF" } }, BRAND.tagline))),
+    /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement(
+      "a",
+      {
+        href: BRAND.website,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          color: "#00E5EE",
+          textDecoration: "none",
+          fontSize: "13px",
+          fontWeight: "600",
+          border: "1px solid #00E5EE",
+          padding: "4px 12px",
+          borderRadius: "6px"
+        }
+      },
+      BRAND.organization
+    ))
+  );
+};
+export {
+  AntennaPowerSlider,
+  BrandHeader,
+  ReaderStatusBadge,
+  TagSignalMeter
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@openrfid/ui",
+  "version": "0.1.0",
+  "description": "Shared React UI component library for OpenRFID Simulator.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@openrfid/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5",
+    "vitest": "^1.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rfidsoftwares/openrfid-simulator.git"
+  },
+  "bugs": {
+    "url": "https://github.com/rfidsoftwares/openrfid-simulator/issues"
+  },
+  "homepage": "https://rfidsoftwares.com",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --jsxFactory React.createElement",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}