@kitsuyui/react-binary 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Yui KITSU
+
+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.

package/README.md

@@ -0,0 +1,35 @@
+# @kitsuyui/react-editablelabel
+
+[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-editablelabel.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-editablelabel)
+
+A React component that can edit text by clicking.
+What this means in DOM is usually a span tag, which becomes an input tag when clicked.
+Other than that, no CSS is applied. CSS reset / decoration must be done by the user.
+
+## Demo
+
+Storybook: https://react-playground.docs.kitsuyui.com/storybook/
+
+## Installation
+
+### npm
+
+```sh
+npm install @kitsuyui/react-editablelabel
+```
+
+### yarn
+
+```sh
+yarn add @kitsuyui/react-editablelabel
+```
+
+### pnpm
+
+```sh
+pnpm add @kitsuyui/react-editablelabel
+```
+
+## License
+
+MIT

package/dist/Binary.d.mts

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/**
+ * BitProps is a type that represents the properties of a bit.
+ */
+type BitProps = {
+    stand: boolean;
+};
+/**
+ * EnhancedBitProps is a type that adds the following properties to BitProps.
+ * - overflow: If true, this means that bit is out of range.
+ * - zeroPadding: If true, this means that bit is padded with zero.
+ */
+type EnhancedBitProps = BitProps & {
+    overflow?: boolean;
+    zeroPadding?: boolean;
+    littleEndianBitOrder: number;
+    bigEndianBitOrder: number;
+};
+type BitElement = React.FC<EnhancedBitProps>;
+/**
+ * Bit is a component that displays a bit.
+ * This component supports the behavior of zero padding and overflow.
+ * @param props
+ * @returns A component that displays a bit.
+ */
+declare const Bits: (props: {
+    value: number;
+    bitElement: BitElement;
+    length?: number | undefined;
+}) => JSX.Element;
+
+export { type BitElement, type BitProps, Bits, type EnhancedBitProps };

package/dist/Binary.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/**
+ * BitProps is a type that represents the properties of a bit.
+ */
+type BitProps = {
+    stand: boolean;
+};
+/**
+ * EnhancedBitProps is a type that adds the following properties to BitProps.
+ * - overflow: If true, this means that bit is out of range.
+ * - zeroPadding: If true, this means that bit is padded with zero.
+ */
+type EnhancedBitProps = BitProps & {
+    overflow?: boolean;
+    zeroPadding?: boolean;
+    littleEndianBitOrder: number;
+    bigEndianBitOrder: number;
+};
+type BitElement = React.FC<EnhancedBitProps>;
+/**
+ * Bit is a component that displays a bit.
+ * This component supports the behavior of zero padding and overflow.
+ * @param props
+ * @returns A component that displays a bit.
+ */
+declare const Bits: (props: {
+    value: number;
+    bitElement: BitElement;
+    length?: number | undefined;
+}) => JSX.Element;
+
+export { type BitElement, type BitProps, Bits, type EnhancedBitProps };

package/dist/Binary.js

@@ -0,0 +1,66 @@
+"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/Binary.tsx
+var Binary_exports = {};
+__export(Binary_exports, {
+  Bits: () => Bits
+});
+module.exports = __toCommonJS(Binary_exports);
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Bits = (props) => {
+  const { value, bitElement } = props;
+  const bits = (value | 0).toString(2).split("");
+  const bitLength = bits.length;
+  const length = props.length ?? bitLength;
+  const overflowLength = Math.max(0, bitLength - length);
+  const zeroPaddingLength = Math.max(0, length - bitLength);
+  const representLength = Math.max(length, bitLength);
+  const elements = Array.from(Array(representLength)).map((_, index) => {
+    const stand = bits[bitLength - representLength + index] === "1";
+    const bigEndianBitOrder = index;
+    const overflow = bigEndianBitOrder < overflowLength;
+    const zeroPadding = bigEndianBitOrder < zeroPaddingLength;
+    return import_react.default.createElement(bitElement, {
+      key: index,
+      stand,
+      overflow,
+      zeroPadding,
+      littleEndianBitOrder: representLength - index - 1,
+      bigEndianBitOrder
+    });
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: elements });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Bits
+});
+//# sourceMappingURL=Binary.js.map

