@fuf-stack/pixels 0.1.2 → 0.2.1

package/dist/Button/index.js

@@ -1,11 +1,9 @@
 import {
   Button_default
-} from "../chunk-6QVKZ4AT.js";
+} from "../chunk-NFWS2SSN.js";
+import "../chunk-6QVKZ4AT.js";
 import "../chunk-ZFEVTQWW.js";
-
-// src/Button/index.ts
-var Button_default2 = Button_default;
 export {
-  Button_default2 as default
+  Button_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/index.ts"],"sourcesContent":["import type { ButtonProps } from './Button';\n\nimport Button from './Button';\n\nexport default Button;\n\nexport type { ButtonProps };\n"],"mappings":";;;;;;AAIA,IAAOA,kBAAQ;","names":["Button_default"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Json/Json.cjs

@@ -0,0 +1,204 @@
+"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/Json/Json.tsx
+var Json_exports = {};
+__export(Json_exports, {
+  default: () => Json_default
+});
+module.exports = __toCommonJS(Json_exports);
+var import_react = require("react");
+var import_fa = require("react-icons/fa");
+var import_react_json_view = __toESM(require("react-json-view"), 1);
+var import_classnames2 = __toESM(require("classnames"), 1);
+
+// src/Button/Button.tsx
+var import_button = require("@nextui-org/button");
+var import_classnames = __toESM(require("classnames"), 1);
+
+// src/Button/subcomponents/LoadingSpinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LoadingSpinner_default = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    className: "animate-spin h-5 w-5 text-current",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "circle",
+        {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          className: "opacity-75",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+
+// src/Button/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = ({
+  ariaLabel = void 0,
+  children = void 0,
+  className = void 0,
+  color = "default",
+  disabled = false,
+  icon = void 0,
+  loading = false,
+  onClick = void 0,
+  size = void 0,
+  testId = void 0,
+  type = void 0,
+  variant = "solid",
+  ...passthrouhProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_button.Button,
+    {
+      "aria-label": ariaLabel,
+      className: (0, import_classnames.default)(className),
+      color,
+      "data-testid": testId,
+      isDisabled: disabled,
+      isIconOnly: !!(icon && !children),
+      isLoading: loading,
+      onPress: onClick,
+      size,
+      spinner: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingSpinner_default, {}),
+      type,
+      variant,
+      ...passthrouhProps,
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+};
+var Button_default = Button;
+
+// src/Button/index.ts
+var Button_default2 = Button_default;
+
+// src/Json/Json.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var getValue = (value) => {
+  if (typeof value === "string") {
+    return JSON.parse(value);
+  }
+  if (typeof value === "object") {
+    return value;
+  }
+  throw new Error(`${typeof value} can not be visualized`);
+};
+var Json = ({ className = null, collapsed = false, value }) => {
+  const isDarkMode = document.body.classList.contains("dark");
+  let content = null;
+  let error = null;
+  const [showDetails, setShowDetails] = (0, import_react.useState)(false);
+  try {
+    content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_json_view.default,
+      {
+        theme: isDarkMode ? "tomorrow" : "rjv-default",
+        style: {
+          fontSize: "12px",
+          backgroundColor: "unset"
+        },
+        name: false,
+        displayDataTypes: false,
+        src: getValue(value),
+        collapsed
+      }
+    );
+  } catch (err) {
+    error = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: "mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger",
+        role: "alert",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full justify-between gap-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa.FaTimesCircle, { className: "mr-2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-medium", children: "Failed to parse JSON data" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Button_default2,
+              {
+                color: "danger",
+                size: "sm",
+                variant: "light",
+                onClick: () => setShowDetails(!showDetails),
+                children: showDetails ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa.FaChevronUp, {}),
+                  " Hide Details"
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa.FaChevronDown, {}),
+                  " Show Details"
+                ] })
+              }
+            )
+          ] }),
+          showDetails && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-4 w-full text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Error:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("pre", { children: [
+                err?.name,
+                ": ",
+                err?.message
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Data:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { children: typeof value !== "string" ? JSON.stringify(value, null, 2) : value })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames2.default)(className), children: error || content });
+};
+var Json_default = Json;
+//# sourceMappingURL=Json.cjs.map

