mogh_ui 0.1.0

package/dist/components/loading-screen.d.cts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LoaderProps, CenterProps } from '@mantine/core';
+
+declare function LoadingScreen({ size, mt, ...centerProps }: {
+    size?: LoaderProps["size"];
+} & CenterProps): react_jsx_runtime.JSX.Element;
+
+export { LoadingScreen };

package/dist/components/loading-screen.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LoaderProps, CenterProps } from '@mantine/core';
+
+declare function LoadingScreen({ size, mt, ...centerProps }: {
+    size?: LoaderProps["size"];
+} & CenterProps): react_jsx_runtime.JSX.Element;
+
+export { LoadingScreen };

package/dist/components/loading-screen.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { Center, Loader } from "@mantine/core";
+function LoadingScreen({
+  size = "xl",
+  mt = "30vh",
+  ...centerProps
+}) {
+  return /* @__PURE__ */ jsx(Center, { mt, ...centerProps, children: /* @__PURE__ */ jsx(Loader, { size }) });
+}
+export {
+  LoadingScreen
+};
+//# sourceMappingURL=loading-screen.js.map

package/dist/components/loading-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/loading-screen.tsx"],"sourcesContent":["import { Center, CenterProps, Loader, LoaderProps } from \"@mantine/core\";\n\nexport function LoadingScreen({\n  size = \"xl\",\n  mt = \"30vh\",\n  ...centerProps\n}: {\n  size?: LoaderProps[\"size\"];\n} & CenterProps) {\n  return (\n    <Center mt={mt} {...centerProps}>\n      <Loader size={size} />\n    </Center>\n  );\n}\n"],"mappings":"AAWM;AAXN,SAAS,QAAqB,cAA2B;AAElD,SAAS,cAAc;AAAA,EAC5B,OAAO;AAAA,EACP,KAAK;AAAA,EACL,GAAG;AACL,GAEiB;AACf,SACE,oBAAC,UAAO,IAAS,GAAG,aAClB,8BAAC,UAAO,MAAY,GACtB;AAEJ;","names":[]}

package/dist/components/mobile-friendly-tabs.cjs