package/dist/Binary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Binary.tsx"],"sourcesContent":["import React from 'react'\n\n/**\n * BitProps is a type that represents the properties of a bit.\n */\nexport type BitProps = {\n  stand: boolean\n}\n\n/**\n * EnhancedBitProps is a type that adds the following properties to BitProps.\n * - overflow: If true, this means that bit is out of range.\n * - zeroPadding: If true, this means that bit is padded with zero.\n */\nexport type EnhancedBitProps = BitProps & {\n  overflow?: boolean\n  zeroPadding?: boolean\n  littleEndianBitOrder: number\n  bigEndianBitOrder: number\n}\n\nexport type BitElement = React.FC<EnhancedBitProps>\n\n/**\n * Bit is a component that displays a bit.\n * This component supports the behavior of zero padding and overflow.\n * @param props\n * @returns A component that displays a bit.\n */\nexport const Bits = (props: {\n  value: number\n  bitElement: BitElement\n  length?: number | undefined\n}): JSX.Element => {\n  const { value, bitElement } = props\n  const bits = (value | 0).toString(2).split('')\n  const bitLength = bits.length\n  const length = props.length ?? bitLength\n  const overflowLength = Math.max(0, bitLength - length)\n  const zeroPaddingLength = Math.max(0, length - bitLength)\n  const representLength = Math.max(length, bitLength)\n  const elements = Array.from(Array(representLength)).map((_, index) => {\n    const stand = bits[bitLength - representLength + index] === '1'\n    const bigEndianBitOrder = index\n    const overflow = bigEndianBitOrder < overflowLength\n    const zeroPadding = bigEndianBitOrder < zeroPaddingLength\n    return React.createElement(bitElement, {\n      key: index,\n      stand,\n      overflow,\n      zeroPadding,\n      littleEndianBitOrder: representLength - index - 1,\n      bigEndianBitOrder,\n    })\n  })\n  return <>{elements}</>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAuDT;AA1BF,IAAM,OAAO,CAAC,UAIF;AACjB,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,QAAQ,QAAQ,GAAG,SAAS,CAAC,EAAE,MAAM,EAAE;AAC7C,QAAM,YAAY,KAAK;AACvB,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,iBAAiB,KAAK,IAAI,GAAG,YAAY,MAAM;AACrD,QAAM,oBAAoB,KAAK,IAAI,GAAG,SAAS,SAAS;AACxD,QAAM,kBAAkB,KAAK,IAAI,QAAQ,SAAS;AAClD,QAAM,WAAW,MAAM,KAAK,MAAM,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AACpE,UAAM,QAAQ,KAAK,YAAY,kBAAkB,KAAK,MAAM;AAC5D,UAAM,oBAAoB;AAC1B,UAAM,WAAW,oBAAoB;AACrC,UAAM,cAAc,oBAAoB;AACxC,WAAO,aAAAA,QAAM,cAAc,YAAY;AAAA,MACrC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB,kBAAkB,QAAQ;AAAA,MAChD;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACD,SAAO,2EAAG,oBAAS;AACrB;","names":["React"]}

package/dist/Binary.mjs

@@ -0,0 +1,7 @@
+import {
+  Bits
+} from "./chunk-SSBW6RTY.mjs";
+export {
+  Bits
+};
+//# sourceMappingURL=Binary.mjs.map

package/dist/Binary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Detailed.d.mts

@@ -0,0 +1,16 @@
+import { EnhancedBitProps } from './Binary.mjs';
+import 'react';
+
+type DetailedBitProps = EnhancedBitProps & {
+    displayLittleEndianBitOrder?: boolean | undefined;
+    displayBigEndianBitOrder?: boolean | undefined;
+};
+declare const DetailedBit: (props: DetailedBitProps) => JSX.Element;
+declare const DetailedBitString: (props: {
+    value: number;
+    length?: number;
+    showLittleEndianBitOrder?: boolean | undefined;
+    showBigEndianBitOrder?: boolean | undefined;
+}) => JSX.Element;
+
+export { DetailedBit, type DetailedBitProps, DetailedBitString };

package/dist/Detailed.d.ts

@@ -0,0 +1,16 @@
+import { EnhancedBitProps } from './Binary.js';
+import 'react';
+
+type DetailedBitProps = EnhancedBitProps & {
+    displayLittleEndianBitOrder?: boolean | undefined;
+    displayBigEndianBitOrder?: boolean | undefined;
+};
+declare const DetailedBit: (props: DetailedBitProps) => JSX.Element;
+declare const DetailedBitString: (props: {
+    value: number;
+    length?: number;
+    showLittleEndianBitOrder?: boolean | undefined;
+    showBigEndianBitOrder?: boolean | undefined;
+}) => JSX.Element;
+
+export { DetailedBit, type DetailedBitProps, DetailedBitString };

package/dist/Detailed.js

@@ -0,0 +1,132 @@
+"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/Detailed.tsx
+var Detailed_exports = {};
+__export(Detailed_exports, {
+  DetailedBit: () => DetailedBit,
+  DetailedBitString: () => DetailedBitString
+});
+module.exports = __toCommonJS(Detailed_exports);
+
+// src/Binary.tsx
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Bits = (props) => {
+  const { value, bitElement } = props;
+  const bits = (value | 0).toString(2).split("");
+  const bitLength = bits.length;
+  const length = props.length ?? bitLength;
+  const overflowLength = Math.max(0, bitLength - length);
+  const zeroPaddingLength = Math.max(0, length - bitLength);
+  const representLength = Math.max(length, bitLength);
+  const elements = Array.from(Array(representLength)).map((_, index) => {
+    const stand = bits[bitLength - representLength + index] === "1";
+    const bigEndianBitOrder = index;
+    const overflow = bigEndianBitOrder < overflowLength;
+    const zeroPadding = bigEndianBitOrder < zeroPaddingLength;
+    return import_react.default.createElement(bitElement, {
+      key: index,
+      stand,
+      overflow,
+      zeroPadding,
+      littleEndianBitOrder: representLength - index - 1,
+      bigEndianBitOrder
+    });
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: elements });
+};
+
+// src/Detailed.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DetailedBit = (props) => {
+  const { stand, overflow, zeroPadding } = props;
+  const displayLittleEndianBitOrder = props.displayLittleEndianBitOrder ?? false;
+  const displayBigEndianBitOrder = props.displayBigEndianBitOrder ?? false;
+  const text = stand ? "1" : "0";
+  const border = overflow ? "1px dotted red" : zeroPadding ? "1px dotted gray" : "1px solid #cccccc";
+  const margin = "0.5px";
+  const color = stand ? "#999999" : "#cccccc";
+  const backgroundColor = stand ? "#000000" : "#ffffff";
+  const fontFamily = "monospace";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "inline-block", fontFamily, margin }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          color,
+          backgroundColor,
+          border
+        },
+        children: text
+      }
+    ),
+    displayLittleEndianBitOrder && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IndexLabel, { index: props.littleEndianBitOrder }),
+    displayBigEndianBitOrder && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IndexLabel, { index: props.bigEndianBitOrder })
+  ] });
+};
+var IndexLabel = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        userSelect: "none",
+        fontSize: "0.5em",
+        textAlign: "center",
+        lineHeight: "1em"
+      },
+      children: props.index
+    }
+  );
+};
+var DetailedBitString = (props) => {
+  const showLittleEndianBitOrder = props.showLittleEndianBitOrder ?? false;
+  const showBigEndianBitOrder = props.showBigEndianBitOrder ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Bits,
+    {
+      value: props.value,
+      length: props.length,
+      bitElement: (props2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        DetailedBit,
+        {
+          ...props2,
+          displayLittleEndianBitOrder: showLittleEndianBitOrder,
+          displayBigEndianBitOrder: showBigEndianBitOrder
+        }
+      )
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DetailedBit,
+  DetailedBitString
+});
+//# sourceMappingURL=Detailed.js.map

