@helpwave/hightide 0.0.12 → 0.0.15

package/dist/components/HideableContentSection.js

@@ -1,15 +1,70 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import clsx from 'clsx';
-/**
- * A Component to hide and show
- */
-export const HideableContentSection = ({ initiallyOpen = true, disabled, children, header }) => {
-    const [open, setOpen] = useState(initiallyOpen);
-    return (_jsxs("div", { className: "col", children: [_jsxs("div", { className: clsx('row justify-between items-center', { 'cursor-pointer': !disabled }), onClick: () => {
-                    if (!disabled) {
-                        setOpen(!open);
-                    }
-                }, children: [_jsx("div", { children: header }), !disabled && (open ? _jsx(ChevronUp, {}) : _jsx(ChevronDown, {}))] }), open && (_jsx("div", { children: children }))] }));
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/HideableContentSection.tsx
+var HideableContentSection_exports = {};
+__export(HideableContentSection_exports, {
+  HideableContentSection: () => HideableContentSection
+});
+module.exports = __toCommonJS(HideableContentSection_exports);
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var HideableContentSection = ({
+  initiallyOpen = true,
+  disabled,
+  children,
+  header
+}) => {
+  const [open, setOpen] = (0, import_react.useState)(initiallyOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.default)("row justify-between items-center", { "cursor-pointer": !disabled }),
+        onClick: () => {
+          if (!disabled) {
+            setOpen(!open);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: header }),
+          !disabled && (open ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, {}))
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HideableContentSection
+});
+//# sourceMappingURL=HideableContentSection.js.map