@@ -0,0 +1,141 @@
+"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 mobile_friendly_tabs_exports = {};
+__export(mobile_friendly_tabs_exports, {
+  MobileFriendlyTabs: () => MobileFriendlyTabs,
+  MobileFriendlyTabsContent: () => MobileFriendlyTabsContent,
+  MobileFriendlyTabsSelector: () => MobileFriendlyTabsSelector,
+  MobileFriendlyTabsWrapper: () => MobileFriendlyTabsWrapper
+});
+module.exports = __toCommonJS(mobile_friendly_tabs_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@mantine/core");
+var import_lucide_react = require("lucide-react");
+function MobileFriendlyTabs(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    MobileFriendlyTabsWrapper,
+    {
+      Selector: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MobileFriendlyTabsSelector, { ...props }),
+      tabs: props.tabs,
+      value: props.value,
+      ...props.tabsProps
+    }
+  );
+}
+function MobileFriendlyTabsWrapper({
+  Selector,
+  tabs,
+  value,
+  children,
+  ...tabsProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Tabs, { value, ...tabsProps, children: [
+    Selector,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { mt: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MobileFriendlyTabsContent, { tabs, value }) })
+  ] });
+}
+function MobileFriendlyTabsSelector({
+  tabs: _tabs,
+  actions,
+  value,
+  onValueChange,
+  changeAt: _changeAt,
+  fullIconSize = "1.1rem",
+  mobileIconSize = "1rem",
+  tabProps
+}) {
+  const tabs = _tabs.filter((t) => !t.hidden);
+  const changeAt = _changeAt ?? (tabs.length > 6 ? "lg" : tabs.length > 3 ? "md" : "sm");
+  const SelectedIcon = tabs.find((tab) => tab.value === value)?.icon;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { justify: "space-between", visibleFrom: changeAt, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Tabs.List, { children: tabs.map(({ value: tabValue, label, icon: Icon, disabled }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_core.Tabs.Tab,
+        {
+          value: tabValue,
+          disabled,
+          onClick: () => onValueChange(tabValue),
+          w: "fit-content",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_core.Group,
+            {
+              gap: "xs",
+              fz: "lg",
+              justify: "center",
+              c: tabValue === value ? void 0 : "dimmed",
+              w: 100,
+              miw: "fit-content",
+              wrap: "nowrap",
+              ...tabProps,
+              children: [
+                Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: fullIconSize }),
+                label ?? tabValue
+              ]
+            }
+          )
+        },
+        tabValue
+      )) }),
+      actions
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { hiddenFrom: changeAt, w: "100%", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_core.Select,
+        {
+          w: { base: "100%", md: 300 },
+          value,
+          onChange: (value2) => value2 && onValueChange(value2),
+          leftSection: SelectedIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectedIcon, { size: "1rem" }),
+          data: tabs.map((tab) => ({
+            value: tab.value,
+            label: tab.label ?? tab.value,
+            disabled: tab.disabled
+          })),
+          renderOption: ({ option, checked }) => {
+            const Icon = tabs.find((tab) => tab.value === option.value)?.icon;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { gap: "xs", p: "0.25rem", ...tabProps, children: [
+              Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: mobileIconSize }),
+              option.label,
+              checked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { size: "1rem" })
+            ] });
+          },
+          withScrollArea: false,
+          styles: {
+            dropdown: { maxHeight: "calc(100vh - 230px)", overflowY: "auto" }
+          }
+        }
+      ),
+      actions
+    ] })
+  ] });
+}
+function MobileFriendlyTabsContent({
+  tabs,
+  value
+}) {
+  return tabs.find((tab) => tab.value === value)?.content;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MobileFriendlyTabs,
+  MobileFriendlyTabsContent,
+  MobileFriendlyTabsSelector,
+  MobileFriendlyTabsWrapper
+});
+//# sourceMappingURL=mobile-friendly-tabs.cjs.map

