mogh_ui 0.1.0

package/dist/components/config/confirm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/config/confirm.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useDisclosure } from \"@mantine/hooks\";\nimport { Box, Button, Group, Modal, Stack, Text } from \"@mantine/core\";\nimport { Save } from \"lucide-react\";\nimport { ShowHideButton } from \"../show-hide-button\";\nimport { MonacoDiffEditor, MonacoLanguage } from \"../monaco\";\nimport { deepCompare } from \"../../utils\";\nimport { fmtSnakeCaseToUpperSpaceCase } from \"../../formatting\";\nimport { useCtrlKeyListener, useKeyListener } from \"../../hooks\";\n\nexport interface ConfirmUpdateProps<T> {\n  original: T;\n  update: Partial<T>;\n  onConfirm: () => Promise<unknown>;\n  loading?: boolean;\n  disabled: boolean;\n  language?: MonacoLanguage;\n  fileContentsLanguage?: MonacoLanguage;\n  fullWidth?: boolean;\n  openKeyListener?: boolean;\n  confirmKeyListener?: boolean;\n  enableFancyToml?: boolean;\n}\n\nexport function ConfirmUpdate<T>({\n  original,\n  update,\n  onConfirm,\n  loading,\n  disabled,\n  language,\n  fileContentsLanguage,\n  fullWidth,\n  openKeyListener = true,\n  confirmKeyListener = true,\n  enableFancyToml,\n}: ConfirmUpdateProps<T>) {\n  const [opened, { open, close }] = useDisclosure();\n\n  const handleConfirm = async () => {\n    await onConfirm();\n    close();\n  };\n\n  useKeyListener(\"Enter\", () => {\n    if (!opened || !confirmKeyListener) {\n      return;\n    }\n    handleConfirm();\n  });\n\n  useCtrlKeyListener(\"Enter\", () => {\n    if (opened || !openKeyListener) {\n      return;\n    }\n    open();\n  });\n\n  return (\n    <>\n      <Modal\n        title={<Text size=\"xl\">Confirm Update</Text>}\n        opened={opened}\n        onClose={close}\n        size=\"auto\"\n        styles={{ content: { overflowY: \"hidden\" } }}\n      >\n        <Stack\n          gap=\"xl\"\n          w={1400}\n          maw={{\n            base: \"calc(100vw - 100px)\",\n            xs: \"calc(100vw - 150px)\",\n            sm: \"calc(100vw - 200px)\",\n            md: \"calc(100vw - 250px)\",\n          }}\n          my=\"lg\"\n          style={{ overflowY: \"hidden\" }}\n        >\n          <Stack\n            mah=\"min(calc(100vh - 300px), 800px)\"\n            style={{ overflowY: \"auto\" }}\n          >\n            {Object.entries(update)\n              .filter(([key, val]) => !deepCompare((original as any)[key], val))\n              .map(([key, val], i) => (\n                <ConfirmUpdateItem\n                  key={i}\n                  _key={key as any}\n                  val={val as any}\n                  previous={original}\n                  language={language}\n                  fileContentsLanguage={fileContentsLanguage}\n                  enableFancyToml={enableFancyToml}\n                />\n              ))}\n          </Stack>\n          <Group justify=\"flex-end\">\n            <Button\n              leftSection={<Save size=\"1rem\" />}\n              onClick={(e) => {\n                e.stopPropagation();\n                handleConfirm();\n              }}\n              w={{ base: \"100%\", xs: 200 }}\n              loading={loading}\n            >\n              Save\n            </Button>\n          </Group>\n        </Stack>\n      </Modal>\n\n      <Button\n        leftSection={<Save size=\"1rem\" />}\n        onClick={(e) => {\n          e.stopPropagation();\n          open();\n        }}\n        disabled={disabled}\n        w={fullWidth ? undefined : 100}\n        fullWidth={fullWidth}\n      >\n        Save\n      </Button>\n    </>\n  );\n}\n\nfunction ConfirmUpdateItem<T>({\n  _key,\n  val: _val,\n  previous,\n  language,\n  fileContentsLanguage,\n  fileContentsKeys = [\"file_contents\"],\n  keyValueFields,\n  enableFancyToml,\n}: {\n  _key: keyof T;\n  val: T[keyof T];\n  previous: T;\n  language?: MonacoLanguage;\n  fileContentsLanguage?: MonacoLanguage;\n  fileContentsKeys?: string[];\n  keyValueFields?: string[];\n  enableFancyToml?: boolean;\n}) {\n  const [show, setShow] = useState(true);\n  const val =\n    typeof _val === \"string\"\n      ? _val\n      : Array.isArray(_val)\n        ? _val.length > 0 &&\n          [\"string\", \"number\", \"boolean\"].includes(typeof _val[0])\n          ? JSON.stringify(_val)\n          : JSON.stringify(_val, null, 2)\n        : JSON.stringify(_val, null, 2);\n  const prev_val =\n    typeof previous[_key] === \"string\"\n      ? previous[_key]\n      : Array.isArray(previous[_key])\n        ? previous[_key].length > 0 &&\n          [\"string\", \"number\", \"boolean\"].includes(typeof previous[_key][0])\n          ? JSON.stringify(previous[_key])\n          : JSON.stringify(previous[_key], null, 2)\n        : JSON.stringify(previous[_key], null, 2);\n  const showDiff =\n    val?.includes(\"\\n\") ||\n    prev_val?.includes(\"\\n\") ||\n    Math.max(val?.length ?? 0, prev_val?.length ?? 0) > 30;\n\n  return (\n    <Stack\n      hidden={val === prev_val}\n      gap=\"xs\"\n      p=\"xl\"\n      className=\"bordered-light\"\n      bdrs=\"md\"\n    >\n      <Group justify=\"space-between\">\n        <Text c=\"Neutral\">{fmtSnakeCaseToUpperSpaceCase(_key as string)}</Text>\n        <ShowHideButton show={show} setShow={setShow} />\n      </Group>\n      {show && (\n        <>\n          {showDiff ? (\n            <MonacoDiffEditor\n              original={prev_val}\n              modified={val}\n              language={\n                language ??\n                (keyValueFields?.includes(_key as string)\n                  ? \"key_value\"\n                  : fileContentsKeys?.includes(_key as string)\n                    ? fileContentsLanguage\n                    : \"json\")\n              }\n              enableFancyToml={enableFancyToml}\n              readOnly\n            />\n          ) : (\n            <Box component=\"pre\" mih={0}>\n              <Text component=\"span\" c=\"Critical\">\n                {prev_val || \"None\"}\n              </Text>{\" \"}\n              <Text component=\"span\" c=\"dimmed\">\n                {\"->\"}\n              </Text>{\" \"}\n              <Text component=\"span\" c=\"Good\">\n                {val || \"None\"}\n              </Text>\n            </Box>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/config/group.cjs