package/dist/Detailed.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Detailed.tsx","../src/Binary.tsx"],"sourcesContent":["import React from 'react'\nimport { Bits, EnhancedBitProps } from './Binary'\n\nexport type DetailedBitProps = EnhancedBitProps & {\n  displayLittleEndianBitOrder?: boolean | undefined\n  displayBigEndianBitOrder?: boolean | undefined\n}\n\nexport const DetailedBit = (props: DetailedBitProps): JSX.Element => {\n  const { stand, overflow, zeroPadding } = props\n  const displayLittleEndianBitOrder = props.displayLittleEndianBitOrder ?? false\n  const displayBigEndianBitOrder = props.displayBigEndianBitOrder ?? false\n  const text = stand ? '1' : '0'\n  const border = overflow\n    ? '1px dotted red'\n    : zeroPadding\n      ? '1px dotted gray'\n      : '1px solid #cccccc'\n  const margin = '0.5px'\n  const color = stand ? '#999999' : '#cccccc'\n  const backgroundColor = stand ? '#000000' : '#ffffff'\n  const fontFamily = 'monospace'\n  return (\n    <div style={{ display: 'inline-block', fontFamily, margin }}>\n      <div\n        style={{\n          color,\n          backgroundColor,\n          border,\n        }}\n      >\n        {text}\n      </div>\n      {displayLittleEndianBitOrder && (\n        <IndexLabel index={props.littleEndianBitOrder} />\n      )}\n      {displayBigEndianBitOrder && (\n        <IndexLabel index={props.bigEndianBitOrder} />\n      )}\n    </div>\n  )\n}\n\nconst IndexLabel = (props: { index: number }): JSX.Element => {\n  return (\n    <div\n      style={{\n        userSelect: 'none',\n        fontSize: '0.5em',\n        textAlign: 'center',\n        lineHeight: '1em',\n      }}\n    >\n      {props.index}\n    </div>\n  )\n}\n\nexport const DetailedBitString = (props: {\n  value: number\n  length?: number\n  showLittleEndianBitOrder?: boolean | undefined\n  showBigEndianBitOrder?: boolean | undefined\n}): JSX.Element => {\n  const showLittleEndianBitOrder = props.showLittleEndianBitOrder ?? false\n  const showBigEndianBitOrder = props.showBigEndianBitOrder ?? false\n  return (\n    <Bits\n      value={props.value}\n      length={props.length}\n      bitElement={(props) => (\n        <DetailedBit\n          {...props}\n          displayLittleEndianBitOrder={showLittleEndianBitOrder}\n          displayBigEndianBitOrder={showBigEndianBitOrder}\n        />\n      )}\n    />\n  )\n}\n","import React from 'react'\n\n/**\n * BitProps is a type that represents the properties of a bit.\n */\nexport type BitProps = {\n  stand: boolean\n}\n\n/**\n * EnhancedBitProps is a type that adds the following properties to BitProps.\n * - overflow: If true, this means that bit is out of range.\n * - zeroPadding: If true, this means that bit is padded with zero.\n */\nexport type EnhancedBitProps = BitProps & {\n  overflow?: boolean\n  zeroPadding?: boolean\n  littleEndianBitOrder: number\n  bigEndianBitOrder: number\n}\n\nexport type BitElement = React.FC<EnhancedBitProps>\n\n/**\n * Bit is a component that displays a bit.\n * This component supports the behavior of zero padding and overflow.\n * @param props\n * @returns A component that displays a bit.\n */\nexport const Bits = (props: {\n  value: number\n  bitElement: BitElement\n  length?: number | undefined\n}): JSX.Element => {\n  const { value, bitElement } = props\n  const bits = (value | 0).toString(2).split('')\n  const bitLength = bits.length\n  const length = props.length ?? bitLength\n  const overflowLength = Math.max(0, bitLength - length)\n  const zeroPaddingLength = Math.max(0, length - bitLength)\n  const representLength = Math.max(length, bitLength)\n  const elements = Array.from(Array(representLength)).map((_, index) => {\n    const stand = bits[bitLength - representLength + index] === '1'\n    const bigEndianBitOrder = index\n    const overflow = bigEndianBitOrder < overflowLength\n    const zeroPadding = bigEndianBitOrder < zeroPaddingLength\n    return React.createElement(bitElement, {\n      key: index,\n      stand,\n      overflow,\n      zeroPadding,\n      littleEndianBitOrder: representLength - index - 1,\n      bigEndianBitOrder,\n    })\n  })\n  return <>{elements}</>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAuDT;AA1BF,IAAM,OAAO,CAAC,UAIF;AACjB,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,QAAQ,QAAQ,GAAG,SAAS,CAAC,EAAE,MAAM,EAAE;AAC7C,QAAM,YAAY,KAAK;AACvB,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,iBAAiB,KAAK,IAAI,GAAG,YAAY,MAAM;AACrD,QAAM,oBAAoB,KAAK,IAAI,GAAG,SAAS,SAAS;AACxD,QAAM,kBAAkB,KAAK,IAAI,QAAQ,SAAS;AAClD,QAAM,WAAW,MAAM,KAAK,MAAM,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AACpE,UAAM,QAAQ,KAAK,YAAY,kBAAkB,KAAK,MAAM;AAC5D,UAAM,oBAAoB;AAC1B,UAAM,WAAW,oBAAoB;AACrC,UAAM,cAAc,oBAAoB;AACxC,WAAO,aAAAA,QAAM,cAAc,YAAY;AAAA,MACrC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB,kBAAkB,QAAQ;AAAA,MAChD;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACD,SAAO,2EAAG,oBAAS;AACrB;;;ADjCI,IAAAC,sBAAA;AAfG,IAAM,cAAc,CAAC,UAAyC;AACnE,QAAM,EAAE,OAAO,UAAU,YAAY,IAAI;AACzC,QAAM,8BAA8B,MAAM,+BAA+B;AACzE,QAAM,2BAA2B,MAAM,4BAA4B;AACnE,QAAM,OAAO,QAAQ,MAAM;AAC3B,QAAM,SAAS,WACX,mBACA,cACE,oBACA;AACN,QAAM,SAAS;AACf,QAAM,QAAQ,QAAQ,YAAY;AAClC,QAAM,kBAAkB,QAAQ,YAAY;AAC5C,QAAM,aAAa;AACnB,SACE,8CAAC,SAAI,OAAO,EAAE,SAAS,gBAAgB,YAAY,OAAO,GACxD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACC,+BACC,6CAAC,cAAW,OAAO,MAAM,sBAAsB;AAAA,IAEhD,4BACC,6CAAC,cAAW,OAAO,MAAM,mBAAmB;AAAA,KAEhD;AAEJ;AAEA,IAAM,aAAa,CAAC,UAA0C;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,MACd;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEO,IAAM,oBAAoB,CAAC,UAKf;AACjB,QAAM,2BAA2B,MAAM,4BAA4B;AACnE,QAAM,wBAAwB,MAAM,yBAAyB;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,MACd,YAAY,CAACC,WACX;AAAA,QAAC;AAAA;AAAA,UACE,GAAGA;AAAA,UACJ,6BAA6B;AAAA,UAC7B,0BAA0B;AAAA;AAAA,MAC5B;AAAA;AAAA,EAEJ;AAEJ;","names":["React","import_jsx_runtime","props"]}

package/dist/Detailed.mjs

@@ -0,0 +1,10 @@
+import {
+  DetailedBit,
+  DetailedBitString
+} from "./chunk-WHSEFUQT.mjs";
+import "./chunk-SSBW6RTY.mjs";
+export {
+  DetailedBit,
+  DetailedBitString
+};
+//# sourceMappingURL=Detailed.mjs.map

package/dist/Detailed.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Simple.d.mts

@@ -0,0 +1,14 @@
+import { EnhancedBitProps } from './Binary.mjs';
+import 'react';
+
+/**
+ * SimpleBit is a simple component that displays a bit.
+ * @param props
+ * @returns A component that displays a bit.
+ */
+declare const SimpleBit: (props: EnhancedBitProps) => JSX.Element;
+declare const Simple8BitString: (props: {
+    value: number;
+}) => JSX.Element;
+
+export { Simple8BitString, SimpleBit };

package/dist/Simple.d.ts

@@ -0,0 +1,14 @@
+import { EnhancedBitProps } from './Binary.js';
+import 'react';
+
+/**
+ * SimpleBit is a simple component that displays a bit.
+ * @param props
+ * @returns A component that displays a bit.
+ */
+declare const SimpleBit: (props: EnhancedBitProps) => JSX.Element;
+declare const Simple8BitString: (props: {
+    value: number;
+}) => JSX.Element;
+
+export { Simple8BitString, SimpleBit };

package/dist/Simple.js

@@ -0,0 +1,81 @@
+"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/Simple.tsx
+var Simple_exports = {};
+__export(Simple_exports, {
+  Simple8BitString: () => Simple8BitString,
+  SimpleBit: () => SimpleBit
+});
+module.exports = __toCommonJS(Simple_exports);
+
+// src/Binary.tsx
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Bits = (props) => {
+  const { value, bitElement } = props;
+  const bits = (value | 0).toString(2).split("");
+  const bitLength = bits.length;
+  const length = props.length ?? bitLength;
+  const overflowLength = Math.max(0, bitLength - length);
+  const zeroPaddingLength = Math.max(0, length - bitLength);
+  const representLength = Math.max(length, bitLength);
+  const elements = Array.from(Array(representLength)).map((_, index) => {
+    const stand = bits[bitLength - representLength + index] === "1";
+    const bigEndianBitOrder = index;
+    const overflow = bigEndianBitOrder < overflowLength;
+    const zeroPadding = bigEndianBitOrder < zeroPaddingLength;
+    return import_react.default.createElement(bitElement, {
+      key: index,
+      stand,
+      overflow,
+      zeroPadding,
+      littleEndianBitOrder: representLength - index - 1,
+      bigEndianBitOrder
+    });
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: elements });
+};
+
+// src/Simple.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SimpleBit = (props) => {
+  const { stand, overflow } = props;
+  const text = overflow ?? false ? "" : stand ? "1" : "0";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: text });
+};
+var Simple8BitString = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Bits, { value: props.value, length: 8, bitElement: SimpleBit });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Simple8BitString,
+  SimpleBit
+});
+//# sourceMappingURL=Simple.js.map