package/dist/components/mobile-friendly-tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/mobile-friendly-tabs.tsx"],"sourcesContent":["import {\n  Box,\n  Group,\n  GroupProps,\n  MantineBreakpoint,\n  Select,\n  Stack,\n  Tabs,\n  TabsProps,\n} from \"@mantine/core\";\nimport { FC, ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\n\nexport interface Tab {\n  label?: string;\n  icon?: FC<{ size?: string | number }>;\n  hidden?: boolean;\n  disabled?: boolean;\n  value: string;\n  content: ReactNode;\n}\n\nexport type TabNoContent = Omit<Tab, \"content\">;\n\nexport interface MobileFriendlyTabsProps extends MobileFriendlyTabsSelectorProps {\n  tabs: Tab[];\n  tabsProps?: Omit<TabsProps, \"value\">;\n}\n\nexport function MobileFriendlyTabs(props: MobileFriendlyTabsProps) {\n  return (\n    <MobileFriendlyTabsWrapper\n      Selector={<MobileFriendlyTabsSelector {...props} />}\n      tabs={props.tabs}\n      value={props.value}\n      {...props.tabsProps}\n    />\n  );\n}\n\nexport interface MobileFriendlyTabsWrapper extends TabsProps {\n  Selector: ReactNode;\n  tabs: Tab[];\n  value: string;\n}\n\nexport function MobileFriendlyTabsWrapper({\n  Selector,\n  tabs,\n  value,\n  children,\n  ...tabsProps\n}: MobileFriendlyTabsWrapper) {\n  return (\n    <Tabs value={value} {...tabsProps}>\n      {Selector}\n      <Box mt=\"xl\">\n        <MobileFriendlyTabsContent tabs={tabs} value={value} />\n      </Box>\n    </Tabs>\n  );\n}\n\nexport interface MobileFriendlyTabsSelectorProps {\n  tabs: TabNoContent[];\n  actions?: ReactNode;\n  value: string;\n  onValueChange: (value: string) => void;\n  changeAt?: MantineBreakpoint;\n  fullIconSize?: string | number;\n  mobileIconSize?: string | number;\n  tabProps?: GroupProps;\n}\n\nexport function MobileFriendlyTabsSelector({\n  tabs: _tabs,\n  actions,\n  value,\n  onValueChange,\n  changeAt: _changeAt,\n  fullIconSize = \"1.1rem\",\n  mobileIconSize = \"1rem\",\n  tabProps,\n}: MobileFriendlyTabsSelectorProps) {\n  const tabs = _tabs.filter((t) => !t.hidden);\n  const changeAt =\n    _changeAt ?? (tabs.length > 6 ? \"lg\" : tabs.length > 3 ? \"md\" : \"sm\");\n  const SelectedIcon = tabs.find((tab) => tab.value === value)?.icon;\n  return (\n    <>\n      {/* DESKTOP VIEW */}\n      <Group justify=\"space-between\" visibleFrom={changeAt}>\n        <Tabs.List>\n          {tabs.map(({ value: tabValue, label, icon: Icon, disabled }) => (\n            <Tabs.Tab\n              key={tabValue}\n              value={tabValue}\n              disabled={disabled}\n              onClick={() => onValueChange(tabValue)}\n              w=\"fit-content\"\n            >\n              <Group\n                gap=\"xs\"\n                fz=\"lg\"\n                justify=\"center\"\n                c={tabValue === value ? undefined : \"dimmed\"}\n                w={100}\n                miw=\"fit-content\"\n                wrap=\"nowrap\"\n                {...tabProps}\n              >\n                {Icon && <Icon size={fullIconSize} />}\n                {label ?? tabValue}\n              </Group>\n            </Tabs.Tab>\n          ))}\n        </Tabs.List>\n        {actions}\n      </Group>\n\n      {/* MOBILE VIEW */}\n      <Stack hiddenFrom={changeAt} w=\"100%\">\n        <Select\n          w={{ base: \"100%\", md: 300 }}\n          value={value}\n          onChange={(value) => value && onValueChange(value)}\n          leftSection={SelectedIcon && <SelectedIcon size=\"1rem\" />}\n          data={tabs.map((tab) => ({\n            value: tab.value,\n            label: tab.label ?? tab.value,\n            disabled: tab.disabled,\n          }))}\n          renderOption={({ option, checked }) => {\n            const Icon = tabs.find((tab) => tab.value === option.value)?.icon;\n            return (\n              <Group gap=\"xs\" p=\"0.25rem\" {...tabProps}>\n                {Icon && <Icon size={mobileIconSize} />}\n                {option.label}\n                {checked && <Check size=\"1rem\" />}\n              </Group>\n            );\n          }}\n          withScrollArea={false}\n          styles={{\n            dropdown: { maxHeight: \"calc(100vh - 230px)\", overflowY: \"auto\" },\n          }}\n        />\n        {actions}\n      </Stack>\n    </>\n  );\n}\n\nexport function MobileFriendlyTabsContent({\n  tabs,\n  value,\n}: {\n  tabs: Tab[];\n  value: string;\n}) {\n  return tabs.find((tab) => tab.value === value)?.content;\n}\n"],"mappings":"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","names":["value"]}

