@barcodesdk/ui 0.1.0

package/LICENSE

@@ -0,0 +1,9 @@
+Copyright (c) 2026 Vijay Reddy
+
+All rights reserved.
+
+This software is proprietary beta software. Unauthorized copying,
+modification, distribution, or use is prohibited except under a written
+license agreement with the copyright holder.
+
+Third-party notices for bundled dependencies are in NOTICES.md.

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { objectFitRect } from "./object-fit.js";
+export { ScanOverlay } from "./scan-overlay.js";
+export type { ScanOverlayProps } from "./scan-overlay.js";
+export { ScanGuide } from "./scan-guide.js";
+export type { ScanGuideProps } from "./scan-guide.js";
+export { ScannerStatus } from "./scanner-status.js";
+export type { ScannerStatusProps } from "./scanner-status.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function objectFitRect(containerWidth, containerHeight, sourceWidth, sourceHeight, fit = "contain") {
+  if (containerWidth <= 0 || containerHeight <= 0 || sourceWidth <= 0 || sourceHeight <= 0) {
+    return null;
+  }
+  const scale = fit === "cover" ? Math.max(containerWidth / sourceWidth, containerHeight / sourceHeight) : Math.min(containerWidth / sourceWidth, containerHeight / sourceHeight);
+  const width = sourceWidth * scale;
+  const height = sourceHeight * scale;
+  return {
+    left: (containerWidth - width) / 2,
+    top: (containerHeight - height) / 2,
+    width,
+    height
+  };
+}
+function ScanOverlay({
+  results,
+  sourceWidth,
+  sourceHeight,
+  containerWidth,
+  containerHeight,
+  objectFit = "contain",
+  fill = "rgba(34,197,94,0.18)",
+  stroke = "#22c55e",
+  className
+}) {
+  const fitted = objectFitRect(
+    containerWidth,
+    containerHeight,
+    sourceWidth,
+    sourceHeight,
+    objectFit
+  );
+  if (!fitted || results.length === 0) {
+    return null;
+  }
+  const strokeWidth = Math.max(1.5, Math.min(sourceWidth, sourceHeight) / 240);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      style: {
+        pointerEvents: "none",
+        position: "absolute",
+        left: fitted.left,
+        top: fitted.top,
+        width: fitted.width,
+        height: fitted.height
+      },
+      viewBox: `0 0 ${sourceWidth} ${sourceHeight}`,
+      preserveAspectRatio: "none",
+      children: results.map((result) => {
+        const points = result.cornerPoints.map((point) => `${point.x},${point.y}`).join(" ");
+        return /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points,
+            fill,
+            stroke,
+            strokeWidth,
+            strokeLinejoin: "round"
+          },
+          result.id
+        );
+      })
+    }
+  );
+}
+function ScanGuide({
+  className,
+  label = "Align barcode inside the frame"
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      role: "img",
+      "aria-label": label,
+      style: {
+        pointerEvents: "none",
+        position: "absolute",
+        inset: "18%",
+        border: "2px solid rgba(255,255,255,0.85)",
+        borderRadius: 12,
+        boxShadow: "0 0 0 9999px rgba(0,0,0,0.28)",
+        display: "flex",
+        alignItems: "flex-end",
+        justifyContent: "center",
+        paddingBottom: 12
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          style: {
+            color: "#fff",
+            fontSize: 12,
+            fontWeight: 500,
+            textShadow: "0 1px 2px rgba(0,0,0,0.6)"
+          },
+          children: label
+        }
+      )
+    }
+  );
+}
+const LABELS = {
+  idle: "Idle",
+  initializing: "Initializing",
+  ready: "Ready to scan",
+  scanning: "Scanning",
+  paused: "Paused",
+  error: "Scanner error",
+  destroyed: "Scanner closed"
+};
+const LIVE_LABELS = {
+  idle: "Scanner idle",
+  initializing: "Scanner initializing",
+  ready: "Scanner ready",
+  scanning: "Scanner actively scanning",
+  paused: "Scanner paused",
+  error: "Scanner encountered an error",
+  destroyed: "Scanner closed"
+};
+function ScannerStatus({ state, className, label }) {
+  const visible = label ?? LABELS[state];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className,
+      "data-state": state,
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-label": LIVE_LABELS[state],
+      children: visible
+    }
+  );
+}
+export {
+  ScanGuide,
+  ScanOverlay,
+  ScannerStatus,
+  objectFitRect
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/object-fit.ts","../src/scan-overlay.tsx","../src/scan-guide.tsx","../src/scanner-status.tsx"],"sourcesContent":["export function objectFitRect(\n  containerWidth: number,\n  containerHeight: number,\n  sourceWidth: number,\n  sourceHeight: number,\n  fit: \"contain\" | \"cover\" = \"contain\",\n) {\n  if (\n    containerWidth <= 0 ||\n    containerHeight <= 0 ||\n    sourceWidth <= 0 ||\n    sourceHeight <= 0\n  ) {\n    return null;\n  }\n\n  const scale =\n    fit === \"cover\"\n      ? Math.max(containerWidth / sourceWidth, containerHeight / sourceHeight)\n      : Math.min(containerWidth / sourceWidth, containerHeight / sourceHeight);\n\n  const width = sourceWidth * scale;\n  const height = sourceHeight * scale;\n\n  return {\n    left: (containerWidth - width) / 2,\n    top: (containerHeight - height) / 2,\n    width,\n    height,\n  };\n}\n","\"use client\";\n\nimport type { BarcodeResult } from \"@barcodesdk/core\";\nimport { objectFitRect } from \"./object-fit.js\";\n\nexport interface ScanOverlayProps {\n  results: BarcodeResult[];\n  sourceWidth: number;\n  sourceHeight: number;\n  containerWidth: number;\n  containerHeight: number;\n  objectFit?: \"contain\" | \"cover\";\n  fill?: string;\n  stroke?: string;\n  className?: string;\n}\n\n/** SVG polygons mapped from barcode corner points into the fitted media box. */\nexport function ScanOverlay({\n  results,\n  sourceWidth,\n  sourceHeight,\n  containerWidth,\n  containerHeight,\n  objectFit = \"contain\",\n  fill = \"rgba(34,197,94,0.18)\",\n  stroke = \"#22c55e\",\n  className,\n}: ScanOverlayProps) {\n  const fitted = objectFitRect(\n    containerWidth,\n    containerHeight,\n    sourceWidth,\n    sourceHeight,\n    objectFit,\n  );\n\n  if (!fitted || results.length === 0) {\n    return null;\n  }\n\n  const strokeWidth = Math.max(1.5, Math.min(sourceWidth, sourceHeight) / 240);\n\n  return (\n    <svg\n      className={className}\n      style={{\n        pointerEvents: \"none\",\n        position: \"absolute\",\n        left: fitted.left,\n        top: fitted.top,\n        width: fitted.width,\n        height: fitted.height,\n      }}\n      viewBox={`0 0 ${sourceWidth} ${sourceHeight}`}\n      preserveAspectRatio=\"none\"\n    >\n      {results.map((result) => {\n        const points = result.cornerPoints\n          .map((point) => `${point.x},${point.y}`)\n          .join(\" \");\n        return (\n          <polygon\n            key={result.id}\n            points={points}\n            fill={fill}\n            stroke={stroke}\n            strokeWidth={strokeWidth}\n            strokeLinejoin=\"round\"\n          />\n        );\n      })}\n    </svg>\n  );\n}\n","\"use client\";\n\nexport interface ScanGuideProps {\n  className?: string;\n  label?: string;\n}\n\n/** Simple center viewfinder frame for camera guidance. */\nexport function ScanGuide({\n  className,\n  label = \"Align barcode inside the frame\",\n}: ScanGuideProps) {\n  return (\n    <div\n      className={className}\n      role=\"img\"\n      aria-label={label}\n      style={{\n        pointerEvents: \"none\",\n        position: \"absolute\",\n        inset: \"18%\",\n        border: \"2px solid rgba(255,255,255,0.85)\",\n        borderRadius: 12,\n        boxShadow: \"0 0 0 9999px rgba(0,0,0,0.28)\",\n        display: \"flex\",\n        alignItems: \"flex-end\",\n        justifyContent: \"center\",\n        paddingBottom: 12,\n      }}\n    >\n      <span\n        aria-hidden=\"true\"\n        style={{\n          color: \"#fff\",\n          fontSize: 12,\n          fontWeight: 500,\n          textShadow: \"0 1px 2px rgba(0,0,0,0.6)\",\n        }}\n      >\n        {label}\n      </span>\n    </div>\n  );\n}\n","\"use client\";\n\nimport type { ScannerState } from \"@barcodesdk/core\";\n\nexport interface ScannerStatusProps {\n  state: ScannerState;\n  className?: string;\n  /** Override visible label; screen readers always get a full phrase. */\n  label?: string;\n}\n\nconst LABELS: Record<ScannerState, string> = {\n  idle: \"Idle\",\n  initializing: \"Initializing\",\n  ready: \"Ready to scan\",\n  scanning: \"Scanning\",\n  paused: \"Paused\",\n  error: \"Scanner error\",\n  destroyed: \"Scanner closed\",\n};\n\nconst LIVE_LABELS: Record<ScannerState, string> = {\n  idle: \"Scanner idle\",\n  initializing: \"Scanner initializing\",\n  ready: \"Scanner ready\",\n  scanning: \"Scanner actively scanning\",\n  paused: \"Scanner paused\",\n  error: \"Scanner encountered an error\",\n  destroyed: \"Scanner closed\",\n};\n\nexport function ScannerStatus({ state, className, label }: ScannerStatusProps) {\n  const visible = label ?? LABELS[state];\n  return (\n    <span\n      className={className}\n      data-state={state}\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      aria-label={LIVE_LABELS[state]}\n    >\n      {visible}\n    </span>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/object-fit.d.ts

@@ -0,0 +1,7 @@
+export declare function objectFitRect(containerWidth: number, containerHeight: number, sourceWidth: number, sourceHeight: number, fit?: "contain" | "cover"): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+} | null;
+//# sourceMappingURL=object-fit.d.ts.map

package/dist/object-fit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"object-fit.d.ts","sourceRoot":"","sources":["../src/object-fit.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAC3B,cAAc,EAAE,MAAM,EACtB,eAAe,EAAE,MAAM,EACvB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,GAAG,GAAE,SAAS,GAAG,OAAmB;;;;;SAyBrC"}

package/dist/scan-guide.d.ts

@@ -0,0 +1,7 @@
+export interface ScanGuideProps {
+    className?: string;
+    label?: string;
+}
+/** Simple center viewfinder frame for camera guidance. */
+export declare function ScanGuide({ className, label, }: ScanGuideProps): import("react").JSX.Element;
+//# sourceMappingURL=scan-guide.d.ts.map

package/dist/scan-guide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scan-guide.d.ts","sourceRoot":"","sources":["../src/scan-guide.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0DAA0D;AAC1D,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,KAAwC,GACzC,EAAE,cAAc,+BAgChB"}

package/dist/scan-overlay.d.ts

@@ -0,0 +1,15 @@
+import type { BarcodeResult } from "@barcodesdk/core";
+export interface ScanOverlayProps {
+    results: BarcodeResult[];
+    sourceWidth: number;
+    sourceHeight: number;
+    containerWidth: number;
+    containerHeight: number;
+    objectFit?: "contain" | "cover";
+    fill?: string;
+    stroke?: string;
+    className?: string;
+}
+/** SVG polygons mapped from barcode corner points into the fitted media box. */
+export declare function ScanOverlay({ results, sourceWidth, sourceHeight, containerWidth, containerHeight, objectFit, fill, stroke, className, }: ScanOverlayProps): import("react").JSX.Element | null;
+//# sourceMappingURL=scan-overlay.d.ts.map

package/dist/scan-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scan-overlay.d.ts","sourceRoot":"","sources":["../src/scan-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,gFAAgF;AAChF,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,WAAW,EACX,YAAY,EACZ,cAAc,EACd,eAAe,EACf,SAAqB,EACrB,IAA6B,EAC7B,MAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,sCA8ClB"}

package/dist/scanner-status.d.ts

@@ -0,0 +1,9 @@
+import type { ScannerState } from "@barcodesdk/core";
+export interface ScannerStatusProps {
+    state: ScannerState;
+    className?: string;
+    /** Override visible label; screen readers always get a full phrase. */
+    label?: string;
+}
+export declare function ScannerStatus({ state, className, label }: ScannerStatusProps): import("react").JSX.Element;
+//# sourceMappingURL=scanner-status.d.ts.map

package/dist/scanner-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scanner-status.d.ts","sourceRoot":"","sources":["../src/scanner-status.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsBD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,kBAAkB,+BAc5E"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@barcodesdk/ui",
+  "version": "0.1.0",
+  "description": "Optional overlay primitives for Barcode WebSDK",
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "Vijay Reddy",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vjiayreddy/barcodesdk.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "beta"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@barcodesdk/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "^5",
+    "vite": "^6",
+    "vitest": "^3"
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}