package/dist/components/HideableContentSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/HideableContentSection.tsx"],"sourcesContent":["import { useState, type PropsWithChildren, type ReactNode } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\n\nexport type HideableContentSectionProps = PropsWithChildren & {\n  initiallyOpen?: boolean,\n  disabled: boolean,\n  header: ReactNode,\n}\n\n/**\n * A Component to hide and show\n */\nexport const HideableContentSection = ({\n  initiallyOpen = true,\n  disabled,\n  children,\n  header\n}: HideableContentSectionProps) => {\n  const [open, setOpen] = useState(initiallyOpen)\n  return (\n    <div className=\"col\">\n      <div\n        className={clsx('row justify-between items-center', { 'cursor-pointer': !disabled })}\n        onClick={() => {\n          if (!disabled) {\n            setOpen(!open)\n          }\n        }}\n      >\n        <div>\n          {header}\n        </div>\n        {!disabled && (open ? <ChevronUp/> : <ChevronDown/>)}\n      </div>\n      {open && (\n        <div>\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiE;AACjE,0BAAuC;AACvC,kBAAiB;AAoBX;AATC,IAAM,yBAAyB,CAAC;AAAA,EACrC,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,MAAmC;AACjC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,aAAa;AAC9C,SACE,6CAAC,SAAI,WAAU,OACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,YAAAA,SAAK,oCAAoC,EAAE,kBAAkB,CAAC,SAAS,CAAC;AAAA,QACnF,SAAS,MAAM;AACb,cAAI,CAAC,UAAU;AACb,oBAAQ,CAAC,IAAI;AAAA,UACf;AAAA,QACF;AAAA,QAEA;AAAA,sDAAC,SACE,kBACH;AAAA,UACC,CAAC,aAAa,OAAO,4CAAC,iCAAS,IAAK,4CAAC,mCAAW;AAAA;AAAA;AAAA,IACnD;AAAA,IACC,QACC,4CAAC,SACE,UACH;AAAA,KAEJ;AAEJ;","names":["clsx"]}

package/dist/components/HideableContentSection.mjs

@@ -0,0 +1,35 @@
+// src/components/HideableContentSection.tsx
+import { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HideableContentSection = ({
+  initiallyOpen = true,
+  disabled,
+  children,
+  header
+}) => {
+  const [open, setOpen] = useState(initiallyOpen);
+  return /* @__PURE__ */ jsxs("div", { className: "col", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx("row justify-between items-center", { "cursor-pointer": !disabled }),
+        onClick: () => {
+          if (!disabled) {
+            setOpen(!open);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { children: header }),
+          !disabled && (open ? /* @__PURE__ */ jsx(ChevronUp, {}) : /* @__PURE__ */ jsx(ChevronDown, {}))
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { children })
+  ] });
+};
+export {
+  HideableContentSection
+};
+//# sourceMappingURL=HideableContentSection.mjs.map

package/dist/components/HideableContentSection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/HideableContentSection.tsx"],"sourcesContent":["import { useState, type PropsWithChildren, type ReactNode } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\n\nexport type HideableContentSectionProps = PropsWithChildren & {\n  initiallyOpen?: boolean,\n  disabled: boolean,\n  header: ReactNode,\n}\n\n/**\n * A Component to hide and show\n */\nexport const HideableContentSection = ({\n  initiallyOpen = true,\n  disabled,\n  children,\n  header\n}: HideableContentSectionProps) => {\n  const [open, setOpen] = useState(initiallyOpen)\n  return (\n    <div className=\"col\">\n      <div\n        className={clsx('row justify-between items-center', { 'cursor-pointer': !disabled })}\n        onClick={() => {\n          if (!disabled) {\n            setOpen(!open)\n          }\n        }}\n      >\n        <div>\n          {header}\n        </div>\n        {!disabled && (open ? <ChevronUp/> : <ChevronDown/>)}\n      </div>\n      {open && (\n        <div>\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,gBAAwD;AACjE,SAAS,aAAa,iBAAiB;AACvC,OAAO,UAAU;AAoBX,SAQE,KARF;AATC,IAAM,yBAAyB,CAAC;AAAA,EACrC,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AACF,MAAmC;AACjC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,aAAa;AAC9C,SACE,qBAAC,SAAI,WAAU,OACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,oCAAoC,EAAE,kBAAkB,CAAC,SAAS,CAAC;AAAA,QACnF,SAAS,MAAM;AACb,cAAI,CAAC,UAAU;AACb,oBAAQ,CAAC,IAAI;AAAA,UACf;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,SACE,kBACH;AAAA,UACC,CAAC,aAAa,OAAO,oBAAC,aAAS,IAAK,oBAAC,eAAW;AAAA;AAAA;AAAA,IACnD;AAAA,IACC,QACC,oBAAC,SACE,UACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/InputGroup.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+type InputGroupProps = PropsWithChildren<{
+    title: string;
+    expanded?: boolean;
+    isExpandable?: boolean;
+    disabled?: boolean;
+    onChange?: (value: boolean) => void;
+    className?: string;
+}>;
+/**
+ * A Component for layouting inputs in an expandable group
+ */
+declare const InputGroup: ({ children, title, expanded, isExpandable, disabled, onChange, className, }: InputGroupProps) => react_jsx_runtime.JSX.Element;
+
+export { InputGroup, type InputGroupProps };

package/dist/components/InputGroup.d.ts

@@ -1,5 +1,7 @@
-import type { PropsWithChildren } from 'react';
-export type InputGroupProps = PropsWithChildren<{
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+type InputGroupProps = PropsWithChildren<{
     title: string;
     expanded?: boolean;
     isExpandable?: boolean;
@@ -10,4 +12,6 @@ export type InputGroupProps = PropsWithChildren<{
 /**
  * A Component for layouting inputs in an expandable group
  */
-export declare const InputGroup: ({ children, title, expanded, isExpandable, disabled, onChange, className, }: InputGroupProps) => import("react/jsx-runtime").JSX.Element;
+declare const InputGroup: ({ children, title, expanded, isExpandable, disabled, onChange, className, }: InputGroupProps) => react_jsx_runtime.JSX.Element;
+
+export { InputGroup, type InputGroupProps };

package/dist/components/InputGroup.js

@@ -1,33 +1,97 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import clsx from 'clsx';
-import { noop } from '../util/noop';
-/**
- * A Component for layouting inputs in an expandable group
- */
-export const InputGroup = ({ children, title, expanded = true, isExpandable = true, disabled = false, onChange = noop, className = '', }) => {
-    const [isExpanded, setIsExpanded] = useState(expanded);
-    useEffect(() => {
-        setIsExpanded(expanded);
-    }, [expanded]);
-    return (_jsxs("div", { className: clsx('col gap-y-4 p-4 bg-white rounded-xl', className), children: [_jsxs("div", { className: clsx('row justify-between items-center', {
-                    'cursor-pointer': isExpandable && !disabled,
-                    'cursor-not-allowed': disabled,
-                }, {
-                    'text-primary': !disabled,
-                    'text-primary/40': disabled
-                }), onClick: () => {
-                    if (!isExpandable) {
-                        return;
-                    }
-                    const updatedIsExpanded = !isExpanded;
-                    onChange(updatedIsExpanded);
-                    setIsExpanded(updatedIsExpanded);
-                }, children: [_jsx("span", { className: "textstyle-title-md", children: title }), _jsx("div", { className: clsx('rounded-full text-white w-6 h-6', {
-                            'bg-primary': (isExpandable && !disabled) || expanded,
-                            'bg-primary/40': disabled,
-                        }), children: isExpanded
-                            ? _jsx(ChevronUp, { className: "-translate-y-[1px]", size: 24 })
-                            : _jsx(ChevronDown, { className: "translate-y-[1px]", size: 24 }) })] }), isExpanded && (_jsx("div", { className: "col gap-y-2 h-full", children: children }))] }));
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/InputGroup.tsx
+var InputGroup_exports = {};
+__export(InputGroup_exports, {
+  InputGroup: () => InputGroup
+});
+module.exports = __toCommonJS(InputGroup_exports);
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_clsx = __toESM(require("clsx"));
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/InputGroup.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var InputGroup = ({
+  children,
+  title,
+  expanded = true,
+  isExpandable = true,
+  disabled = false,
+  onChange = noop,
+  className = ""
+}) => {
+  const [isExpanded, setIsExpanded] = (0, import_react.useState)(expanded);
+  (0, import_react.useEffect)(() => {
+    setIsExpanded(expanded);
+  }, [expanded]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)("col gap-y-4 p-4 bg-white rounded-xl", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.default)(
+          "row justify-between items-center",
+          {
+            "cursor-pointer": isExpandable && !disabled,
+            "cursor-not-allowed": disabled
+          },
+          {
+            "text-primary": !disabled,
+            "text-primary/40": disabled
+          }
+        ),
+        onClick: () => {
+          if (!isExpandable) {
+            return;
+          }
+          const updatedIsExpanded = !isExpanded;
+          onChange(updatedIsExpanded);
+          setIsExpanded(updatedIsExpanded);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "textstyle-title-md", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)("rounded-full text-white w-6 h-6", {
+            "bg-primary": isExpandable && !disabled || expanded,
+            "bg-primary/40": disabled
+          }), children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronUp, { className: "-translate-y-[1px]", size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { className: "translate-y-[1px]", size: 24 }) })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "col gap-y-2 h-full", children })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputGroup
+});
+//# sourceMappingURL=InputGroup.js.map

package/dist/components/InputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/InputGroup.tsx","../../src/util/noop.ts"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../util/noop'\n\nexport type InputGroupProps = PropsWithChildren<{\n  title: string,\n  expanded?: boolean,\n  isExpandable?: boolean,\n  disabled?: boolean,\n  onChange?: (value: boolean) => void,\n  className?: string,\n}>\n\n/**\n * A Component for layouting inputs in an expandable group\n */\nexport const InputGroup = ({\n  children,\n  title,\n  expanded = true,\n  isExpandable = true,\n  disabled = false,\n  onChange = noop,\n  className = '',\n}: InputGroupProps) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded)\n\n  useEffect(() => {\n    setIsExpanded(expanded)\n  }, [expanded])\n\n  return (\n    <div className={clsx('col gap-y-4 p-4 bg-white rounded-xl', className)}>\n      <div\n        className={clsx('row justify-between items-center', {\n          'cursor-pointer': isExpandable && !disabled,\n          'cursor-not-allowed': disabled,\n        },\n        {\n          'text-primary': !disabled,\n          'text-primary/40': disabled\n        })}\n        onClick={() => {\n          if (!isExpandable) {\n            return\n          }\n          const updatedIsExpanded = !isExpanded\n          onChange(updatedIsExpanded)\n          setIsExpanded(updatedIsExpanded)\n        }}\n      >\n        <span className=\"textstyle-title-md\">{title}</span>\n        <div className={clsx('rounded-full text-white w-6 h-6', {\n          'bg-primary': (isExpandable && !disabled) || expanded,\n          'bg-primary/40': disabled,\n        })}>\n          {isExpanded\n            ? <ChevronUp className=\"-translate-y-[1px]\" size={24}/>\n            : <ChevronDown className=\"translate-y-[1px]\" size={24}/>\n          }\n        </div>\n      </div>\n      {isExpanded && (\n        <div className=\"col gap-y-2 h-full\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n","export const noop = () => undefined\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoC;AACpC,0BAAuC;AACvC,kBAAiB;;;ACHV,IAAM,OAAO,MAAM;;;ADmCpB;AAjBC,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,eAAe;AAAA,EACf,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AACd,MAAuB;AACrB,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAkB,QAAQ;AAE9D,8BAAU,MAAM;AACd,kBAAc,QAAQ;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,6CAAC,SAAI,eAAW,YAAAA,SAAK,uCAAuC,SAAS,GACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,YAAAA;AAAA,UAAK;AAAA,UAAoC;AAAA,YAClD,kBAAkB,gBAAgB,CAAC;AAAA,YACnC,sBAAsB;AAAA,UACxB;AAAA,UACA;AAAA,YACE,gBAAgB,CAAC;AAAA,YACjB,mBAAmB;AAAA,UACrB;AAAA,QAAC;AAAA,QACD,SAAS,MAAM;AACb,cAAI,CAAC,cAAc;AACjB;AAAA,UACF;AACA,gBAAM,oBAAoB,CAAC;AAC3B,mBAAS,iBAAiB;AAC1B,wBAAc,iBAAiB;AAAA,QACjC;AAAA,QAEA;AAAA,sDAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,UAC5C,4CAAC,SAAI,eAAW,YAAAA,SAAK,mCAAmC;AAAA,YACtD,cAAe,gBAAgB,CAAC,YAAa;AAAA,YAC7C,iBAAiB;AAAA,UACnB,CAAC,GACE,uBACG,4CAAC,iCAAU,WAAU,sBAAqB,MAAM,IAAG,IACnD,4CAAC,mCAAY,WAAU,qBAAoB,MAAM,IAAG,GAE1D;AAAA;AAAA;AAAA,IACF;AAAA,IACC,cACC,4CAAC,SAAI,WAAU,sBACZ,UACH;AAAA,KAEJ;AAEJ;","names":["clsx"]}