package/dist/Simple.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Simple.tsx","../src/Binary.tsx"],"sourcesContent":["import React from 'react'\nimport { Bits, EnhancedBitProps } from './Binary'\n\n/**\n * SimpleBit is a simple component that displays a bit.\n * @param props\n * @returns A component that displays a bit.\n */\nexport const SimpleBit = (props: EnhancedBitProps): JSX.Element => {\n  const { stand, overflow } = props\n  const text = overflow ?? false ? '' : stand ? '1' : '0'\n  return <>{text}</>\n}\n\nexport const Simple8BitString = (props: { value: number }): JSX.Element => {\n  return <Bits value={props.value} length={8} bitElement={SimpleBit} />\n}\n","import React from 'react'\n\n/**\n * BitProps is a type that represents the properties of a bit.\n */\nexport type BitProps = {\n  stand: boolean\n}\n\n/**\n * EnhancedBitProps is a type that adds the following properties to BitProps.\n * - overflow: If true, this means that bit is out of range.\n * - zeroPadding: If true, this means that bit is padded with zero.\n */\nexport type EnhancedBitProps = BitProps & {\n  overflow?: boolean\n  zeroPadding?: boolean\n  littleEndianBitOrder: number\n  bigEndianBitOrder: number\n}\n\nexport type BitElement = React.FC<EnhancedBitProps>\n\n/**\n * Bit is a component that displays a bit.\n * This component supports the behavior of zero padding and overflow.\n * @param props\n * @returns A component that displays a bit.\n */\nexport const Bits = (props: {\n  value: number\n  bitElement: BitElement\n  length?: number | undefined\n}): JSX.Element => {\n  const { value, bitElement } = props\n  const bits = (value | 0).toString(2).split('')\n  const bitLength = bits.length\n  const length = props.length ?? bitLength\n  const overflowLength = Math.max(0, bitLength - length)\n  const zeroPaddingLength = Math.max(0, length - bitLength)\n  const representLength = Math.max(length, bitLength)\n  const elements = Array.from(Array(representLength)).map((_, index) => {\n    const stand = bits[bitLength - representLength + index] === '1'\n    const bigEndianBitOrder = index\n    const overflow = bigEndianBitOrder < overflowLength\n    const zeroPadding = bigEndianBitOrder < zeroPaddingLength\n    return React.createElement(bitElement, {\n      key: index,\n      stand,\n      overflow,\n      zeroPadding,\n      littleEndianBitOrder: representLength - index - 1,\n      bigEndianBitOrder,\n    })\n  })\n  return <>{elements}</>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAuDT;AA1BF,IAAM,OAAO,CAAC,UAIF;AACjB,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,QAAQ,QAAQ,GAAG,SAAS,CAAC,EAAE,MAAM,EAAE;AAC7C,QAAM,YAAY,KAAK;AACvB,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,iBAAiB,KAAK,IAAI,GAAG,YAAY,MAAM;AACrD,QAAM,oBAAoB,KAAK,IAAI,GAAG,SAAS,SAAS;AACxD,QAAM,kBAAkB,KAAK,IAAI,QAAQ,SAAS;AAClD,QAAM,WAAW,MAAM,KAAK,MAAM,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AACpE,UAAM,QAAQ,KAAK,YAAY,kBAAkB,KAAK,MAAM;AAC5D,UAAM,oBAAoB;AAC1B,UAAM,WAAW,oBAAoB;AACrC,UAAM,cAAc,oBAAoB;AACxC,WAAO,aAAAA,QAAM,cAAc,YAAY;AAAA,MACrC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB,kBAAkB,QAAQ;AAAA,MAChD;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACD,SAAO,2EAAG,oBAAS;AACrB;;;AD7CS,IAAAC,sBAAA;AAHF,IAAM,YAAY,CAAC,UAAyC;AACjE,QAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,QAAM,OAAO,YAAY,QAAQ,KAAK,QAAQ,MAAM;AACpD,SAAO,6EAAG,gBAAK;AACjB;AAEO,IAAM,mBAAmB,CAAC,UAA0C;AACzE,SAAO,6CAAC,QAAK,OAAO,MAAM,OAAO,QAAQ,GAAG,YAAY,WAAW;AACrE;","names":["React","import_jsx_runtime"]}

package/dist/Simple.mjs

@@ -0,0 +1,10 @@
+import {
+  Simple8BitString,
+  SimpleBit
+} from "./chunk-HPBKCHK2.mjs";
+import "./chunk-SSBW6RTY.mjs";
+export {
+  Simple8BitString,
+  SimpleBit
+};
+//# sourceMappingURL=Simple.mjs.map

package/dist/Simple.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-HPBKCHK2.mjs

@@ -0,0 +1,20 @@
+import {
+  Bits
+} from "./chunk-SSBW6RTY.mjs";
+
+// src/Simple.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var SimpleBit = (props) => {
+  const { stand, overflow } = props;
+  const text = overflow ?? false ? "" : stand ? "1" : "0";
+  return /* @__PURE__ */ jsx(Fragment, { children: text });
+};
+var Simple8BitString = (props) => {
+  return /* @__PURE__ */ jsx(Bits, { value: props.value, length: 8, bitElement: SimpleBit });
+};
+
+export {
+  SimpleBit,
+  Simple8BitString
+};
+//# sourceMappingURL=chunk-HPBKCHK2.mjs.map