package/dist/Json/Json.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Json/Json.tsx","../../src/Button/Button.tsx","../../src/Button/subcomponents/LoadingSpinner.tsx","../../src/Button/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport ReactJson from 'react-json-view';\n\nimport cn from 'classnames';\n\nimport Button from '../Button';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n  if (typeof value === 'string') {\n    return JSON.parse(value);\n  }\n  if (typeof value === 'object') {\n    return value;\n  }\n  throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n  /** CSS class name */\n  className?: string | string[] | null;\n  /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n  collapsed?: boolean | number;\n  /** Object to be visualized JSON string or object */\n  value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n  const isDarkMode = document.body.classList.contains('dark');\n\n  let content: ReactNode = null;\n  let error: ReactNode = null;\n\n  const [showDetails, setShowDetails] = useState(false);\n\n  try {\n    content = (\n      <ReactJson\n        theme={isDarkMode ? 'tomorrow' : 'rjv-default'}\n        style={{\n          fontSize: '12px',\n          backgroundColor: 'unset',\n        }}\n        name={false}\n        displayDataTypes={false}\n        src={getValue(value)}\n        collapsed={collapsed}\n      />\n    );\n  } catch (err) {\n    error = (\n      <div\n        className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n        role=\"alert\"\n      >\n        <div className=\"flex w-full justify-between gap-6\">\n          <div className=\"flex items-center\">\n            <FaTimesCircle className=\"mr-2\" />\n            <span className=\"font-medium\">Failed to parse JSON data</span>\n          </div>\n          <Button\n            color=\"danger\"\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => setShowDetails(!showDetails)}\n          >\n            {showDetails ? (\n              <>\n                <FaChevronUp /> Hide Details\n              </>\n            ) : (\n              <>\n                <FaChevronDown /> Show Details\n              </>\n            )}\n          </Button>\n        </div>\n        {showDetails && (\n          <div className=\"mt-4 w-full text-left\">\n            <div>\n              <strong>Error:</strong>\n              <pre>\n                {/* @ts-expect-error is ok */}\n                {err?.name}: {err?.message}\n              </pre>\n            </div>\n            <div className=\"mt-4\">\n              <strong>Data:</strong>\n              <pre>\n                {typeof value !== 'string'\n                  ? JSON.stringify(value, null, 2)\n                  : value}\n              </pre>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n  return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n","import type { ButtonProps as NextButtonProps } from '@nextui-org/button';\nimport type { ReactNode } from 'react';\n\nimport { Button as NextButton } from '@nextui-org/button';\nimport cn from 'classnames';\n\nimport LoadingSpinner from './subcomponents/LoadingSpinner';\n\nexport interface ButtonProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string | string[];\n  /** next ui button color  */\n  color?: NextButtonProps['color'];\n  /** disables function of the button. */\n  disabled?: boolean;\n  /** If set loading animation is shown */\n  loading?: boolean;\n  /** optional icon */\n  icon?: ReactNode;\n  /** on click event */\n  onClick?: NextButtonProps['onPress'];\n  /** 3 size options */\n  size?: NextButtonProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** sets the button type. */\n  type?: 'button' | 'submit' | 'reset' | undefined;\n  /** next ui button variants */\n  variant?: NextButtonProps['variant'];\n}\n\n/**\n * Button component based on [NextUI Button](https://nextui.org/docs/components/button)\n */\nconst Button = ({\n  ariaLabel = undefined,\n  children = undefined,\n  className = undefined,\n  color = 'default',\n  disabled = false,\n  icon = undefined,\n  loading = false,\n  onClick = undefined,\n  size = undefined,\n  testId = undefined,\n  type = undefined,\n  variant = 'solid',\n  ...passthrouhProps\n}: ButtonProps) => {\n  return (\n    <NextButton\n      aria-label={ariaLabel}\n      className={cn(className)}\n      color={color}\n      data-testid={testId}\n      isDisabled={disabled}\n      isIconOnly={!!(icon && !children)}\n      isLoading={loading}\n      onPress={onClick}\n      size={size}\n      spinner={<LoadingSpinner />}\n      type={type}\n      variant={variant}\n      {...passthrouhProps}\n    >\n      {icon}\n      {children}\n    </NextButton>\n  );\n};\n\nexport default Button;\n","/**\n * svg loading spinner for button\n * @see https://nextui.org/docs/components/button#loading\n * */\nexport default () => (\n  <svg\n    className=\"animate-spin h-5 w-5 text-current\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <circle\n      className=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    />\n    <path\n      className=\"opacity-75\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n","import type { ButtonProps } from './Button';\n\nimport Button from './Button';\n\nexport default Button;\n\nexport type { ButtonProps };\n"],"mappings":"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","names":["import_classnames","import_jsx_runtime","NextButton","cn","Button_default","import_jsx_runtime","ReactJson","Button_default","cn"]}