package/dist/components/InputGroup.mjs

@@ -0,0 +1,62 @@
+// src/components/InputGroup.tsx
+import { useEffect, useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import clsx from "clsx";
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/InputGroup.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputGroup = ({
+  children,
+  title,
+  expanded = true,
+  isExpandable = true,
+  disabled = false,
+  onChange = noop,
+  className = ""
+}) => {
+  const [isExpanded, setIsExpanded] = useState(expanded);
+  useEffect(() => {
+    setIsExpanded(expanded);
+  }, [expanded]);
+  return /* @__PURE__ */ jsxs("div", { className: clsx("col gap-y-4 p-4 bg-white rounded-xl", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "row justify-between items-center",
+          {
+            "cursor-pointer": isExpandable && !disabled,
+            "cursor-not-allowed": disabled
+          },
+          {
+            "text-primary": !disabled,
+            "text-primary/40": disabled
+          }
+        ),
+        onClick: () => {
+          if (!isExpandable) {
+            return;
+          }
+          const updatedIsExpanded = !isExpanded;
+          onChange(updatedIsExpanded);
+          setIsExpanded(updatedIsExpanded);
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "textstyle-title-md", children: title }),
+          /* @__PURE__ */ jsx("div", { className: clsx("rounded-full text-white w-6 h-6", {
+            "bg-primary": isExpandable && !disabled || expanded,
+            "bg-primary/40": disabled
+          }), children: isExpanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "-translate-y-[1px]", size: 24 }) : /* @__PURE__ */ jsx(ChevronDown, { className: "translate-y-[1px]", size: 24 }) })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx("div", { className: "col gap-y-2 h-full", children })
+  ] });
+};
+export {
+  InputGroup
+};
+//# sourceMappingURL=InputGroup.mjs.map