package/dist/chunk-HPBKCHK2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Simple.tsx"],"sourcesContent":["import React from 'react'\nimport { Bits, EnhancedBitProps } from './Binary'\n\n/**\n * SimpleBit is a simple component that displays a bit.\n * @param props\n * @returns A component that displays a bit.\n */\nexport const SimpleBit = (props: EnhancedBitProps): JSX.Element => {\n  const { stand, overflow } = props\n  const text = overflow ?? false ? '' : stand ? '1' : '0'\n  return <>{text}</>\n}\n\nexport const Simple8BitString = (props: { value: number }): JSX.Element => {\n  return <Bits value={props.value} length={8} bitElement={SimpleBit} />\n}\n"],"mappings":";;;;;AAWS;AAHF,IAAM,YAAY,CAAC,UAAyC;AACjE,QAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,QAAM,OAAO,YAAY,QAAQ,KAAK,QAAQ,MAAM;AACpD,SAAO,gCAAG,gBAAK;AACjB;AAEO,IAAM,mBAAmB,CAAC,UAA0C;AACzE,SAAO,oBAAC,QAAK,OAAO,MAAM,OAAO,QAAQ,GAAG,YAAY,WAAW;AACrE;","names":[]}

package/dist/chunk-SSBW6RTY.mjs

@@ -0,0 +1,32 @@
+// src/Binary.tsx
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var Bits = (props) => {
+  const { value, bitElement } = props;
+  const bits = (value | 0).toString(2).split("");
+  const bitLength = bits.length;
+  const length = props.length ?? bitLength;
+  const overflowLength = Math.max(0, bitLength - length);
+  const zeroPaddingLength = Math.max(0, length - bitLength);
+  const representLength = Math.max(length, bitLength);
+  const elements = Array.from(Array(representLength)).map((_, index) => {
+    const stand = bits[bitLength - representLength + index] === "1";
+    const bigEndianBitOrder = index;
+    const overflow = bigEndianBitOrder < overflowLength;
+    const zeroPadding = bigEndianBitOrder < zeroPaddingLength;
+    return React.createElement(bitElement, {
+      key: index,
+      stand,
+      overflow,
+      zeroPadding,
+      littleEndianBitOrder: representLength - index - 1,
+      bigEndianBitOrder
+    });
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: elements });
+};
+
+export {
+  Bits
+};
+//# sourceMappingURL=chunk-SSBW6RTY.mjs.map

package/dist/chunk-SSBW6RTY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Binary.tsx"],"sourcesContent":["import React from 'react'\n\n/**\n * BitProps is a type that represents the properties of a bit.\n */\nexport type BitProps = {\n  stand: boolean\n}\n\n/**\n * EnhancedBitProps is a type that adds the following properties to BitProps.\n * - overflow: If true, this means that bit is out of range.\n * - zeroPadding: If true, this means that bit is padded with zero.\n */\nexport type EnhancedBitProps = BitProps & {\n  overflow?: boolean\n  zeroPadding?: boolean\n  littleEndianBitOrder: number\n  bigEndianBitOrder: number\n}\n\nexport type BitElement = React.FC<EnhancedBitProps>\n\n/**\n * Bit is a component that displays a bit.\n * This component supports the behavior of zero padding and overflow.\n * @param props\n * @returns A component that displays a bit.\n */\nexport const Bits = (props: {\n  value: number\n  bitElement: BitElement\n  length?: number | undefined\n}): JSX.Element => {\n  const { value, bitElement } = props\n  const bits = (value | 0).toString(2).split('')\n  const bitLength = bits.length\n  const length = props.length ?? bitLength\n  const overflowLength = Math.max(0, bitLength - length)\n  const zeroPaddingLength = Math.max(0, length - bitLength)\n  const representLength = Math.max(length, bitLength)\n  const elements = Array.from(Array(representLength)).map((_, index) => {\n    const stand = bits[bitLength - representLength + index] === '1'\n    const bigEndianBitOrder = index\n    const overflow = bigEndianBitOrder < overflowLength\n    const zeroPadding = bigEndianBitOrder < zeroPaddingLength\n    return React.createElement(bitElement, {\n      key: index,\n      stand,\n      overflow,\n      zeroPadding,\n      littleEndianBitOrder: representLength - index - 1,\n      bigEndianBitOrder,\n    })\n  })\n  return <>{elements}</>\n}\n"],"mappings":";AAAA,OAAO,WAAW;AAuDT;AA1BF,IAAM,OAAO,CAAC,UAIF;AACjB,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,QAAQ,QAAQ,GAAG,SAAS,CAAC,EAAE,MAAM,EAAE;AAC7C,QAAM,YAAY,KAAK;AACvB,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,iBAAiB,KAAK,IAAI,GAAG,YAAY,MAAM;AACrD,QAAM,oBAAoB,KAAK,IAAI,GAAG,SAAS,SAAS;AACxD,QAAM,kBAAkB,KAAK,IAAI,QAAQ,SAAS;AAClD,QAAM,WAAW,MAAM,KAAK,MAAM,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AACpE,UAAM,QAAQ,KAAK,YAAY,kBAAkB,KAAK,MAAM;AAC5D,UAAM,oBAAoB;AAC1B,UAAM,WAAW,oBAAoB;AACrC,UAAM,cAAc,oBAAoB;AACxC,WAAO,MAAM,cAAc,YAAY;AAAA,MACrC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB,kBAAkB,QAAQ;AAAA,MAChD;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACD,SAAO,gCAAG,oBAAS;AACrB;","names":[]}

package/dist/chunk-WHSEFUQT.mjs