package/dist/Json/Json.d.cts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface JsonProps {
+    /** CSS class name */
+    className?: string | string[] | null;
+    /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */
+    collapsed?: boolean | number;
+    /** Object to be visualized JSON string or object */
+    value: string | object;
+}
+/**
+ * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)
+ */
+declare const Json: ({ className, collapsed, value }: JsonProps) => react_jsx_runtime.JSX.Element;
+
+export { type JsonProps, Json as default };

package/dist/Json/Json.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface JsonProps {
+    /** CSS class name */
+    className?: string | string[] | null;
+    /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */
+    collapsed?: boolean | number;
+    /** Object to be visualized JSON string or object */
+    value: string | object;
+}
+/**
+ * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)
+ */
+declare const Json: ({ className, collapsed, value }: JsonProps) => react_jsx_runtime.JSX.Element;
+
+export { type JsonProps, Json as default };

package/dist/Json/Json.js

@@ -0,0 +1,10 @@
+import {
+  Json_default
+} from "../chunk-3EFVWEGP.js";
+import "../chunk-NFWS2SSN.js";
+import "../chunk-6QVKZ4AT.js";
+import "../chunk-ZFEVTQWW.js";
+export {
+  Json_default as default
+};
+//# sourceMappingURL=Json.js.map

package/dist/Json/Json.js.map

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

package/dist/Json/index.cjs