package/dist/components/InputGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/InputGroup.tsx","../../src/util/noop.ts"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../util/noop'\n\nexport type InputGroupProps = PropsWithChildren<{\n  title: string,\n  expanded?: boolean,\n  isExpandable?: boolean,\n  disabled?: boolean,\n  onChange?: (value: boolean) => void,\n  className?: string,\n}>\n\n/**\n * A Component for layouting inputs in an expandable group\n */\nexport const InputGroup = ({\n  children,\n  title,\n  expanded = true,\n  isExpandable = true,\n  disabled = false,\n  onChange = noop,\n  className = '',\n}: InputGroupProps) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded)\n\n  useEffect(() => {\n    setIsExpanded(expanded)\n  }, [expanded])\n\n  return (\n    <div className={clsx('col gap-y-4 p-4 bg-white rounded-xl', className)}>\n      <div\n        className={clsx('row justify-between items-center', {\n          'cursor-pointer': isExpandable && !disabled,\n          'cursor-not-allowed': disabled,\n        },\n        {\n          'text-primary': !disabled,\n          'text-primary/40': disabled\n        })}\n        onClick={() => {\n          if (!isExpandable) {\n            return\n          }\n          const updatedIsExpanded = !isExpanded\n          onChange(updatedIsExpanded)\n          setIsExpanded(updatedIsExpanded)\n        }}\n      >\n        <span className=\"textstyle-title-md\">{title}</span>\n        <div className={clsx('rounded-full text-white w-6 h-6', {\n          'bg-primary': (isExpandable && !disabled) || expanded,\n          'bg-primary/40': disabled,\n        })}>\n          {isExpanded\n            ? <ChevronUp className=\"-translate-y-[1px]\" size={24}/>\n            : <ChevronDown className=\"translate-y-[1px]\" size={24}/>\n          }\n        </div>\n      </div>\n      {isExpanded && (\n        <div className=\"col gap-y-2 h-full\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n","export const noop = () => undefined\n"],"mappings":";AACA,SAAS,WAAW,gBAAgB;AACpC,SAAS,aAAa,iBAAiB;AACvC,OAAO,UAAU;;;ACHV,IAAM,OAAO,MAAM;;;ADmCpB,SAkBE,KAlBF;AAjBC,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,eAAe;AAAA,EACf,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AACd,MAAuB;AACrB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,QAAQ;AAE9D,YAAU,MAAM;AACd,kBAAc,QAAQ;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,qBAAC,SAAI,WAAW,KAAK,uCAAuC,SAAS,GACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UAAK;AAAA,UAAoC;AAAA,YAClD,kBAAkB,gBAAgB,CAAC;AAAA,YACnC,sBAAsB;AAAA,UACxB;AAAA,UACA;AAAA,YACE,gBAAgB,CAAC;AAAA,YACjB,mBAAmB;AAAA,UACrB;AAAA,QAAC;AAAA,QACD,SAAS,MAAM;AACb,cAAI,CAAC,cAAc;AACjB;AAAA,UACF;AACA,gBAAM,oBAAoB,CAAC;AAC3B,mBAAS,iBAAiB;AAC1B,wBAAc,iBAAiB;AAAA,QACjC;AAAA,QAEA;AAAA,8BAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,UAC5C,oBAAC,SAAI,WAAW,KAAK,mCAAmC;AAAA,YACtD,cAAe,gBAAgB,CAAC,YAAa;AAAA,YAC7C,iBAAiB;AAAA,UACnB,CAAC,GACE,uBACG,oBAAC,aAAU,WAAU,sBAAqB,MAAM,IAAG,IACnD,oBAAC,eAAY,WAAU,qBAAoB,MAAM,IAAG,GAE1D;AAAA;AAAA;AAAA,IACF;AAAA,IACC,cACC,oBAAC,SAAI,WAAU,sBACZ,UACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/LoadingAndErrorComponent.d.mts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { PropsWithChildren } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LoadingAnimationProps } from './LoadingAnimation.mjs';
+import { ErrorComponentProps } from './ErrorComponent.mjs';
+import '../hooks/useTranslation.mjs';
+import '../hooks/useLanguage.mjs';
+
+type LoadingAndErrorComponentProps = PropsWithChildren<{
+    isLoading?: boolean;
+    hasError?: boolean;
+    loadingProps?: LoadingAnimationProps;
+    errorProps?: ErrorComponentProps;
+    /**
+     * in milliseconds
+     */
+    minimumLoadingDuration?: number;
+}>;
+/**
+ * A Component that shows the Error and Loading animation, when appropriate and the children otherwise
+ */
+declare const LoadingAndErrorComponent: ({ children, isLoading, hasError, errorProps, loadingProps, minimumLoadingDuration }: LoadingAndErrorComponentProps) => string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | null | undefined;
+
+export { LoadingAndErrorComponent, type LoadingAndErrorComponentProps };