@@ -0,0 +1,102 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var group_exports = {};
+__export(group_exports, {
+  ConfigGroup: () => ConfigGroup
+});
+module.exports = __toCommonJS(group_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_item = require("./item");
+var import_core = require("@mantine/core");
+var import_lucide_react = require("lucide-react");
+function ConfigGroup({
+  config,
+  update,
+  setUpdate,
+  disabled,
+  fields
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, { gap: "xl", children: Object.entries(fields).map(([key, field]) => {
+    const value = update[key] ?? config[key];
+    if (typeof field === "function") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: field(value, setUpdate) }, key);
+    } else if (typeof field === "object" || field === true) {
+      const args = typeof field === "object" ? field : void 0;
+      if (args?.hidden) {
+        return null;
+      }
+      switch (typeof value) {
+        case "string":
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_item.ConfigInput,
+            {
+              label: args?.label ?? key,
+              value,
+              onValueChange: (value2) => setUpdate({ [key]: value2 }),
+              disabled: args?.disabled || disabled,
+              placeholder: args?.placeholder,
+              description: args?.description
+            },
+            key
+          );
+        case "number":
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_item.ConfigInput,
+            {
+              label: args?.label ?? key,
+              value: Number(value),
+              onValueChange: (value2) => setUpdate({ [key]: Number(value2) }),
+              disabled: args?.disabled || disabled,
+              placeholder: args?.placeholder,
+              description: args?.description
+            },
+            key
+          );
+        case "boolean":
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_item.ConfigSwitch,
+            {
+              label: args?.label ?? key,
+              value,
+              onCheckedChange: (value2) => setUpdate({ [key]: value2 }),
+              disabled: args?.disabled || disabled,
+              description: args?.description
+            },
+            key
+          );
+        default:
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { children: [
+            "Config '",
+            args?.label ?? key,
+            "':",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CircleQuestionMark, { size: "1rem" })
+          ] });
+      }
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, {}, key);
+    }
+  }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConfigGroup
+});
+//# sourceMappingURL=group.cjs.map