@@ -0,0 +1,209 @@
+"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/Json/index.ts
+var Json_exports = {};
+__export(Json_exports, {
+  default: () => Json_default2
+});
+module.exports = __toCommonJS(Json_exports);
+
+// src/Json/Json.tsx
+var import_react = require("react");
+var import_fa = require("react-icons/fa");
+var import_react_json_view = __toESM(require("react-json-view"), 1);
+var import_classnames2 = __toESM(require("classnames"), 1);
+
+// src/Button/Button.tsx
+var import_button = require("@nextui-org/button");
+var import_classnames = __toESM(require("classnames"), 1);
+
+// src/Button/subcomponents/LoadingSpinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LoadingSpinner_default = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    className: "animate-spin h-5 w-5 text-current",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "circle",
+        {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          className: "opacity-75",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+
+// src/Button/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = ({
+  ariaLabel = void 0,
+  children = void 0,
+  className = void 0,
+  color = "default",
+  disabled = false,
+  icon = void 0,
+  loading = false,
+  onClick = void 0,
+  size = void 0,
+  testId = void 0,
+  type = void 0,
+  variant = "solid",
+  ...passthrouhProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_button.Button,
+    {
+      "aria-label": ariaLabel,
+      className: (0, import_classnames.default)(className),
+      color,
+      "data-testid": testId,
+      isDisabled: disabled,
+      isIconOnly: !!(icon && !children),
+      isLoading: loading,
+      onPress: onClick,
+      size,
+      spinner: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingSpinner_default, {}),
+      type,
+      variant,
+      ...passthrouhProps,
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+};
+var Button_default = Button;
+
+// src/Button/index.ts
+var Button_default2 = Button_default;
+
+// src/Json/Json.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var getValue = (value) => {
+  if (typeof value === "string") {
+    return JSON.parse(value);
+  }
+  if (typeof value === "object") {
+    return value;
+  }
+  throw new Error(`${typeof value} can not be visualized`);
+};
+var Json = ({ className = null, collapsed = false, value }) => {
+  const isDarkMode = document.body.classList.contains("dark");
+  let content = null;
+  let error = null;
+  const [showDetails, setShowDetails] = (0, import_react.useState)(false);
+  try {
+    content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_json_view.default,
+      {
+        theme: isDarkMode ? "tomorrow" : "rjv-default",
+        style: {
+          fontSize: "12px",
+          backgroundColor: "unset"
+        },
+        name: false,
+        displayDataTypes: false,
+        src: getValue(value),
+        collapsed
+      }
+    );
+  } catch (err) {
+    error = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: "mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger",
+        role: "alert",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full justify-between gap-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa.FaTimesCircle, { className: "mr-2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-medium", children: "Failed to parse JSON data" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              Button_default2,
+              {
+                color: "danger",
+                size: "sm",
+                variant: "light",
+                onClick: () => setShowDetails(!showDetails),
+                children: showDetails ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa.FaChevronUp, {}),
+                  " Hide Details"
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_fa.FaChevronDown, {}),
+                  " Show Details"
+                ] })
+              }
+            )
+          ] }),
+          showDetails && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-4 w-full text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Error:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("pre", { children: [
+                err?.name,
+                ": ",
+                err?.message
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: "Data:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { children: typeof value !== "string" ? JSON.stringify(value, null, 2) : value })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_classnames2.default)(className), children: error || content });
+};
+var Json_default = Json;
+
+// src/Json/index.ts
+var Json_default2 = Json_default;
+//# sourceMappingURL=index.cjs.map

package/dist/Json/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Json/index.ts","../../src/Json/Json.tsx","../../src/Button/Button.tsx","../../src/Button/subcomponents/LoadingSpinner.tsx","../../src/Button/index.ts"],"sourcesContent":["import Json from './Json';\n\nexport default Json;\n","import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport ReactJson from 'react-json-view';\n\nimport cn from 'classnames';\n\nimport Button from '../Button';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n  if (typeof value === 'string') {\n    return JSON.parse(value);\n  }\n  if (typeof value === 'object') {\n    return value;\n  }\n  throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n  /** CSS class name */\n  className?: string | string[] | null;\n  /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n  collapsed?: boolean | number;\n  /** Object to be visualized JSON string or object */\n  value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n  const isDarkMode = document.body.classList.contains('dark');\n\n  let content: ReactNode = null;\n  let error: ReactNode = null;\n\n  const [showDetails, setShowDetails] = useState(false);\n\n  try {\n    content = (\n      <ReactJson\n        theme={isDarkMode ? 'tomorrow' : 'rjv-default'}\n        style={{\n          fontSize: '12px',\n          backgroundColor: 'unset',\n        }}\n        name={false}\n        displayDataTypes={false}\n        src={getValue(value)}\n        collapsed={collapsed}\n      />\n    );\n  } catch (err) {\n    error = (\n      <div\n        className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n        role=\"alert\"\n      >\n        <div className=\"flex w-full justify-between gap-6\">\n          <div className=\"flex items-center\">\n            <FaTimesCircle className=\"mr-2\" />\n            <span className=\"font-medium\">Failed to parse JSON data</span>\n          </div>\n          <Button\n            color=\"danger\"\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => setShowDetails(!showDetails)}\n          >\n            {showDetails ? (\n              <>\n                <FaChevronUp /> Hide Details\n              </>\n            ) : (\n              <>\n                <FaChevronDown /> Show Details\n              </>\n            )}\n          </Button>\n        </div>\n        {showDetails && (\n          <div className=\"mt-4 w-full text-left\">\n            <div>\n              <strong>Error:</strong>\n              <pre>\n                {/* @ts-expect-error is ok */}\n                {err?.name}: {err?.message}\n              </pre>\n            </div>\n            <div className=\"mt-4\">\n              <strong>Data:</strong>\n              <pre>\n                {typeof value !== 'string'\n                  ? JSON.stringify(value, null, 2)\n                  : value}\n              </pre>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n  return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n","import type { ButtonProps as NextButtonProps } from '@nextui-org/button';\nimport type { ReactNode } from 'react';\n\nimport { Button as NextButton } from '@nextui-org/button';\nimport cn from 'classnames';\n\nimport LoadingSpinner from './subcomponents/LoadingSpinner';\n\nexport interface ButtonProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string | string[];\n  /** next ui button color  */\n  color?: NextButtonProps['color'];\n  /** disables function of the button. */\n  disabled?: boolean;\n  /** If set loading animation is shown */\n  loading?: boolean;\n  /** optional icon */\n  icon?: ReactNode;\n  /** on click event */\n  onClick?: NextButtonProps['onPress'];\n  /** 3 size options */\n  size?: NextButtonProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** sets the button type. */\n  type?: 'button' | 'submit' | 'reset' | undefined;\n  /** next ui button variants */\n  variant?: NextButtonProps['variant'];\n}\n\n/**\n * Button component based on [NextUI Button](https://nextui.org/docs/components/button)\n */\nconst Button = ({\n  ariaLabel = undefined,\n  children = undefined,\n  className = undefined,\n  color = 'default',\n  disabled = false,\n  icon = undefined,\n  loading = false,\n  onClick = undefined,\n  size = undefined,\n  testId = undefined,\n  type = undefined,\n  variant = 'solid',\n  ...passthrouhProps\n}: ButtonProps) => {\n  return (\n    <NextButton\n      aria-label={ariaLabel}\n      className={cn(className)}\n      color={color}\n      data-testid={testId}\n      isDisabled={disabled}\n      isIconOnly={!!(icon && !children)}\n      isLoading={loading}\n      onPress={onClick}\n      size={size}\n      spinner={<LoadingSpinner />}\n      type={type}\n      variant={variant}\n      {...passthrouhProps}\n    >\n      {icon}\n      {children}\n    </NextButton>\n  );\n};\n\nexport default Button;\n","/**\n * svg loading spinner for button\n * @see https://nextui.org/docs/components/button#loading\n * */\nexport default () => (\n  <svg\n    className=\"animate-spin h-5 w-5 text-current\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <circle\n      className=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    />\n    <path\n      className=\"opacity-75\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n","import type { ButtonProps } from './Button';\n\nimport Button from './Button';\n\nexport default Button;\n\nexport type { ButtonProps };\n"],"mappings":"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","names":["Json_default","import_classnames","import_jsx_runtime","NextButton","cn","Button_default","import_jsx_runtime","ReactJson","Button_default","cn","Json_default"]}

package/dist/Json/index.d.cts

@@ -0,0 +1,6 @@
+import Json from './Json.cjs';
+import 'react/jsx-runtime';
+
+
+
+export { Json as default };

package/dist/Json/index.d.ts

@@ -0,0 +1,6 @@
+import Json from './Json.js';
+import 'react/jsx-runtime';
+
+
+
+export { Json as default };

package/dist/Json/index.js

@@ -0,0 +1,13 @@
+import {
+  Json_default
+} from "../chunk-3EFVWEGP.js";
+import "../chunk-NFWS2SSN.js";
+import "../chunk-6QVKZ4AT.js";
+import "../chunk-ZFEVTQWW.js";
+
+// src/Json/index.ts
+var Json_default2 = Json_default;
+export {
+  Json_default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/Json/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Json/index.ts"],"sourcesContent":["import Json from './Json';\n\nexport default Json;\n"],"mappings":";;;;;;;;AAEA,IAAOA,gBAAQ;","names":["Json_default"]}

package/dist/chunk-3EFVWEGP.js

@@ -0,0 +1,94 @@
+import {
+  Button_default
+} from "./chunk-NFWS2SSN.js";
+
+// src/Json/Json.tsx
+import { useState } from "react";
+import { FaChevronDown, FaChevronUp, FaTimesCircle } from "react-icons/fa";
+import ReactJson from "react-json-view";
+import cn from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var getValue = (value) => {
+  if (typeof value === "string") {
+    return JSON.parse(value);
+  }
+  if (typeof value === "object") {
+    return value;
+  }
+  throw new Error(`${typeof value} can not be visualized`);
+};
+var Json = ({ className = null, collapsed = false, value }) => {
+  const isDarkMode = document.body.classList.contains("dark");
+  let content = null;
+  let error = null;
+  const [showDetails, setShowDetails] = useState(false);
+  try {
+    content = /* @__PURE__ */ jsx(
+      ReactJson,
+      {
+        theme: isDarkMode ? "tomorrow" : "rjv-default",
+        style: {
+          fontSize: "12px",
+          backgroundColor: "unset"
+        },
+        name: false,
+        displayDataTypes: false,
+        src: getValue(value),
+        collapsed
+      }
+    );
+  } catch (err) {
+    error = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger",
+        role: "alert",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between gap-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsx(FaTimesCircle, { className: "mr-2" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Failed to parse JSON data" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button_default,
+              {
+                color: "danger",
+                size: "sm",
+                variant: "light",
+                onClick: () => setShowDetails(!showDetails),
+                children: showDetails ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(FaChevronUp, {}),
+                  " Hide Details"
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(FaChevronDown, {}),
+                  " Show Details"
+                ] })
+              }
+            )
+          ] }),
+          showDetails && /* @__PURE__ */ jsxs("div", { className: "mt-4 w-full text-left", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("strong", { children: "Error:" }),
+              /* @__PURE__ */ jsxs("pre", { children: [
+                err?.name,
+                ": ",
+                err?.message
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+              /* @__PURE__ */ jsx("strong", { children: "Data:" }),
+              /* @__PURE__ */ jsx("pre", { children: typeof value !== "string" ? JSON.stringify(value, null, 2) : value })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(className), children: error || content });
+};
+var Json_default = Json;
+
+export {
+  Json_default
+};
+//# sourceMappingURL=chunk-3EFVWEGP.js.map

package/dist/chunk-3EFVWEGP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Json/Json.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport ReactJson from 'react-json-view';\n\nimport cn from 'classnames';\n\nimport Button from '../Button';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n  if (typeof value === 'string') {\n    return JSON.parse(value);\n  }\n  if (typeof value === 'object') {\n    return value;\n  }\n  throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n  /** CSS class name */\n  className?: string | string[] | null;\n  /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n  collapsed?: boolean | number;\n  /** Object to be visualized JSON string or object */\n  value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n  const isDarkMode = document.body.classList.contains('dark');\n\n  let content: ReactNode = null;\n  let error: ReactNode = null;\n\n  const [showDetails, setShowDetails] = useState(false);\n\n  try {\n    content = (\n      <ReactJson\n        theme={isDarkMode ? 'tomorrow' : 'rjv-default'}\n        style={{\n          fontSize: '12px',\n          backgroundColor: 'unset',\n        }}\n        name={false}\n        displayDataTypes={false}\n        src={getValue(value)}\n        collapsed={collapsed}\n      />\n    );\n  } catch (err) {\n    error = (\n      <div\n        className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n        role=\"alert\"\n      >\n        <div className=\"flex w-full justify-between gap-6\">\n          <div className=\"flex items-center\">\n            <FaTimesCircle className=\"mr-2\" />\n            <span className=\"font-medium\">Failed to parse JSON data</span>\n          </div>\n          <Button\n            color=\"danger\"\n            size=\"sm\"\n            variant=\"light\"\n            onClick={() => setShowDetails(!showDetails)}\n          >\n            {showDetails ? (\n              <>\n                <FaChevronUp /> Hide Details\n              </>\n            ) : (\n              <>\n                <FaChevronDown /> Show Details\n              </>\n            )}\n          </Button>\n        </div>\n        {showDetails && (\n          <div className=\"mt-4 w-full text-left\">\n            <div>\n              <strong>Error:</strong>\n              <pre>\n                {/* @ts-expect-error is ok */}\n                {err?.name}: {err?.message}\n              </pre>\n            </div>\n            <div className=\"mt-4\">\n              <strong>Data:</strong>\n              <pre>\n                {typeof value !== 'string'\n                  ? JSON.stringify(value, null, 2)\n                  : value}\n              </pre>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n  return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n"],"mappings":";;;;;AAEA,SAAS,gBAAgB;AACzB,SAAS,eAAe,aAAa,qBAAqB;AAC1D,OAAO,eAAe;AAEtB,OAAO,QAAQ;AAuCT,SA8BQ,UA9BR,KAmBI,YAnBJ;AAhCN,IAAM,WAAW,CAAC,UAA2B;AAC3C,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AACA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,QAAM,IAAI,MAAM,GAAG,OAAO,KAAK,wBAAwB;AACzD;AAcA,IAAM,OAAO,CAAC,EAAE,YAAY,MAAM,YAAY,OAAO,MAAM,MAAiB;AAC1E,QAAM,aAAa,SAAS,KAAK,UAAU,SAAS,MAAM;AAE1D,MAAI,UAAqB;AACzB,MAAI,QAAmB;AAEvB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,MAAI;AACF,cACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,aAAa,aAAa;AAAA,QACjC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,iBAAiB;AAAA,QACnB;AAAA,QACA,MAAM;AAAA,QACN,kBAAkB;AAAA,QAClB,KAAK,SAAS,KAAK;AAAA,QACnB;AAAA;AAAA,IACF;AAAA,EAEJ,SAAS,KAAK;AACZ,YACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QAEL;AAAA,+BAAC,SAAI,WAAU,qCACb;AAAA,iCAAC,SAAI,WAAU,qBACb;AAAA,kCAAC,iBAAc,WAAU,QAAO;AAAA,cAChC,oBAAC,UAAK,WAAU,eAAc,uCAAyB;AAAA,eACzD;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,SAAS,MAAM,eAAe,CAAC,WAAW;AAAA,gBAEzC,wBACC,iCACE;AAAA,sCAAC,eAAY;AAAA,kBAAE;AAAA,mBACjB,IAEA,iCACE;AAAA,sCAAC,iBAAc;AAAA,kBAAE;AAAA,mBACnB;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA,UACC,eACC,qBAAC,SAAI,WAAU,yBACb;AAAA,iCAAC,SACC;AAAA,kCAAC,YAAO,oBAAM;AAAA,cACd,qBAAC,SAEE;AAAA,qBAAK;AAAA,gBAAK;AAAA,gBAAG,KAAK;AAAA,iBACrB;AAAA,eACF;AAAA,YACA,qBAAC,SAAI,WAAU,QACb;AAAA,kCAAC,YAAO,mBAAK;AAAA,cACb,oBAAC,SACE,iBAAO,UAAU,WACd,KAAK,UAAU,OAAO,MAAM,CAAC,IAC7B,OACN;AAAA,eACF;AAAA,aACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACA,SAAO,oBAAC,SAAI,WAAW,GAAG,SAAS,GAAI,mBAAS,SAAQ;AAC1D;AAEA,IAAO,eAAQ;","names":[]}

package/dist/chunk-NFWS2SSN.js

@@ -0,0 +1,11 @@
+import {
+  Button_default
+} from "./chunk-6QVKZ4AT.js";
+
+// src/Button/index.ts
+var Button_default2 = Button_default;
+
+export {
+  Button_default2 as Button_default
+};
+//# sourceMappingURL=chunk-NFWS2SSN.js.map

package/dist/chunk-NFWS2SSN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button/index.ts"],"sourcesContent":["import type { ButtonProps } from './Button';\n\nimport Button from './Button';\n\nexport default Button;\n\nexport type { ButtonProps };\n"],"mappings":";;;;;AAIA,IAAOA,kBAAQ;","names":["Button_default"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fuf-stack/pixels",
   "description": "fuf react component library",
   "author": "Hannes Tiede",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "type": "module",
   "exports": {
     "./": "./dist/"
@@ -56,8 +56,8 @@
     "@types/debug": "4.1.12",
     "@types/react": "18.2.69",
     "@types/react-dom": "18.2.22",
-    "storybook-config": "0.0.1",
-    "tailwind-config": "0.0.1"
+    "tailwind-config": "0.0.1",
+    "storybook-config": "0.0.1"
   },
   "scripts": {
     "build": "rm -rf ./dist && tsup",