package/dist/components/LoadingAndErrorComponent.d.ts

@@ -1,7 +1,12 @@
-import type { PropsWithChildren } from 'react';
-import type { LoadingAnimationProps } from './LoadingAnimation';
-import type { ErrorComponentProps } from './ErrorComponent';
-export type LoadingAndErrorComponentProps = PropsWithChildren<{
+import * as react from 'react';
+import { PropsWithChildren } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LoadingAnimationProps } from './LoadingAnimation.js';
+import { ErrorComponentProps } from './ErrorComponent.js';
+import '../hooks/useTranslation.js';
+import '../hooks/useLanguage.js';
+
+type LoadingAndErrorComponentProps = PropsWithChildren<{
     isLoading?: boolean;
     hasError?: boolean;
     loadingProps?: LoadingAnimationProps;
@@ -14,4 +19,6 @@ export type LoadingAndErrorComponentProps = PropsWithChildren<{
 /**
  * A Component that shows the Error and Loading animation, when appropriate and the children otherwise
  */
-export declare const LoadingAndErrorComponent: ({ children, isLoading, hasError, errorProps, loadingProps, minimumLoadingDuration }: LoadingAndErrorComponentProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
+declare const LoadingAndErrorComponent: ({ children, isLoading, hasError, errorProps, loadingProps, minimumLoadingDuration }: LoadingAndErrorComponentProps) => string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | null | undefined;
+
+export { LoadingAndErrorComponent, type LoadingAndErrorComponentProps };

package/dist/components/LoadingAndErrorComponent.js

@@ -1,25 +1,180 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { LoadingAnimation } from './LoadingAnimation';
-import { ErrorComponent } from './ErrorComponent';
-/**
- * A Component that shows the Error and Loading animation, when appropriate and the children otherwise
- */
-export const LoadingAndErrorComponent = ({ children, isLoading = false, hasError = false, errorProps, loadingProps, minimumLoadingDuration }) => {
-    const [isInMinimumLoading, setIsInMinimumLoading] = useState(false);
-    const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false);
-    if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
-        setIsInMinimumLoading(true);
-        setTimeout(() => {
-            setIsInMinimumLoading(false);
-            setHasUsedMinimumLoading(true);
-        }, minimumLoadingDuration);
-    }
-    if (isLoading || (minimumLoadingDuration && isInMinimumLoading)) {
-        return _jsx(LoadingAnimation, { ...loadingProps });
-    }
-    if (hasError) {
-        return _jsx(ErrorComponent, { ...errorProps });
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/LoadingAndErrorComponent.tsx
+var LoadingAndErrorComponent_exports = {};
+__export(LoadingAndErrorComponent_exports, {
+  LoadingAndErrorComponent: () => LoadingAndErrorComponent
+});
+module.exports = __toCommonJS(LoadingAndErrorComponent_exports);
+var import_react3 = require("react");
+
+// src/hooks/useLanguage.tsx
+var import_react2 = require("react");
+
+// src/hooks/useLocalStorage.tsx
+var import_react = require("react");
+
+// src/hooks/useLanguage.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_LANGUAGE = "en";
+var LanguageContext = (0, import_react2.createContext)({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
+
+// src/hooks/useTranslation.ts
+var useTranslation = (defaults, translationOverwrite = {}) => {
+  const { language: languageProp, translation: overwrite } = translationOverwrite;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  let defaultValues = defaults[usedLanguage];
+  if (overwrite && overwrite[usedLanguage]) {
+    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  }
+  return defaultValues;
+};
+
+// src/components/icons/Helpwave.tsx
+var import_clsx = require("clsx");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Helpwave = ({
+  color = "currentColor",
+  animate = "none",
+  size = 64,
+  ...props
+}) => {
+  const isLoadingAnimation = animate === "loading";
+  let svgAnimationKey = "";
+  if (animate === "pulse") {
+    svgAnimationKey = "animate-pulse";
+  } else if (animate === "bounce") {
+    svgAnimationKey = "animate-bounce";
+  }
+  if (size < 0) {
+    console.error("size cannot be less than 0");
+    size = 64;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 888 888",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeWidth: 48,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { className: (0, import_clsx.clsx)(svgAnimationKey), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-big-left-up": isLoadingAnimation }), d: "M144 543.235C144 423.259 232.164 326 340.92 326", stroke: color, strokeDasharray: "1000" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-big-right-down": isLoadingAnimation }), d: "M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869", stroke: color, strokeDasharray: "1000" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-small-left-up": isLoadingAnimation }), d: "M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495", stroke: color, strokeDasharray: "1000" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { className: (0, import_clsx.clsx)({ "animate-wave-small-right-down": isLoadingAnimation }), d: "M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233", stroke: color, strokeDasharray: "1000" })
+      ] })
     }