@@ -0,0 +1,71 @@
+import {
+  Bits
+} from "./chunk-SSBW6RTY.mjs";
+
+// src/Detailed.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DetailedBit = (props) => {
+  const { stand, overflow, zeroPadding } = props;
+  const displayLittleEndianBitOrder = props.displayLittleEndianBitOrder ?? false;
+  const displayBigEndianBitOrder = props.displayBigEndianBitOrder ?? false;
+  const text = stand ? "1" : "0";
+  const border = overflow ? "1px dotted red" : zeroPadding ? "1px dotted gray" : "1px solid #cccccc";
+  const margin = "0.5px";
+  const color = stand ? "#999999" : "#cccccc";
+  const backgroundColor = stand ? "#000000" : "#ffffff";
+  const fontFamily = "monospace";
+  return /* @__PURE__ */ jsxs("div", { style: { display: "inline-block", fontFamily, margin }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          color,
+          backgroundColor,
+          border
+        },
+        children: text
+      }
+    ),
+    displayLittleEndianBitOrder && /* @__PURE__ */ jsx(IndexLabel, { index: props.littleEndianBitOrder }),
+    displayBigEndianBitOrder && /* @__PURE__ */ jsx(IndexLabel, { index: props.bigEndianBitOrder })
+  ] });
+};
+var IndexLabel = (props) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        userSelect: "none",
+        fontSize: "0.5em",
+        textAlign: "center",
+        lineHeight: "1em"
+      },
+      children: props.index
+    }
+  );
+};
+var DetailedBitString = (props) => {
+  const showLittleEndianBitOrder = props.showLittleEndianBitOrder ?? false;
+  const showBigEndianBitOrder = props.showBigEndianBitOrder ?? false;
+  return /* @__PURE__ */ jsx(
+    Bits,
+    {
+      value: props.value,
+      length: props.length,
+      bitElement: (props2) => /* @__PURE__ */ jsx(
+        DetailedBit,
+        {
+          ...props2,
+          displayLittleEndianBitOrder: showLittleEndianBitOrder,
+          displayBigEndianBitOrder: showBigEndianBitOrder
+        }
+      )
+    }
+  );
+};
+
+export {
+  DetailedBit,
+  DetailedBitString
+};
+//# sourceMappingURL=chunk-WHSEFUQT.mjs.map