package/dist/components/mobile-friendly-tabs.d.cts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MantineBreakpoint, GroupProps, TabsProps } from '@mantine/core';
+import { FC, ReactNode } from 'react';
+
+interface Tab {
+    label?: string;
+    icon?: FC<{
+        size?: string | number;
+    }>;
+    hidden?: boolean;
+    disabled?: boolean;
+    value: string;
+    content: ReactNode;
+}
+type TabNoContent = Omit<Tab, "content">;
+interface MobileFriendlyTabsProps extends MobileFriendlyTabsSelectorProps {
+    tabs: Tab[];
+    tabsProps?: Omit<TabsProps, "value">;
+}
+declare function MobileFriendlyTabs(props: MobileFriendlyTabsProps): react_jsx_runtime.JSX.Element;
+interface MobileFriendlyTabsWrapper extends TabsProps {
+    Selector: ReactNode;
+    tabs: Tab[];
+    value: string;
+}
+declare function MobileFriendlyTabsWrapper({ Selector, tabs, value, children, ...tabsProps }: MobileFriendlyTabsWrapper): react_jsx_runtime.JSX.Element;
+interface MobileFriendlyTabsSelectorProps {
+    tabs: TabNoContent[];
+    actions?: ReactNode;
+    value: string;
+    onValueChange: (value: string) => void;
+    changeAt?: MantineBreakpoint;
+    fullIconSize?: string | number;
+    mobileIconSize?: string | number;
+    tabProps?: GroupProps;
+}
+declare function MobileFriendlyTabsSelector({ tabs: _tabs, actions, value, onValueChange, changeAt: _changeAt, fullIconSize, mobileIconSize, tabProps, }: MobileFriendlyTabsSelectorProps): react_jsx_runtime.JSX.Element;
+declare function MobileFriendlyTabsContent({ tabs, value, }: {
+    tabs: Tab[];
+    value: string;
+}): ReactNode;
+
+export { MobileFriendlyTabs, MobileFriendlyTabsContent, type MobileFriendlyTabsProps, MobileFriendlyTabsSelector, type MobileFriendlyTabsSelectorProps, MobileFriendlyTabsWrapper, type Tab, type TabNoContent };

package/dist/components/mobile-friendly-tabs.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MantineBreakpoint, GroupProps, TabsProps } from '@mantine/core';
+import { FC, ReactNode } from 'react';
+
+interface Tab {
+    label?: string;
+    icon?: FC<{
+        size?: string | number;
+    }>;
+    hidden?: boolean;
+    disabled?: boolean;
+    value: string;
+    content: ReactNode;
+}
+type TabNoContent = Omit<Tab, "content">;
+interface MobileFriendlyTabsProps extends MobileFriendlyTabsSelectorProps {
+    tabs: Tab[];
+    tabsProps?: Omit<TabsProps, "value">;
+}
+declare function MobileFriendlyTabs(props: MobileFriendlyTabsProps): react_jsx_runtime.JSX.Element;
+interface MobileFriendlyTabsWrapper extends TabsProps {
+    Selector: ReactNode;
+    tabs: Tab[];
+    value: string;
+}
+declare function MobileFriendlyTabsWrapper({ Selector, tabs, value, children, ...tabsProps }: MobileFriendlyTabsWrapper): react_jsx_runtime.JSX.Element;
+interface MobileFriendlyTabsSelectorProps {
+    tabs: TabNoContent[];
+    actions?: ReactNode;
+    value: string;
+    onValueChange: (value: string) => void;
+    changeAt?: MantineBreakpoint;
+    fullIconSize?: string | number;
+    mobileIconSize?: string | number;
+    tabProps?: GroupProps;
+}
+declare function MobileFriendlyTabsSelector({ tabs: _tabs, actions, value, onValueChange, changeAt: _changeAt, fullIconSize, mobileIconSize, tabProps, }: MobileFriendlyTabsSelectorProps): react_jsx_runtime.JSX.Element;
+declare function MobileFriendlyTabsContent({ tabs, value, }: {
+    tabs: Tab[];
+    value: string;
+}): ReactNode;
+
+export { MobileFriendlyTabs, MobileFriendlyTabsContent, type MobileFriendlyTabsProps, MobileFriendlyTabsSelector, type MobileFriendlyTabsSelectorProps, MobileFriendlyTabsWrapper, type Tab, type TabNoContent };

package/dist/components/mobile-friendly-tabs.js