-    return children;
+  );
+};
+
+// src/components/LoadingAnimation.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultLoadingAnimationTranslation = {
+  en: {
+    loading: "Loading data"
+  },
+  de: {
+    loading: "Lade Daten"
+  }
+};
+var LoadingAnimation = ({
+  overwriteTranslation,
+  loadingText,
+  classname
+}) => {
+  const translation = useTranslation(defaultLoadingAnimationTranslation, overwriteTranslation);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)("col items-center justify-center w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Helpwave, { animate: "loading" }),
+    loadingText ?? `${translation.loading}...`
+  ] });
+};
+
+// src/components/ErrorComponent.tsx
+var import_lucide_react = require("lucide-react");
+var import_clsx3 = __toESM(require("clsx"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var defaultErrorComponentTranslation = {
+  en: {
+    errorOccurred: "An error occurred"
+  },
+  de: {
+    errorOccurred: "Ein Fehler ist aufgetreten"
+  }
+};
+var ErrorComponent = ({
+  overwriteTranslation,
+  errorText,
+  classname
+}) => {
+  const translation = useTranslation(defaultErrorComponentTranslation, overwriteTranslation);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx3.default)("col items-center justify-center gap-y-4 w-full h-24", classname), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.AlertOctagon, { size: 64, className: "text-warning" }),
+    errorText ?? `${translation.errorOccurred} :(`
+  ] });
+};
+
+// src/components/LoadingAndErrorComponent.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var LoadingAndErrorComponent = ({
+  children,
+  isLoading = false,
+  hasError = false,
+  errorProps,
+  loadingProps,
+  minimumLoadingDuration
+}) => {
+  const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react3.useState)(false);
+  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react3.useState)(false);
+  if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
+    setIsInMinimumLoading(true);
+    setTimeout(() => {
+      setIsInMinimumLoading(false);
+      setHasUsedMinimumLoading(true);
+    }, minimumLoadingDuration);
+  }
+  if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoadingAnimation, { ...loadingProps });
+  }
+  if (hasError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorComponent, { ...errorProps });
+  }
+  return children;
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LoadingAndErrorComponent
+});
+//# sourceMappingURL=LoadingAndErrorComponent.js.map