package/dist/components/config/group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/config/group.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport { ConfigFieldArgs, ConfigGroupArgs } from \".\";\nimport { ConfigInput, ConfigSwitch } from \"./item\";\nimport { Group, Stack } from \"@mantine/core\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport function ConfigGroup<T>({\n  config,\n  update,\n  setUpdate,\n  disabled,\n  fields,\n}: {\n  config: T;\n  update: Partial<T>;\n  setUpdate: (update: Partial<T>) => void;\n  disabled: boolean;\n  fields: ConfigGroupArgs<T>[\"fields\"];\n}) {\n  return (\n    <Stack gap=\"xl\">\n      {Object.entries(fields).map(([key, field]) => {\n        const value =\n          (update as { [key: string]: unknown })[key] ??\n          (config as { [key: string]: unknown })[key];\n        if (typeof field === \"function\") {\n          return <Fragment key={key}>{field(value, setUpdate)}</Fragment>;\n        } else if (typeof field === \"object\" || field === true) {\n          const args =\n            typeof field === \"object\" ? (field as ConfigFieldArgs) : undefined;\n\n          if (args?.hidden) {\n            return null;\n          }\n\n          switch (typeof value) {\n            case \"string\":\n              return (\n                <ConfigInput\n                  key={key}\n                  label={args?.label ?? key}\n                  value={value}\n                  onValueChange={(value) =>\n                    setUpdate({ [key]: value } as Partial<T>)\n                  }\n                  disabled={args?.disabled || disabled}\n                  placeholder={args?.placeholder}\n                  description={args?.description}\n                />\n              );\n\n            case \"number\":\n              return (\n                <ConfigInput\n                  key={key}\n                  label={args?.label ?? key}\n                  value={Number(value)}\n                  onValueChange={(value) =>\n                    setUpdate({ [key]: Number(value) } as Partial<T>)\n                  }\n                  disabled={args?.disabled || disabled}\n                  placeholder={args?.placeholder}\n                  description={args?.description}\n                />\n              );\n\n            case \"boolean\":\n              return (\n                <ConfigSwitch\n                  key={key}\n                  label={args?.label ?? key}\n                  value={value}\n                  onCheckedChange={(value) =>\n                    setUpdate({ [key]: value } as Partial<T>)\n                  }\n                  disabled={args?.disabled || disabled}\n                  description={args?.description}\n                />\n              );\n\n            default:\n              return (\n                <Group>\n                  Config '{args?.label ?? key}':{\" \"}\n                  <CircleQuestionMark size=\"1rem\" />\n                </Group>\n              );\n          }\n        } else {\n          return <Fragment key={key} />;\n        }\n      })}\n    </Stack>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BiB;AA1BjB,mBAAyB;AAEzB,kBAA0C;AAC1C,kBAA6B;AAC7B,0BAAmC;AAE5B,SAAS,YAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE,4CAAC,qBAAM,KAAI,MACR,iBAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAC5C,UAAM,QACH,OAAsC,GAAG,KACzC,OAAsC,GAAG;AAC5C,QAAI,OAAO,UAAU,YAAY;AAC/B,aAAO,4CAAC,yBAAoB,gBAAM,OAAO,SAAS,KAA5B,GAA8B;AAAA,IACtD,WAAW,OAAO,UAAU,YAAY,UAAU,MAAM;AACtD,YAAM,OACJ,OAAO,UAAU,WAAY,QAA4B;AAE3D,UAAI,MAAM,QAAQ;AAChB,eAAO;AAAA,MACT;AAEA,cAAQ,OAAO,OAAO;AAAA,QACpB,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB;AAAA,cACA,eAAe,CAACA,WACd,UAAU,EAAE,CAAC,GAAG,GAAGA,OAAM,CAAe;AAAA,cAE1C,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA;AAAA,YARd;AAAA,UASP;AAAA,QAGJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB,OAAO,OAAO,KAAK;AAAA,cACnB,eAAe,CAACA,WACd,UAAU,EAAE,CAAC,GAAG,GAAG,OAAOA,MAAK,EAAE,CAAe;AAAA,cAElD,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA;AAAA,YARd;AAAA,UASP;AAAA,QAGJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB;AAAA,cACA,iBAAiB,CAACA,WAChB,UAAU,EAAE,CAAC,GAAG,GAAGA,OAAM,CAAe;AAAA,cAE1C,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA;AAAA,YAPd;AAAA,UAQP;AAAA,QAGJ;AACE,iBACE,6CAAC,qBAAM;AAAA;AAAA,YACI,MAAM,SAAS;AAAA,YAAI;AAAA,YAAG;AAAA,YAC/B,4CAAC,0CAAmB,MAAK,QAAO;AAAA,aAClC;AAAA,MAEN;AAAA,IACF,OAAO;AACL,aAAO,4CAAC,2BAAc,GAAK;AAAA,IAC7B;AAAA,EACF,CAAC,GACH;AAEJ;","names":["value"]}

package/dist/components/config/group.d.cts

@@ -0,0 +1,11 @@
+import 'react/jsx-runtime';
+export { ConfigGroup } from './index.cjs';
+import 'react';
+import '../monaco/index.cjs';
+import '@mantine/core';
+import './confirm.cjs';
+import './item.cjs';
+import '../input-list.cjs';
+import './layout.cjs';
+import '../section.cjs';
+import './unsaved-changes.cjs';

package/dist/components/config/group.d.ts

@@ -0,0 +1,11 @@
+import 'react/jsx-runtime';
+export { ConfigGroup } from './index.js';
+import 'react';
+import '../monaco/index.js';
+import '@mantine/core';
+import './confirm.js';
+import './item.js';
+import '../input-list.js';
+import './layout.js';
+import '../section.js';
+import './unsaved-changes.js';

package/dist/components/config/group.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { ConfigInput, ConfigSwitch } from "./item";
+import { Group, Stack } from "@mantine/core";
+import { CircleQuestionMark } from "lucide-react";
+function ConfigGroup({
+  config,
+  update,
+  setUpdate,
+  disabled,
+  fields
+}) {
+  return /* @__PURE__ */ jsx(Stack, { gap: "xl", children: Object.entries(fields).map(([key, field]) => {
+    const value = update[key] ?? config[key];
+    if (typeof field === "function") {
+      return /* @__PURE__ */ jsx(Fragment, { children: field(value, setUpdate) }, key);
+    } else if (typeof field === "object" || field === true) {
+      const args = typeof field === "object" ? field : void 0;
+      if (args?.hidden) {
+        return null;
+      }
+      switch (typeof value) {
+        case "string":
+          return /* @__PURE__ */ jsx(
+            ConfigInput,
+            {
+              label: args?.label ?? key,
+              value,
+              onValueChange: (value2) => setUpdate({ [key]: value2 }),
+              disabled: args?.disabled || disabled,
+              placeholder: args?.placeholder,
+              description: args?.description
+            },
+            key
+          );
+        case "number":
+          return /* @__PURE__ */ jsx(
+            ConfigInput,
+            {
+              label: args?.label ?? key,
+              value: Number(value),
+              onValueChange: (value2) => setUpdate({ [key]: Number(value2) }),
+              disabled: args?.disabled || disabled,
+              placeholder: args?.placeholder,
+              description: args?.description
+            },
+            key
+          );
+        case "boolean":
+          return /* @__PURE__ */ jsx(
+            ConfigSwitch,
+            {
+              label: args?.label ?? key,
+              value,
+              onCheckedChange: (value2) => setUpdate({ [key]: value2 }),
+              disabled: args?.disabled || disabled,
+              description: args?.description
+            },
+            key
+          );
+        default:
+          return /* @__PURE__ */ jsxs(Group, { children: [
+            "Config '",
+            args?.label ?? key,
+            "':",
+            " ",
+            /* @__PURE__ */ jsx(CircleQuestionMark, { size: "1rem" })
+          ] });
+      }
+    } else {
+      return /* @__PURE__ */ jsx(Fragment, {}, key);
+    }
+  }) });
+}
+export {
+  ConfigGroup
+};
+//# sourceMappingURL=group.js.map