@@ -0,0 +1,120 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Box,
+  Group,
+  Select,
+  Stack,
+  Tabs
+} from "@mantine/core";
+import { Check } from "lucide-react";
+function MobileFriendlyTabs(props) {
+  return /* @__PURE__ */ jsx(
+    MobileFriendlyTabsWrapper,
+    {
+      Selector: /* @__PURE__ */ jsx(MobileFriendlyTabsSelector, { ...props }),
+      tabs: props.tabs,
+      value: props.value,
+      ...props.tabsProps
+    }
+  );
+}
+function MobileFriendlyTabsWrapper({
+  Selector,
+  tabs,
+  value,
+  children,
+  ...tabsProps
+}) {
+  return /* @__PURE__ */ jsxs(Tabs, { value, ...tabsProps, children: [
+    Selector,
+    /* @__PURE__ */ jsx(Box, { mt: "xl", children: /* @__PURE__ */ jsx(MobileFriendlyTabsContent, { tabs, value }) })
+  ] });
+}
+function MobileFriendlyTabsSelector({
+  tabs: _tabs,
+  actions,
+  value,
+  onValueChange,
+  changeAt: _changeAt,
+  fullIconSize = "1.1rem",
+  mobileIconSize = "1rem",
+  tabProps
+}) {
+  const tabs = _tabs.filter((t) => !t.hidden);
+  const changeAt = _changeAt ?? (tabs.length > 6 ? "lg" : tabs.length > 3 ? "md" : "sm");
+  const SelectedIcon = tabs.find((tab) => tab.value === value)?.icon;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", visibleFrom: changeAt, children: [
+      /* @__PURE__ */ jsx(Tabs.List, { children: tabs.map(({ value: tabValue, label, icon: Icon, disabled }) => /* @__PURE__ */ jsx(
+        Tabs.Tab,
+        {
+          value: tabValue,
+          disabled,
+          onClick: () => onValueChange(tabValue),
+          w: "fit-content",
+          children: /* @__PURE__ */ jsxs(
+            Group,
+            {
+              gap: "xs",
+              fz: "lg",
+              justify: "center",
+              c: tabValue === value ? void 0 : "dimmed",
+              w: 100,
+              miw: "fit-content",
+              wrap: "nowrap",
+              ...tabProps,
+              children: [
+                Icon && /* @__PURE__ */ jsx(Icon, { size: fullIconSize }),
+                label ?? tabValue
+              ]
+            }
+          )
+        },
+        tabValue
+      )) }),
+      actions
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { hiddenFrom: changeAt, w: "100%", children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          w: { base: "100%", md: 300 },
+          value,
+          onChange: (value2) => value2 && onValueChange(value2),
+          leftSection: SelectedIcon && /* @__PURE__ */ jsx(SelectedIcon, { size: "1rem" }),
+          data: tabs.map((tab) => ({
+            value: tab.value,
+            label: tab.label ?? tab.value,
+            disabled: tab.disabled
+          })),
+          renderOption: ({ option, checked }) => {
+            const Icon = tabs.find((tab) => tab.value === option.value)?.icon;
+            return /* @__PURE__ */ jsxs(Group, { gap: "xs", p: "0.25rem", ...tabProps, children: [
+              Icon && /* @__PURE__ */ jsx(Icon, { size: mobileIconSize }),
+              option.label,
+              checked && /* @__PURE__ */ jsx(Check, { size: "1rem" })
+            ] });
+          },
+          withScrollArea: false,
+          styles: {
+            dropdown: { maxHeight: "calc(100vh - 230px)", overflowY: "auto" }
+          }
+        }
+      ),
+      actions
+    ] })
+  ] });
+}
+function MobileFriendlyTabsContent({
+  tabs,
+  value
+}) {
+  return tabs.find((tab) => tab.value === value)?.content;
+}
+export {
+  MobileFriendlyTabs,
+  MobileFriendlyTabsContent,
+  MobileFriendlyTabsSelector,
+  MobileFriendlyTabsWrapper
+};
+//# sourceMappingURL=mobile-friendly-tabs.js.map