package/dist/chunk-WHSEFUQT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Detailed.tsx"],"sourcesContent":["import React from 'react'\nimport { Bits, EnhancedBitProps } from './Binary'\n\nexport type DetailedBitProps = EnhancedBitProps & {\n  displayLittleEndianBitOrder?: boolean | undefined\n  displayBigEndianBitOrder?: boolean | undefined\n}\n\nexport const DetailedBit = (props: DetailedBitProps): JSX.Element => {\n  const { stand, overflow, zeroPadding } = props\n  const displayLittleEndianBitOrder = props.displayLittleEndianBitOrder ?? false\n  const displayBigEndianBitOrder = props.displayBigEndianBitOrder ?? false\n  const text = stand ? '1' : '0'\n  const border = overflow\n    ? '1px dotted red'\n    : zeroPadding\n      ? '1px dotted gray'\n      : '1px solid #cccccc'\n  const margin = '0.5px'\n  const color = stand ? '#999999' : '#cccccc'\n  const backgroundColor = stand ? '#000000' : '#ffffff'\n  const fontFamily = 'monospace'\n  return (\n    <div style={{ display: 'inline-block', fontFamily, margin }}>\n      <div\n        style={{\n          color,\n          backgroundColor,\n          border,\n        }}\n      >\n        {text}\n      </div>\n      {displayLittleEndianBitOrder && (\n        <IndexLabel index={props.littleEndianBitOrder} />\n      )}\n      {displayBigEndianBitOrder && (\n        <IndexLabel index={props.bigEndianBitOrder} />\n      )}\n    </div>\n  )\n}\n\nconst IndexLabel = (props: { index: number }): JSX.Element => {\n  return (\n    <div\n      style={{\n        userSelect: 'none',\n        fontSize: '0.5em',\n        textAlign: 'center',\n        lineHeight: '1em',\n      }}\n    >\n      {props.index}\n    </div>\n  )\n}\n\nexport const DetailedBitString = (props: {\n  value: number\n  length?: number\n  showLittleEndianBitOrder?: boolean | undefined\n  showBigEndianBitOrder?: boolean | undefined\n}): JSX.Element => {\n  const showLittleEndianBitOrder = props.showLittleEndianBitOrder ?? false\n  const showBigEndianBitOrder = props.showBigEndianBitOrder ?? false\n  return (\n    <Bits\n      value={props.value}\n      length={props.length}\n      bitElement={(props) => (\n        <DetailedBit\n          {...props}\n          displayLittleEndianBitOrder={showLittleEndianBitOrder}\n          displayBigEndianBitOrder={showBigEndianBitOrder}\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;AAuBI,SACE,KADF;AAfG,IAAM,cAAc,CAAC,UAAyC;AACnE,QAAM,EAAE,OAAO,UAAU,YAAY,IAAI;AACzC,QAAM,8BAA8B,MAAM,+BAA+B;AACzE,QAAM,2BAA2B,MAAM,4BAA4B;AACnE,QAAM,OAAO,QAAQ,MAAM;AAC3B,QAAM,SAAS,WACX,mBACA,cACE,oBACA;AACN,QAAM,SAAS;AACf,QAAM,QAAQ,QAAQ,YAAY;AAClC,QAAM,kBAAkB,QAAQ,YAAY;AAC5C,QAAM,aAAa;AACnB,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,gBAAgB,YAAY,OAAO,GACxD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACC,+BACC,oBAAC,cAAW,OAAO,MAAM,sBAAsB;AAAA,IAEhD,4BACC,oBAAC,cAAW,OAAO,MAAM,mBAAmB;AAAA,KAEhD;AAEJ;AAEA,IAAM,aAAa,CAAC,UAA0C;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,MACd;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEO,IAAM,oBAAoB,CAAC,UAKf;AACjB,QAAM,2BAA2B,MAAM,4BAA4B;AACnE,QAAM,wBAAwB,MAAM,yBAAyB;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,MACd,YAAY,CAACA,WACX;AAAA,QAAC;AAAA;AAAA,UACE,GAAGA;AAAA,UACJ,6BAA6B;AAAA,UAC7B,0BAA0B;AAAA;AAAA,MAC5B;AAAA;AAAA,EAEJ;AAEJ;","names":["props"]}

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+export { BitElement, BitProps, Bits, EnhancedBitProps } from './Binary.mjs';
+export { Simple8BitString, SimpleBit } from './Simple.mjs';
+export { DetailedBit, DetailedBitProps, DetailedBitString } from './Detailed.mjs';
+import 'react';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { BitElement, BitProps, Bits, EnhancedBitProps } from './Binary.js';
+export { Simple8BitString, SimpleBit } from './Simple.js';
+export { DetailedBit, DetailedBitProps, DetailedBitString } from './Detailed.js';
+import 'react';

package/dist/index.js

@@ -0,0 +1,149 @@
+"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 src_exports = {};
+__export(src_exports, {
+  Bits: () => Bits,
+  DetailedBit: () => DetailedBit,
+  DetailedBitString: () => DetailedBitString,
+  Simple8BitString: () => Simple8BitString,
+  SimpleBit: () => SimpleBit
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Binary.tsx
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Bits = (props) => {
+  const { value, bitElement } = props;
+  const bits = (value | 0).toString(2).split("");
+  const bitLength = bits.length;
+  const length = props.length ?? bitLength;
+  const overflowLength = Math.max(0, bitLength - length);
+  const zeroPaddingLength = Math.max(0, length - bitLength);
+  const representLength = Math.max(length, bitLength);
+  const elements = Array.from(Array(representLength)).map((_, index) => {
+    const stand = bits[bitLength - representLength + index] === "1";
+    const bigEndianBitOrder = index;
+    const overflow = bigEndianBitOrder < overflowLength;
+    const zeroPadding = bigEndianBitOrder < zeroPaddingLength;
+    return import_react.default.createElement(bitElement, {
+      key: index,
+      stand,
+      overflow,
+      zeroPadding,
+      littleEndianBitOrder: representLength - index - 1,
+      bigEndianBitOrder
+    });
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: elements });
+};
+
+// src/Simple.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SimpleBit = (props) => {
+  const { stand, overflow } = props;
+  const text = overflow ?? false ? "" : stand ? "1" : "0";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: text });
+};
+var Simple8BitString = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Bits, { value: props.value, length: 8, bitElement: SimpleBit });
+};
+
+// src/Detailed.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DetailedBit = (props) => {
+  const { stand, overflow, zeroPadding } = props;
+  const displayLittleEndianBitOrder = props.displayLittleEndianBitOrder ?? false;
+  const displayBigEndianBitOrder = props.displayBigEndianBitOrder ?? false;
+  const text = stand ? "1" : "0";
+  const border = overflow ? "1px dotted red" : zeroPadding ? "1px dotted gray" : "1px solid #cccccc";
+  const margin = "0.5px";
+  const color = stand ? "#999999" : "#cccccc";
+  const backgroundColor = stand ? "#000000" : "#ffffff";
+  const fontFamily = "monospace";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "inline-block", fontFamily, margin }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          color,
+          backgroundColor,
+          border
+        },
+        children: text
+      }
+    ),
+    displayLittleEndianBitOrder && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IndexLabel, { index: props.littleEndianBitOrder }),
+    displayBigEndianBitOrder && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IndexLabel, { index: props.bigEndianBitOrder })
+  ] });
+};
+var IndexLabel = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        userSelect: "none",
+        fontSize: "0.5em",
+        textAlign: "center",
+        lineHeight: "1em"
+      },
+      children: props.index
+    }
+  );
+};
+var DetailedBitString = (props) => {
+  const showLittleEndianBitOrder = props.showLittleEndianBitOrder ?? false;
+  const showBigEndianBitOrder = props.showBigEndianBitOrder ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Bits,
+    {
+      value: props.value,
+      length: props.length,
+      bitElement: (props2) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        DetailedBit,
+        {
+          ...props2,
+          displayLittleEndianBitOrder: showLittleEndianBitOrder,
+          displayBigEndianBitOrder: showBigEndianBitOrder
+        }
+      )
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Bits,
+  DetailedBit,
+  DetailedBitString,
+  Simple8BitString,
+  SimpleBit
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Binary.tsx","../src/Simple.tsx","../src/Detailed.tsx"],"sourcesContent":["export * from './Binary'\nexport * from './Simple'\nexport * from './Detailed'\n","import React from 'react'\n\n/**\n * BitProps is a type that represents the properties of a bit.\n */\nexport type BitProps = {\n  stand: boolean\n}\n\n/**\n * EnhancedBitProps is a type that adds the following properties to BitProps.\n * - overflow: If true, this means that bit is out of range.\n * - zeroPadding: If true, this means that bit is padded with zero.\n */\nexport type EnhancedBitProps = BitProps & {\n  overflow?: boolean\n  zeroPadding?: boolean\n  littleEndianBitOrder: number\n  bigEndianBitOrder: number\n}\n\nexport type BitElement = React.FC<EnhancedBitProps>\n\n/**\n * Bit is a component that displays a bit.\n * This component supports the behavior of zero padding and overflow.\n * @param props\n * @returns A component that displays a bit.\n */\nexport const Bits = (props: {\n  value: number\n  bitElement: BitElement\n  length?: number | undefined\n}): JSX.Element => {\n  const { value, bitElement } = props\n  const bits = (value | 0).toString(2).split('')\n  const bitLength = bits.length\n  const length = props.length ?? bitLength\n  const overflowLength = Math.max(0, bitLength - length)\n  const zeroPaddingLength = Math.max(0, length - bitLength)\n  const representLength = Math.max(length, bitLength)\n  const elements = Array.from(Array(representLength)).map((_, index) => {\n    const stand = bits[bitLength - representLength + index] === '1'\n    const bigEndianBitOrder = index\n    const overflow = bigEndianBitOrder < overflowLength\n    const zeroPadding = bigEndianBitOrder < zeroPaddingLength\n    return React.createElement(bitElement, {\n      key: index,\n      stand,\n      overflow,\n      zeroPadding,\n      littleEndianBitOrder: representLength - index - 1,\n      bigEndianBitOrder,\n    })\n  })\n  return <>{elements}</>\n}\n","import React from 'react'\nimport { Bits, EnhancedBitProps } from './Binary'\n\n/**\n * SimpleBit is a simple component that displays a bit.\n * @param props\n * @returns A component that displays a bit.\n */\nexport const SimpleBit = (props: EnhancedBitProps): JSX.Element => {\n  const { stand, overflow } = props\n  const text = overflow ?? false ? '' : stand ? '1' : '0'\n  return <>{text}</>\n}\n\nexport const Simple8BitString = (props: { value: number }): JSX.Element => {\n  return <Bits value={props.value} length={8} bitElement={SimpleBit} />\n}\n","import React from 'react'\nimport { Bits, EnhancedBitProps } from './Binary'\n\nexport type DetailedBitProps = EnhancedBitProps & {\n  displayLittleEndianBitOrder?: boolean | undefined\n  displayBigEndianBitOrder?: boolean | undefined\n}\n\nexport const DetailedBit = (props: DetailedBitProps): JSX.Element => {\n  const { stand, overflow, zeroPadding } = props\n  const displayLittleEndianBitOrder = props.displayLittleEndianBitOrder ?? false\n  const displayBigEndianBitOrder = props.displayBigEndianBitOrder ?? false\n  const text = stand ? '1' : '0'\n  const border = overflow\n    ? '1px dotted red'\n    : zeroPadding\n      ? '1px dotted gray'\n      : '1px solid #cccccc'\n  const margin = '0.5px'\n  const color = stand ? '#999999' : '#cccccc'\n  const backgroundColor = stand ? '#000000' : '#ffffff'\n  const fontFamily = 'monospace'\n  return (\n    <div style={{ display: 'inline-block', fontFamily, margin }}>\n      <div\n        style={{\n          color,\n          backgroundColor,\n          border,\n        }}\n      >\n        {text}\n      </div>\n      {displayLittleEndianBitOrder && (\n        <IndexLabel index={props.littleEndianBitOrder} />\n      )}\n      {displayBigEndianBitOrder && (\n        <IndexLabel index={props.bigEndianBitOrder} />\n      )}\n    </div>\n  )\n}\n\nconst IndexLabel = (props: { index: number }): JSX.Element => {\n  return (\n    <div\n      style={{\n        userSelect: 'none',\n        fontSize: '0.5em',\n        textAlign: 'center',\n        lineHeight: '1em',\n      }}\n    >\n      {props.index}\n    </div>\n  )\n}\n\nexport const DetailedBitString = (props: {\n  value: number\n  length?: number\n  showLittleEndianBitOrder?: boolean | undefined\n  showBigEndianBitOrder?: boolean | undefined\n}): JSX.Element => {\n  const showLittleEndianBitOrder = props.showLittleEndianBitOrder ?? false\n  const showBigEndianBitOrder = props.showBigEndianBitOrder ?? false\n  return (\n    <Bits\n      value={props.value}\n      length={props.length}\n      bitElement={(props) => (\n        <DetailedBit\n          {...props}\n          displayLittleEndianBitOrder={showLittleEndianBitOrder}\n          displayBigEndianBitOrder={showBigEndianBitOrder}\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAuDT;AA1BF,IAAM,OAAO,CAAC,UAIF;AACjB,QAAM,EAAE,OAAO,WAAW,IAAI;AAC9B,QAAM,QAAQ,QAAQ,GAAG,SAAS,CAAC,EAAE,MAAM,EAAE;AAC7C,QAAM,YAAY,KAAK;AACvB,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,iBAAiB,KAAK,IAAI,GAAG,YAAY,MAAM;AACrD,QAAM,oBAAoB,KAAK,IAAI,GAAG,SAAS,SAAS;AACxD,QAAM,kBAAkB,KAAK,IAAI,QAAQ,SAAS;AAClD,QAAM,WAAW,MAAM,KAAK,MAAM,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AACpE,UAAM,QAAQ,KAAK,YAAY,kBAAkB,KAAK,MAAM;AAC5D,UAAM,oBAAoB;AAC1B,UAAM,WAAW,oBAAoB;AACrC,UAAM,cAAc,oBAAoB;AACxC,WAAO,aAAAA,QAAM,cAAc,YAAY;AAAA,MACrC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB,kBAAkB,QAAQ;AAAA,MAChD;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACD,SAAO,2EAAG,oBAAS;AACrB;;;AC7CS,IAAAC,sBAAA;AAHF,IAAM,YAAY,CAAC,UAAyC;AACjE,QAAM,EAAE,OAAO,SAAS,IAAI;AAC5B,QAAM,OAAO,YAAY,QAAQ,KAAK,QAAQ,MAAM;AACpD,SAAO,6EAAG,gBAAK;AACjB;AAEO,IAAM,mBAAmB,CAAC,UAA0C;AACzE,SAAO,6CAAC,QAAK,OAAO,MAAM,OAAO,QAAQ,GAAG,YAAY,WAAW;AACrE;;;ACOI,IAAAC,sBAAA;AAfG,IAAM,cAAc,CAAC,UAAyC;AACnE,QAAM,EAAE,OAAO,UAAU,YAAY,IAAI;AACzC,QAAM,8BAA8B,MAAM,+BAA+B;AACzE,QAAM,2BAA2B,MAAM,4BAA4B;AACnE,QAAM,OAAO,QAAQ,MAAM;AAC3B,QAAM,SAAS,WACX,mBACA,cACE,oBACA;AACN,QAAM,SAAS;AACf,QAAM,QAAQ,QAAQ,YAAY;AAClC,QAAM,kBAAkB,QAAQ,YAAY;AAC5C,QAAM,aAAa;AACnB,SACE,8CAAC,SAAI,OAAO,EAAE,SAAS,gBAAgB,YAAY,OAAO,GACxD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACC,+BACC,6CAAC,cAAW,OAAO,MAAM,sBAAsB;AAAA,IAEhD,4BACC,6CAAC,cAAW,OAAO,MAAM,mBAAmB;AAAA,KAEhD;AAEJ;AAEA,IAAM,aAAa,CAAC,UAA0C;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,MACd;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEO,IAAM,oBAAoB,CAAC,UAKf;AACjB,QAAM,2BAA2B,MAAM,4BAA4B;AACnE,QAAM,wBAAwB,MAAM,yBAAyB;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,MACd,YAAY,CAACC,WACX;AAAA,QAAC;AAAA;AAAA,UACE,GAAGA;AAAA,UACJ,6BAA6B;AAAA,UAC7B,0BAA0B;AAAA;AAAA,MAC5B;AAAA;AAAA,EAEJ;AAEJ;","names":["React","import_jsx_runtime","import_jsx_runtime","props"]}

package/dist/index.mjs

@@ -0,0 +1,19 @@
+import {
+  DetailedBit,
+  DetailedBitString
+} from "./chunk-WHSEFUQT.mjs";
+import {
+  Simple8BitString,
+  SimpleBit
+} from "./chunk-HPBKCHK2.mjs";
+import {
+  Bits
+} from "./chunk-SSBW6RTY.mjs";
+export {
+  Bits,
+  DetailedBit,
+  DetailedBitString,
+  Simple8BitString,
+  SimpleBit
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@kitsuyui/react-binary",
+  "version": "0.1.0",
+  "description": "Binary representation of number for React",
+  "license": "MIT",
+  "author": "Yui Kitsu <kitsuyui@kitsuyui.com>",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "scripts": {
+    "build": "tsup --config ../../tsup.config.mjs --clean",
+    "dev": "tsup --config ../../tsup.config.mjs --watch"
+  }
+}