package/dist/components/config/group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/config/group.tsx"],"sourcesContent":["import { Fragment } from \"react\";\nimport { ConfigFieldArgs, ConfigGroupArgs } from \".\";\nimport { ConfigInput, ConfigSwitch } from \"./item\";\nimport { Group, Stack } from \"@mantine/core\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport function ConfigGroup<T>({\n  config,\n  update,\n  setUpdate,\n  disabled,\n  fields,\n}: {\n  config: T;\n  update: Partial<T>;\n  setUpdate: (update: Partial<T>) => void;\n  disabled: boolean;\n  fields: ConfigGroupArgs<T>[\"fields\"];\n}) {\n  return (\n    <Stack gap=\"xl\">\n      {Object.entries(fields).map(([key, field]) => {\n        const value =\n          (update as { [key: string]: unknown })[key] ??\n          (config as { [key: string]: unknown })[key];\n        if (typeof field === \"function\") {\n          return <Fragment key={key}>{field(value, setUpdate)}</Fragment>;\n        } else if (typeof field === \"object\" || field === true) {\n          const args =\n            typeof field === \"object\" ? (field as ConfigFieldArgs) : undefined;\n\n          if (args?.hidden) {\n            return null;\n          }\n\n          switch (typeof value) {\n            case \"string\":\n              return (\n                <ConfigInput\n                  key={key}\n                  label={args?.label ?? key}\n                  value={value}\n                  onValueChange={(value) =>\n                    setUpdate({ [key]: value } as Partial<T>)\n                  }\n                  disabled={args?.disabled || disabled}\n                  placeholder={args?.placeholder}\n                  description={args?.description}\n                />\n              );\n\n            case \"number\":\n              return (\n                <ConfigInput\n                  key={key}\n                  label={args?.label ?? key}\n                  value={Number(value)}\n                  onValueChange={(value) =>\n                    setUpdate({ [key]: Number(value) } as Partial<T>)\n                  }\n                  disabled={args?.disabled || disabled}\n                  placeholder={args?.placeholder}\n                  description={args?.description}\n                />\n              );\n\n            case \"boolean\":\n              return (\n                <ConfigSwitch\n                  key={key}\n                  label={args?.label ?? key}\n                  value={value}\n                  onCheckedChange={(value) =>\n                    setUpdate({ [key]: value } as Partial<T>)\n                  }\n                  disabled={args?.disabled || disabled}\n                  description={args?.description}\n                />\n              );\n\n            default:\n              return (\n                <Group>\n                  Config '{args?.label ?? key}':{\" \"}\n                  <CircleQuestionMark size=\"1rem\" />\n                </Group>\n              );\n          }\n        } else {\n          return <Fragment key={key} />;\n        }\n      })}\n    </Stack>\n  );\n}\n"],"mappings":"AA0BiB,cAwDD,YAxDC;AA1BjB,SAAS,gBAAgB;AAEzB,SAAS,aAAa,oBAAoB;AAC1C,SAAS,OAAO,aAAa;AAC7B,SAAS,0BAA0B;AAE5B,SAAS,YAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE,oBAAC,SAAM,KAAI,MACR,iBAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAC5C,UAAM,QACH,OAAsC,GAAG,KACzC,OAAsC,GAAG;AAC5C,QAAI,OAAO,UAAU,YAAY;AAC/B,aAAO,oBAAC,YAAoB,gBAAM,OAAO,SAAS,KAA5B,GAA8B;AAAA,IACtD,WAAW,OAAO,UAAU,YAAY,UAAU,MAAM;AACtD,YAAM,OACJ,OAAO,UAAU,WAAY,QAA4B;AAE3D,UAAI,MAAM,QAAQ;AAChB,eAAO;AAAA,MACT;AAEA,cAAQ,OAAO,OAAO;AAAA,QACpB,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB;AAAA,cACA,eAAe,CAACA,WACd,UAAU,EAAE,CAAC,GAAG,GAAGA,OAAM,CAAe;AAAA,cAE1C,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA;AAAA,YARd;AAAA,UASP;AAAA,QAGJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB,OAAO,OAAO,KAAK;AAAA,cACnB,eAAe,CAACA,WACd,UAAU,EAAE,CAAC,GAAG,GAAG,OAAOA,MAAK,EAAE,CAAe;AAAA,cAElD,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA;AAAA,YARd;AAAA,UASP;AAAA,QAGJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,OAAO,MAAM,SAAS;AAAA,cACtB;AAAA,cACA,iBAAiB,CAACA,WAChB,UAAU,EAAE,CAAC,GAAG,GAAGA,OAAM,CAAe;AAAA,cAE1C,UAAU,MAAM,YAAY;AAAA,cAC5B,aAAa,MAAM;AAAA;AAAA,YAPd;AAAA,UAQP;AAAA,QAGJ;AACE,iBACE,qBAAC,SAAM;AAAA;AAAA,YACI,MAAM,SAAS;AAAA,YAAI;AAAA,YAAG;AAAA,YAC/B,oBAAC,sBAAmB,MAAK,QAAO;AAAA,aAClC;AAAA,MAEN;AAAA,IACF,OAAO;AACL,aAAO,oBAAC,cAAc,GAAK;AAAA,IAC7B;AAAA,EACF,CAAC,GACH;AAEJ;","names":["value"]}