package/dist/components/mobile-friendly-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/mobile-friendly-tabs.tsx"],"sourcesContent":["import {\n  Box,\n  Group,\n  GroupProps,\n  MantineBreakpoint,\n  Select,\n  Stack,\n  Tabs,\n  TabsProps,\n} from \"@mantine/core\";\nimport { FC, ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\n\nexport interface Tab {\n  label?: string;\n  icon?: FC<{ size?: string | number }>;\n  hidden?: boolean;\n  disabled?: boolean;\n  value: string;\n  content: ReactNode;\n}\n\nexport type TabNoContent = Omit<Tab, \"content\">;\n\nexport interface MobileFriendlyTabsProps extends MobileFriendlyTabsSelectorProps {\n  tabs: Tab[];\n  tabsProps?: Omit<TabsProps, \"value\">;\n}\n\nexport function MobileFriendlyTabs(props: MobileFriendlyTabsProps) {\n  return (\n    <MobileFriendlyTabsWrapper\n      Selector={<MobileFriendlyTabsSelector {...props} />}\n      tabs={props.tabs}\n      value={props.value}\n      {...props.tabsProps}\n    />\n  );\n}\n\nexport interface MobileFriendlyTabsWrapper extends TabsProps {\n  Selector: ReactNode;\n  tabs: Tab[];\n  value: string;\n}\n\nexport function MobileFriendlyTabsWrapper({\n  Selector,\n  tabs,\n  value,\n  children,\n  ...tabsProps\n}: MobileFriendlyTabsWrapper) {\n  return (\n    <Tabs value={value} {...tabsProps}>\n      {Selector}\n      <Box mt=\"xl\">\n        <MobileFriendlyTabsContent tabs={tabs} value={value} />\n      </Box>\n    </Tabs>\n  );\n}\n\nexport interface MobileFriendlyTabsSelectorProps {\n  tabs: TabNoContent[];\n  actions?: ReactNode;\n  value: string;\n  onValueChange: (value: string) => void;\n  changeAt?: MantineBreakpoint;\n  fullIconSize?: string | number;\n  mobileIconSize?: string | number;\n  tabProps?: GroupProps;\n}\n\nexport function MobileFriendlyTabsSelector({\n  tabs: _tabs,\n  actions,\n  value,\n  onValueChange,\n  changeAt: _changeAt,\n  fullIconSize = \"1.1rem\",\n  mobileIconSize = \"1rem\",\n  tabProps,\n}: MobileFriendlyTabsSelectorProps) {\n  const tabs = _tabs.filter((t) => !t.hidden);\n  const changeAt =\n    _changeAt ?? (tabs.length > 6 ? \"lg\" : tabs.length > 3 ? \"md\" : \"sm\");\n  const SelectedIcon = tabs.find((tab) => tab.value === value)?.icon;\n  return (\n    <>\n      {/* DESKTOP VIEW */}\n      <Group justify=\"space-between\" visibleFrom={changeAt}>\n        <Tabs.List>\n          {tabs.map(({ value: tabValue, label, icon: Icon, disabled }) => (\n            <Tabs.Tab\n              key={tabValue}\n              value={tabValue}\n              disabled={disabled}\n              onClick={() => onValueChange(tabValue)}\n              w=\"fit-content\"\n            >\n              <Group\n                gap=\"xs\"\n                fz=\"lg\"\n                justify=\"center\"\n                c={tabValue === value ? undefined : \"dimmed\"}\n                w={100}\n                miw=\"fit-content\"\n                wrap=\"nowrap\"\n                {...tabProps}\n              >\n                {Icon && <Icon size={fullIconSize} />}\n                {label ?? tabValue}\n              </Group>\n            </Tabs.Tab>\n          ))}\n        </Tabs.List>\n        {actions}\n      </Group>\n\n      {/* MOBILE VIEW */}\n      <Stack hiddenFrom={changeAt} w=\"100%\">\n        <Select\n          w={{ base: \"100%\", md: 300 }}\n          value={value}\n          onChange={(value) => value && onValueChange(value)}\n          leftSection={SelectedIcon && <SelectedIcon size=\"1rem\" />}\n          data={tabs.map((tab) => ({\n            value: tab.value,\n            label: tab.label ?? tab.value,\n            disabled: tab.disabled,\n          }))}\n          renderOption={({ option, checked }) => {\n            const Icon = tabs.find((tab) => tab.value === option.value)?.icon;\n            return (\n              <Group gap=\"xs\" p=\"0.25rem\" {...tabProps}>\n                {Icon && <Icon size={mobileIconSize} />}\n                {option.label}\n                {checked && <Check size=\"1rem\" />}\n              </Group>\n            );\n          }}\n          withScrollArea={false}\n          styles={{\n            dropdown: { maxHeight: \"calc(100vh - 230px)\", overflowY: \"auto\" },\n          }}\n        />\n        {actions}\n      </Stack>\n    </>\n  );\n}\n\nexport function MobileFriendlyTabsContent({\n  tabs,\n  value,\n}: {\n  tabs: Tab[];\n  value: string;\n}) {\n  return tabs.find((tab) => tab.value === value)?.content;\n}\n"],"mappings":"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","names":["value"]}

package/dist/components/monaco/index.cjs

@@ -0,0 +1,244 @@
+"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);
+var monaco_exports = {};
+__export(monaco_exports, {
+  MonacoDiffEditor: () => MonacoDiffEditor,
+  MonacoEditor: () => MonacoEditor,
+  languageFromPath: () => languageFromPath
+});
+module.exports = __toCommonJS(monaco_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_init = require("./init");
+var import_react = require("react");
+var import_react2 = require("@monaco-editor/react");
+var monaco = __toESM(require("monaco-editor"), 1);
+var prettier = __toESM(require("prettier/standalone"), 1);
+var pluginTypescript = __toESM(require("prettier/plugins/typescript"), 1);
+var pluginEsTree = __toESM(require("prettier/plugins/estree"), 1);
+var pluginYaml = __toESM(require("prettier/plugins/yaml"), 1);
+var import_hooks = require("@mantine/hooks");
+var import_core = require("@mantine/core");
+const MIN_EDITOR_HEIGHT = 56;
+const LANGUAGE_EXTENSIONS = {
+  yaml: [".yaml", ".yml"],
+  toml: [".toml"],
+  fancy_toml: [],
+  json: [".json"],
+  key_value: [".env", ".conf"],
+  ini: [".ini"],
+  string_list: [],
+  shell: [".sh", ".bash", ".zsh"],
+  dockerfile: ["Dockerfile"],
+  rust: [".rs"],
+  javascript: [".js", ".jsx", ".mjs", ".cjs"],
+  typescript: [".ts", ".tsx"]
+};
+function languageFromPath(path) {
+  for (const [lang, extensions] of Object.entries(LANGUAGE_EXTENSIONS)) {
+    for (const extension of extensions) {
+      if (path.endsWith(extension)) {
+        return lang;
+      }
+    }
+  }
+  return void 0;
+}
+function MonacoEditor({
+  value,
+  onValueChange,
+  language: _language,
+  enableFancyToml,
+  readOnly,
+  filename,
+  minHeight,
+  maxHeightProportion,
+  maxHeight,
+  id,
+  ...boxProps
+}) {
+  const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
+  const dimensions = (0, import_hooks.useViewportSize)();
+  const [editor, setEditor] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    let node = editor.getDomNode();
+    if (!node) return;
+    const callback = (e) => {
+      if (e.key === "Escape") {
+        document.activeElement?.blur?.();
+      }
+    };
+    node.addEventListener("keydown", callback);
+    return () => node.removeEventListener("keydown", callback);
+  }, [editor]);
+  (0, import_react.useEffect)(() => {
+    if (language !== "typescript" && language !== "javascript" && language !== "yaml")
+      return;
+    if (!editor) return;
+    editor.addCommand(
+      monaco.KeyMod.Alt | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
+      async () => {
+        if (!editor) return;
+        const model = editor.getModel();
+        if (!model) return;
+        const position = editor.getPosition();
+        let beforeOffset = (position && model.getOffsetAt(position)) ?? 0;
+        const curr = editor.getValue();
+        const { formatted, cursorOffset } = await prettier.formatWithCursor(
+          curr,
+          {
+            cursorOffset: beforeOffset,
+            parser: language === "yaml" ? "yaml" : "typescript",
+            plugins: language === "yaml" ? [pluginYaml] : [pluginTypescript, pluginEsTree],
+            printWidth: 80
+            // Set the desired max line length
+          }
+        );
+        editor.setValue(formatted);
+        editor.setPosition(model.getPositionAt(cursorOffset));
+      }
+    );
+  }, [editor]);
+  const line_count = value?.split(/\r\n|\r|\n/).length ?? 0;
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    const contentHeight = line_count * 18 + 30;
+    const containerNode = editor.getContainerDomNode();
+    containerNode.style.height = `${Math.max(
+      Math.min(
+        contentHeight,
+        Math.floor(dimensions.height * 0.75),
+        maxHeightProportion ? Math.floor(maxHeightProportion * dimensions.height) : 1e4,
+        maxHeight ?? 1e4
+      ),
+      minHeight ?? MIN_EDITOR_HEIGHT
+    )}px`;
+  }, [dimensions.height, editor, line_count]);
+  const currentTheme = (0, import_core.useComputedColorScheme)();
+  const options = {
+    minimap: { enabled: false },
+    // scrollbar: { alwaysConsumeMouseWheel: false },
+    scrollBeyondLastLine: false,
+    folding: false,
+    automaticLayout: true,
+    renderValidationDecorations: "on",
+    renderLineHighlightOnlyWhenFocus: true,
+    readOnly,
+    tabSize: 2,
+    detectIndentation: true,
+    quickSuggestions: true,
+    padding: {
+      top: 15
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react2.Editor,
+    {
+      language,
+      value,
+      theme: currentTheme,
+      defaultPath: defaultPath(filename),
+      options,
+      onChange: (v) => onValueChange?.(v ?? ""),
+      onMount: (editor2) => setEditor(editor2)
+    }
+  ) });
+}
+function defaultPath(filename) {
+  if (!filename) return void 0;
+  const split = filename.split("/");
+  return split[split.length - 1];
+}
+const MIN_DIFF_HEIGHT = 100;
+const MAX_DIFF_HEIGHT = 600;
+function MonacoDiffEditor({
+  original,
+  modified,
+  onModifiedValueChange,
+  language: _language,
+  enableFancyToml,
+  readOnly,
+  id,
+  hideUnchangedRegions = true,
+  ...boxProps
+}) {
+  const language = _language === "fancy_toml" && !enableFancyToml ? "toml" : _language;
+  const [editor, setEditor] = (0, import_react.useState)(null);
+  const original_line_count = original?.split(/\r\n|\r|\n/).length ?? 0;
+  const modified_line_count = modified?.split(/\r\n|\r|\n/).length ?? 0;
+  const line_count = Math.max(original_line_count, modified_line_count);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    const contentHeight = line_count * 18 + 30;
+    const node = editor.getContainerDomNode();
+    node.style.height = `${Math.max(
+      Math.min(contentHeight, MAX_DIFF_HEIGHT),
+      MIN_DIFF_HEIGHT
+    )}px`;
+  }, [editor, line_count]);
+  const currentTheme = (0, import_core.useComputedColorScheme)();
+  const options = {
+    minimap: { enabled: true },
+    scrollbar: { alwaysConsumeMouseWheel: false },
+    scrollBeyondLastLine: false,
+    hideUnchangedRegions: { enabled: hideUnchangedRegions },
+    folding: false,
+    automaticLayout: true,
+    renderValidationDecorations: "on",
+    renderLineHighlightOnlyWhenFocus: true,
+    readOnly,
+    padding: {
+      top: 15
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Box, { id, onKeyDown: (e) => e.stopPropagation(), ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react2.DiffEditor,
+    {
+      language,
+      original,
+      modified,
+      theme: currentTheme,
+      options,
+      onMount: (editor2) => {
+        const modifiedEditor = editor2.getModifiedEditor();
+        modifiedEditor.onDidChangeModelContent((_) => {
+          onModifiedValueChange?.(modifiedEditor.getValue());
+        });
+        setEditor(editor2);
+      }
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MonacoDiffEditor,
+  MonacoEditor,
+  languageFromPath
+});
+//# sourceMappingURL=index.cjs.map