package/dist/components/config/index.cjs

@@ -0,0 +1,237 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var config_exports = {};
+__export(config_exports, {
+  Config: () => Config
+});
+module.exports = __toCommonJS(config_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_core = require("@mantine/core");
+var import_confirm = require("./confirm");
+var import_lucide_react = require("lucide-react");
+var import_group = require("./group");
+var import_unsaved_changes = require("./unsaved-changes");
+var import_layout = require("./layout");
+__reExport(config_exports, require("./confirm"), module.exports);
+__reExport(config_exports, require("./group"), module.exports);
+__reExport(config_exports, require("./item"), module.exports);
+__reExport(config_exports, require("./layout"), module.exports);
+__reExport(config_exports, require("./unsaved-changes"), module.exports);
+function Config({
+  original,
+  update,
+  setUpdate,
+  disabled,
+  onSave,
+  titleOther,
+  disableSidebar,
+  fileContentsLanguage,
+  enableFancyToml,
+  groups: _groups
+}) {
+  const changesMade = Object.keys(update).length ? true : false;
+  const onConfirm = async () => {
+    await onSave();
+    setUpdate({});
+  };
+  const onReset = () => setUpdate({});
+  const groups = (0, import_react.useMemo)(
+    () => Object.entries(_groups).filter(([_, groupArgs]) => !!groupArgs),
+    [_groups]
+  );
+  const GroupsComponent = (0, import_react.useMemo)(
+    () => groups.map(([group, groupArgs]) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+        group && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { visibleFrom: "lg", fz: "h2", tt: "uppercase", mt: "xl", children: group }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, { children: groupArgs.filter(({ hidden }) => !hidden).map(
+          ({
+            label,
+            labelHidden,
+            icon,
+            labelExtra,
+            actions,
+            description,
+            contentHidden,
+            fields
+          }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_core.Stack,
+            {
+              id: group + label,
+              p: "xl",
+              gap: "md",
+              className: "bordered-light",
+              bdrs: "md",
+              style: { scrollMarginTop: 94 },
+              children: [
+                !labelHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { justify: "space-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "0", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { children: [
+                      icon,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { fz: "h3", children: label }),
+                      labelExtra
+                    ] }),
+                    description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { c: "dimmed", children: description })
+                  ] }),
+                  actions
+                ] }),
+                !contentHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_group.ConfigGroup,
+                  {
+                    config: original,
+                    update,
+                    setUpdate: (u) => setUpdate((p) => ({ ...p, ...u })),
+                    fields,
+                    disabled
+                  }
+                )
+              ]
+            },
+            group + label
+          )
+        ) })
+      ] }, group);
+    }),
+    [groups]
+  );
+  const SaveOrReset = ({
+    unsavedIndicator,
+    fullWidth
+  }) => changesMade && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    unsavedIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_unsaved_changes.UnsavedChanges, { fullWidth }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.Button,
+      {
+        variant: "outline",
+        onClick: onReset,
+        disabled: disabled || !changesMade,
+        leftSection: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.History, { size: "1rem" }),
+        fullWidth,
+        w: fullWidth ? void 0 : 100,
+        children: "Reset"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_confirm.ConfirmUpdate,
+      {
+        original,
+        update,
+        onConfirm,
+        disabled,
+        fileContentsLanguage,
+        fullWidth,
+        enableFancyToml
+      }
+    )
+  ] });
+  const SaveOrResetComponent = changesMade && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Group, { visibleFrom: "xs", justify: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SaveOrReset, { unsavedIndicator: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, { hiddenFrom: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SaveOrReset, { unsavedIndicator: true, fullWidth: true }) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_layout.ConfigLayout, { titleOther, SaveOrReset: SaveOrResetComponent, children: [
+    disableSidebar && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      GroupsComponent,
+      SaveOrResetComponent
+    ] }),
+    !disableSidebar && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Flex, { w: "100%", gap: "md", direction: { base: "column", lg: "row" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_core.Box,
+        {
+          visibleFrom: "lg",
+          pos: "relative",
+          className: "bordered-light",
+          style: {
+            borderLeftWidth: 0,
+            borderBottomWidth: 0,
+            borderTopRightRadius: "var(--mantine-radius-md)"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { pos: "sticky", w: 175, top: 88, pb: 24, m: "lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_core.ScrollArea,
+              {
+                mah: changesMade ? "calc(100vh - 220px)" : "calc(100vh - 130px)",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, { children: groups.filter(([_, groupArgs]) => groupArgs).map(([group, groupArgs]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { justify: "flex-end", mr: "md", c: "dimmed", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bookmark, { size: "1rem" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { tt: "uppercase", children: group || "GENERAL" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, { gap: "0.1rem", children: groupArgs && groupArgs.filter((groupArgs2) => !groupArgs2.hidden).map((groupArgs2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_core.Button,
+                    {
+                      variant: "subtle",
+                      justify: "flex-end",
+                      size: "sm",
+                      fullWidth: true,
+                      renderRoot: (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_core.Anchor,
+                        {
+                          href: "#" + group + groupArgs2.label,
+                          ...props
+                        }
+                      ),
+                      children: groupArgs2.label
+                    },
+                    group + groupArgs2.label
+                  )) })
+                ] }, group)) })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, { gap: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SaveOrReset, { fullWidth: true }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_core.Select,
+        {
+          hiddenFrom: "lg",
+          className: "select-nondimmed-placeholder",
+          placeholder: "Go To",
+          leftSection: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bookmark, { size: "1rem" }),
+          value: null,
+          data: groups.filter(([_, groupArgs]) => groupArgs).map(([group, groupArgs]) => ({
+            group,
+            items: groupArgs.map((arg) => ({
+              label: arg.label,
+              value: group + arg.label
+            }))
+          })),
+          onChange: (group) => {
+            if (!group) return;
+            window.location.hash = group;
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { style: { flexGrow: 1 }, gap: "md", children: [
+        GroupsComponent,
+        SaveOrResetComponent
+      ] })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Config,
+  ...require("./confirm"),
+  ...require("./group"),
+  ...require("./item"),
+  ...require("./layout"),
+  ...require("./unsaved-changes")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/components/config/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/config/index.tsx"],"sourcesContent":["import { Fragment, ReactNode, SetStateAction, useMemo } from \"react\";\nimport { MonacoLanguage } from \"../monaco\";\nimport {\n  Anchor,\n  Box,\n  Button,\n  Flex,\n  Group,\n  ScrollArea,\n  Select,\n  Stack,\n  Text,\n} from \"@mantine/core\";\nimport { ConfirmUpdate } from \"./confirm\";\nimport { Bookmark, History } from \"lucide-react\";\nimport { ConfigGroup } from \"./group\";\nimport { UnsavedChanges } from \"./unsaved-changes\";\nimport { ConfigLayout } from \"./layout\";\n\nexport * from \"./confirm\";\nexport * from \"./group\";\nexport * from \"./item\";\nexport * from \"./layout\";\nexport * from \"./unsaved-changes\";\n\nexport interface ConfigFieldArgs {\n  label?: string;\n  description?: ReactNode;\n  /** Use a selector instead of input */\n  options?: { value: string; label?: string; icon?: ReactNode }[];\n  placeholder?: string;\n  hidden?: boolean;\n  disabled?: boolean;\n}\n\nexport interface ConfigGroupArgs<T> {\n  label: string;\n  labelExtra?: ReactNode;\n  icon?: ReactNode;\n  description?: ReactNode;\n  actions?: ReactNode;\n  hidden?: boolean;\n  labelHidden?: boolean;\n  contentHidden?: boolean;\n  fields: {\n    [K in keyof Partial<T>]:\n      | boolean\n      | ConfigFieldArgs\n      | ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);\n  };\n}\n\nexport interface ConfigProps<T> {\n  original: T;\n  update: Partial<T>;\n  setUpdate: React.Dispatch<SetStateAction<Partial<T>>>;\n  disabled: boolean;\n  onSave: () => Promise<unknown>;\n  titleOther?: ReactNode;\n  disableSidebar?: boolean;\n  fileContentsLanguage?: MonacoLanguage;\n  enableFancyToml?: boolean;\n  groups: Record<\n    string, // Section key\n    ConfigGroupArgs<T>[] | false | undefined\n  >;\n}\n\nexport function Config<T>({\n  original,\n  update,\n  setUpdate,\n  disabled,\n  onSave,\n  titleOther,\n  disableSidebar,\n  fileContentsLanguage,\n  enableFancyToml,\n  groups: _groups,\n}: ConfigProps<T>) {\n  const changesMade = Object.keys(update).length ? true : false;\n  const onConfirm = async () => {\n    await onSave();\n    setUpdate({});\n  };\n  const onReset = () => setUpdate({});\n\n  const groups = useMemo(\n    () => Object.entries(_groups).filter(([_, groupArgs]) => !!groupArgs),\n    [_groups],\n  );\n\n  const GroupsComponent = useMemo(\n    () =>\n      groups.map(([group, groupArgs]) => {\n        return (\n          <Fragment key={group}>\n            {group && (\n              <Text visibleFrom=\"lg\" fz=\"h2\" tt=\"uppercase\" mt=\"xl\">\n                {group}\n              </Text>\n            )}\n\n            <Stack>\n              {(groupArgs as ConfigGroupArgs<T>[])\n                .filter(({ hidden }) => !hidden)\n                .map(\n                  ({\n                    label,\n                    labelHidden,\n                    icon,\n                    labelExtra,\n                    actions,\n                    description,\n                    contentHidden,\n                    fields,\n                  }) => (\n                    <Stack\n                      key={group + label}\n                      id={group + label}\n                      p=\"xl\"\n                      gap=\"md\"\n                      className=\"bordered-light\"\n                      bdrs=\"md\"\n                      style={{ scrollMarginTop: 94 }}\n                    >\n                      {!labelHidden && (\n                        <Group justify=\"space-between\">\n                          <Stack gap=\"0\">\n                            <Group>\n                              {icon}\n                              <Text fz=\"h3\">{label}</Text>\n                              {labelExtra}\n                            </Group>\n                            {description && (\n                              <Text c=\"dimmed\">{description}</Text>\n                            )}\n                          </Stack>\n                          {actions}\n                        </Group>\n                      )}\n                      {!contentHidden && (\n                        <ConfigGroup\n                          config={original}\n                          update={update}\n                          setUpdate={(u) => setUpdate((p) => ({ ...p, ...u }))}\n                          fields={fields}\n                          disabled={disabled}\n                        />\n                      )}\n                    </Stack>\n                  ),\n                )}\n            </Stack>\n          </Fragment>\n        );\n      }),\n    [groups],\n  );\n\n  const SaveOrReset = ({\n    unsavedIndicator,\n    fullWidth,\n  }: {\n    unsavedIndicator?: boolean;\n    fullWidth?: boolean;\n  }) =>\n    changesMade && (\n      <>\n        {unsavedIndicator && <UnsavedChanges fullWidth={fullWidth} />}\n        <Button\n          variant=\"outline\"\n          onClick={onReset}\n          disabled={disabled || !changesMade}\n          leftSection={<History size=\"1rem\" />}\n          fullWidth={fullWidth}\n          w={fullWidth ? undefined : 100}\n        >\n          Reset\n        </Button>\n        <ConfirmUpdate\n          original={original}\n          update={update}\n          onConfirm={onConfirm}\n          disabled={disabled}\n          fileContentsLanguage={fileContentsLanguage}\n          fullWidth={fullWidth}\n          enableFancyToml={enableFancyToml}\n        />\n      </>\n    );\n\n  const SaveOrResetComponent = changesMade && (\n    <>\n      <Group visibleFrom=\"xs\" justify=\"flex-end\">\n        <SaveOrReset unsavedIndicator />\n      </Group>\n      <Stack hiddenFrom=\"xs\">\n        <SaveOrReset unsavedIndicator fullWidth />\n      </Stack>\n    </>\n  );\n\n  return (\n    <ConfigLayout titleOther={titleOther} SaveOrReset={SaveOrResetComponent}>\n      {disableSidebar && (\n        <>\n          {GroupsComponent}\n          {SaveOrResetComponent}\n        </>\n      )}\n      {!disableSidebar && (\n        <Flex w=\"100%\" gap=\"md\" direction={{ base: \"column\", lg: \"row\" }}>\n          {/** SIDEBAR (LG) */}\n          <Box\n            visibleFrom=\"lg\"\n            pos=\"relative\"\n            className=\"bordered-light\"\n            style={{\n              borderLeftWidth: 0,\n              borderBottomWidth: 0,\n              borderTopRightRadius: \"var(--mantine-radius-md)\",\n            }}\n          >\n            <Stack pos=\"sticky\" w={175} top={88} pb={24} m=\"lg\">\n              {/** ANCHORS */}\n              <ScrollArea\n                mah={\n                  changesMade ? \"calc(100vh - 220px)\" : \"calc(100vh - 130px)\"\n                }\n              >\n                <Stack>\n                  {groups\n                    .filter(([_, groupArgs]) => groupArgs)\n                    .map(([group, groupArgs]) => (\n                      <Stack key={group} gap=\"xs\">\n                        <Group justify=\"flex-end\" mr=\"md\" c=\"dimmed\">\n                          <Bookmark size=\"1rem\" />\n                          <Text tt=\"uppercase\">{group || \"GENERAL\"}</Text>\n                        </Group>\n                        <Stack gap=\"0.1rem\">\n                          {groupArgs &&\n                            groupArgs\n                              .filter((groupArgs) => !groupArgs.hidden)\n                              .map((groupArgs) => (\n                                <Button\n                                  key={group + groupArgs.label}\n                                  variant=\"subtle\"\n                                  justify=\"flex-end\"\n                                  size=\"sm\"\n                                  fullWidth\n                                  renderRoot={(props) => (\n                                    <Anchor\n                                      href={\"#\" + group + groupArgs.label}\n                                      {...props}\n                                    />\n                                  )}\n                                >\n                                  {groupArgs.label}\n                                </Button>\n                              ))}\n                        </Stack>\n                      </Stack>\n                    ))}\n                </Stack>\n              </ScrollArea>\n\n              {/** SAVE */}\n              <Stack gap=\"xs\">\n                <SaveOrReset fullWidth />\n              </Stack>\n            </Stack>\n          </Box>\n\n          {/** SELECTOR (MOBILE) */}\n          <Select\n            hiddenFrom=\"lg\"\n            className=\"select-nondimmed-placeholder\"\n            placeholder=\"Go To\"\n            leftSection={<Bookmark size=\"1rem\" />}\n            value={null}\n            data={groups\n              .filter(([_, groupArgs]) => groupArgs)\n              .map(([group, groupArgs]) => ({\n                group,\n                items: (groupArgs as ConfigGroupArgs<T>[]).map((arg) => ({\n                  label: arg.label,\n                  value: group + arg.label,\n                })),\n              }))}\n            onChange={(group) => {\n              if (!group) return;\n              window.location.hash = group;\n            }}\n          />\n\n          {/** CONTENT */}\n          <Stack style={{ flexGrow: 1 }} gap=\"md\">\n            {GroupsComponent}\n            {SaveOrResetComponent}\n          </Stack>\n        </Flex>\n      )}\n    </ConfigLayout>\n  );\n}\n"],"mappings":"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","names":["groupArgs"]}

package/dist/components/config/index.d.cts

@@ -0,0 +1,62 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SetStateAction, ReactNode } from 'react';
+import { MonacoLanguage } from '../monaco/index.cjs';
+export { ConfirmUpdate, ConfirmUpdateProps } from './confirm.cjs';
+export { ConfigInput, ConfigItem, ConfigItemProps, ConfigList, ConfigSwitch } from './item.cjs';
+export { ConfigLayout } from './layout.cjs';
+export { UnsavedChanges } from './unsaved-changes.cjs';
+import '@mantine/core';
+import '../input-list.cjs';
+import '../section.cjs';
+
+declare function ConfigGroup<T>({ config, update, setUpdate, disabled, fields, }: {
+    config: T;
+    update: Partial<T>;
+    setUpdate: (update: Partial<T>) => void;
+    disabled: boolean;
+    fields: ConfigGroupArgs<T>["fields"];
+}): react_jsx_runtime.JSX.Element;
+
+interface ConfigFieldArgs {
+    label?: string;
+    description?: ReactNode;
+    /** Use a selector instead of input */
+    options?: {
+        value: string;
+        label?: string;
+        icon?: ReactNode;
+    }[];
+    placeholder?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+}
+interface ConfigGroupArgs<T> {
+    label: string;
+    labelExtra?: ReactNode;
+    icon?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    hidden?: boolean;
+    labelHidden?: boolean;
+    contentHidden?: boolean;
+    fields: {
+        [K in keyof Partial<T>]: boolean | ConfigFieldArgs | ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);
+    };
+}
+interface ConfigProps<T> {
+    original: T;
+    update: Partial<T>;
+    setUpdate: React.Dispatch<SetStateAction<Partial<T>>>;
+    disabled: boolean;
+    onSave: () => Promise<unknown>;
+    titleOther?: ReactNode;
+    disableSidebar?: boolean;
+    fileContentsLanguage?: MonacoLanguage;
+    enableFancyToml?: boolean;
+    groups: Record<string, // Section key
+    // Section key
+    ConfigGroupArgs<T>[] | false | undefined>;
+}
+declare function Config<T>({ original, update, setUpdate, disabled, onSave, titleOther, disableSidebar, fileContentsLanguage, enableFancyToml, groups: _groups, }: ConfigProps<T>): react_jsx_runtime.JSX.Element;
+
+export { Config, type ConfigFieldArgs, ConfigGroup, type ConfigGroupArgs, type ConfigProps };

package/dist/components/config/index.d.ts

@@ -0,0 +1,62 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SetStateAction, ReactNode } from 'react';
+import { MonacoLanguage } from '../monaco/index.js';
+export { ConfirmUpdate, ConfirmUpdateProps } from './confirm.js';
+export { ConfigInput, ConfigItem, ConfigItemProps, ConfigList, ConfigSwitch } from './item.js';
+export { ConfigLayout } from './layout.js';
+export { UnsavedChanges } from './unsaved-changes.js';
+import '@mantine/core';
+import '../input-list.js';
+import '../section.js';
+
+declare function ConfigGroup<T>({ config, update, setUpdate, disabled, fields, }: {
+    config: T;
+    update: Partial<T>;
+    setUpdate: (update: Partial<T>) => void;
+    disabled: boolean;
+    fields: ConfigGroupArgs<T>["fields"];
+}): react_jsx_runtime.JSX.Element;
+
+interface ConfigFieldArgs {
+    label?: string;
+    description?: ReactNode;
+    /** Use a selector instead of input */
+    options?: {
+        value: string;
+        label?: string;
+        icon?: ReactNode;
+    }[];
+    placeholder?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+}
+interface ConfigGroupArgs<T> {
+    label: string;
+    labelExtra?: ReactNode;
+    icon?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    hidden?: boolean;
+    labelHidden?: boolean;
+    contentHidden?: boolean;
+    fields: {
+        [K in keyof Partial<T>]: boolean | ConfigFieldArgs | ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);
+    };
+}
+interface ConfigProps<T> {
+    original: T;
+    update: Partial<T>;
+    setUpdate: React.Dispatch<SetStateAction<Partial<T>>>;
+    disabled: boolean;
+    onSave: () => Promise<unknown>;
+    titleOther?: ReactNode;
+    disableSidebar?: boolean;
+    fileContentsLanguage?: MonacoLanguage;
+    enableFancyToml?: boolean;
+    groups: Record<string, // Section key
+    // Section key
+    ConfigGroupArgs<T>[] | false | undefined>;
+}
+declare function Config<T>({ original, update, setUpdate, disabled, onSave, titleOther, disableSidebar, fileContentsLanguage, enableFancyToml, groups: _groups, }: ConfigProps<T>): react_jsx_runtime.JSX.Element;
+
+export { Config, type ConfigFieldArgs, ConfigGroup, type ConfigGroupArgs, type ConfigProps };