mogh_ui 0.1.0

package/dist/theme.js

@@ -0,0 +1,330 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Code,
+  colorsTuple,
+  Combobox,
+  createTheme,
+  darken,
+  Drawer,
+  Fieldset,
+  HoverCard,
+  Input,
+  lighten,
+  MantineProvider,
+  MenuDropdown,
+  Modal,
+  MultiSelect,
+  PopoverDropdown,
+  Progress,
+  SegmentedControl,
+  Select,
+  Switch,
+  Table,
+  Tabs,
+  virtualColor
+} from "@mantine/core";
+import { hexColorByIntention } from "./color";
+const LIGHT_BODY = "#f8f9fa";
+const DARK_BODY = "#0f1115";
+const DEFAULT_COLOR_SCHEME = "auto";
+function ThemeProvider({
+  children,
+  additionalColors
+}) {
+  return /* @__PURE__ */ jsx(
+    MantineProvider,
+    {
+      theme: theme(additionalColors),
+      cssVariablesResolver,
+      defaultColorScheme: DEFAULT_COLOR_SCHEME,
+      children
+    }
+  );
+}
+function theme(additionalColors) {
+  return createTheme({
+    cursorType: "pointer",
+    primaryColor: "accent",
+    breakpoints: {
+      xs: "36em",
+      sm: "48em",
+      md: "66em",
+      lg: "82em",
+      xl: "96em",
+      xl2: "110em",
+      xl3: "126em",
+      xl4: "142em"
+    },
+    colors: {
+      // Accent background color
+      lightAccent: functionColorsTuple(
+        darken(LIGHT_BODY, 0.02),
+        (color) => darken(color, 0.01)
+      ),
+      darkAccent: functionColorsTuple(
+        lighten(DARK_BODY, 0.025),
+        (color) => lighten(color, 0.02)
+      ),
+      accent: virtualColor({
+        name: "accent",
+        light: "lightAccent",
+        dark: "darkAccent"
+      }),
+      // Accent border color
+      lightAccentBorder: functionColorsTuple(
+        darken(LIGHT_BODY, 0.1),
+        (color) => darken(color, 0.01)
+      ),
+      darkAccentBorder: functionColorsTuple(
+        lighten(DARK_BODY, 0.08),
+        (color) => lighten(color, 0.03)
+      ),
+      "accent-border": virtualColor({
+        name: "accent-border",
+        light: "lightAccentBorder",
+        dark: "darkAccentBorder"
+      }),
+      lightBw: colorsTuple("#000000"),
+      darkBw: colorsTuple("#FFFFFF"),
+      bw: virtualColor({
+        name: "bw",
+        light: "lightBw",
+        dark: "darkBw"
+      }),
+      // Intention colors
+      Good: colorsTuple(hexColorByIntention("Good")),
+      Neutral: colorsTuple(hexColorByIntention("Neutral")),
+      Warning: colorsTuple(hexColorByIntention("Warning")),
+      Critical: colorsTuple(hexColorByIntention("Critical")),
+      Unknown: colorsTuple(hexColorByIntention("Unknown")),
+      // Additional colors (eg tags)
+      ...additionalColors
+    },
+    components: {
+      Input: Input.extend({
+        vars: (theme2) => ({
+          wrapper: {
+            "--input-radius": theme2.radius.sm
+          }
+        }),
+        styles: (theme2) => ({
+          input: {
+            backgroundColor: theme2.colors.accent[1],
+            border: "1px solid " + theme2.colors["accent-border"][4]
+          }
+        })
+      }),
+      Select: Select.extend({
+        styles: (theme2) => ({
+          input: {
+            backgroundColor: theme2.colors.accent[1],
+            border: "1px solid " + theme2.colors["accent-border"][4]
+          },
+          dropdown: {
+            backgroundColor: theme2.colors.accent[1],
+            borderColor: theme2.colors["accent-border"][4]
+          }
+        })
+      }),
+      MultiSelect: MultiSelect.extend({
+        styles: (theme2) => ({
+          input: {
+            backgroundColor: theme2.colors.accent[1],
+            border: "1px solid " + theme2.colors["accent-border"][4]
+          },
+          dropdown: {
+            backgroundColor: theme2.colors.accent[1],
+            borderColor: theme2.colors["accent-border"][4]
+          }
+        }),
+        defaultProps: {
+          maxDropdownHeight: 250
+        }
+      }),
+      Combobox: Combobox.extend({
+        styles: (theme2) => ({
+          dropdown: {
+            backgroundColor: theme2.colors.accent[1],
+            border: "1px solid " + theme2.colors["accent-border"][4]
+          }
+        })
+      }),
+      MenuDropdown: MenuDropdown.extend({
+        defaultProps: {
+          bg: "var(--mantine-color-accent-1)",
+          bd: "1px solid var(--mantine-color-accent-border-4)",
+          bdrs: "md"
+        }
+      }),
+      PopoverDropdown: PopoverDropdown.extend({
+        defaultProps: {
+          bg: "var(--mantine-color-accent-1)",
+          bd: "1px solid var(--mantine-color-accent-border-4)",
+          bdrs: "md"
+        }
+      }),
+      HoverCard: HoverCard.extend({
+        styles: (theme2) => ({
+          dropdown: {
+            backgroundColor: theme2.colors.accent[1],
+            border: "1px solid " + theme2.colors["accent-border"][4]
+          }
+        })
+      }),
+      Button: Button.extend({
+        vars: (theme2) => ({
+          root: {
+            "--button-color": theme2.colors.bw[0],
+            "--button-radius": theme2.radius.sm
+          }
+        }),
+        defaultProps: {
+          variant: "default"
+        },
+        classNames: { root: "bordered-heavy-outline" }
+      }),
+      ActionIcon: ActionIcon.extend({
+        vars: (theme2) => ({
+          root: {
+            "--ai-color": theme2.colors.bw[0],
+            "--ai-radius": theme2.radius.sm
+          }
+        })
+      }),
+      Switch: Switch.extend({
+        defaultProps: {
+          color: "green"
+        }
+      }),
+      Badge: Badge.extend({
+        defaultProps: {
+          bdrs: "sm",
+          c: "var(--mantine-color-text)"
+        }
+      }),
+      Table: Table.extend({
+        vars: (theme2) => ({
+          table: {
+            "--table-striped-color": theme2.colors.accent[0],
+            "--table-border-color": theme2.colors["accent-border"][0],
+            "--table-highlight-on-hover-color": theme2.colors["accent-border"][0]
+          }
+        }),
+        defaultProps: {
+          striped: true,
+          highlightOnHover: true
+        }
+      }),
+      Drawer: Drawer.extend({
+        vars: () => ({
+          root: {
+            "--drawer-flex": ""
+          }
+        }),
+        defaultProps: {
+          position: "top",
+          radius: "md"
+        },
+        styles: {
+          inner: { justifyContent: "center" }
+        }
+      }),
+      Modal: Modal.extend({
+        defaultProps: {
+          styles: { content: { borderRadius: "var(--mantine-radius-md)" } }
+        }
+      }),
+      Code: Code.extend({
+        defaultProps: {
+          bg: "var(--mantine-color-accent-0)",
+          bdrs: "sm",
+          p: "md"
+        }
+      }),
+      Fieldset: Fieldset.extend({
+        styles: (theme2) => ({
+          root: {
+            backgroundColor: "var(--mantine-color-body)",
+            borderRadius: theme2.radius.md
+          }
+        }),
+        classNames: { root: "bordered-light" }
+      }),
+      SegmentedControl: SegmentedControl.extend({
+        styles: (theme2) => ({
+          root: {
+            backgroundColor: theme2.colors.accent[2]
+          },
+          indicator: {
+            backgroundColor: theme2.colors.accent[9]
+          }
+        }),
+        classNames: { root: "bordered-heavy" }
+      }),
+      Progress: Progress.extend({
+        styles: (theme2) => ({
+          root: {
+            backgroundColor: theme2.colors.accent[4]
+          }
+        })
+      }),
+      Tabs: Tabs.extend({
+        vars: (theme2) => ({
+          root: {
+            "--tabs-radius": theme2.radius.sm
+          }
+        }),
+        styles: (theme2) => ({
+          list: {
+            backgroundColor: theme2.colors.accent[1],
+            borderRadius: theme2.radius.sm
+          }
+        })
+      })
+    }
+  });
+}
+const cssVariablesResolver = (theme2) => ({
+  variables: {},
+  light: {
+    "--mantine-color-default": theme2.colors.accent[5],
+    "--mantine-color-default-hover": theme2.colors.accent[9],
+    "--mantine-color-default-border": theme2.colors["accent-border"][5],
+    "--mantine-color-disabled": theme2.colors.accent[1]
+  },
+  dark: {
+    "--mantine-color-default": theme2.colors.accent[5],
+    "--mantine-color-default-hover": theme2.colors.accent[9],
+    "--mantine-color-default-border": theme2.colors["accent-border"][5],
+    "--mantine-color-disabled": theme2.colors.accent[1]
+  }
+});
+function opacityColorsTuple(baseHex, length = 10) {
+  return colorsTuple(
+    Array.from({ length }).map(
+      (_, i) => baseHex + (i * 10 + 9).toString(16).padStart(2, "0")
+    )
+  );
+}
+function functionColorsTuple(base, fn, length = 10) {
+  let b = base;
+  const array = [
+    base,
+    ...Array.from({ length: length - 1 }).map(() => {
+      b = fn(b);
+      return b;
+    })
+  ];
+  return colorsTuple(array);
+}
+export {
+  DARK_BODY,
+  LIGHT_BODY,
+  ThemeProvider,
+  functionColorsTuple,
+  opacityColorsTuple
+};
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme.tsx"],"sourcesContent":["import {\n  ActionIcon,\n  Badge,\n  Button,\n  Code,\n  colorsTuple,\n  Combobox,\n  createTheme,\n  CSSVariablesResolver,\n  darken,\n  DefaultMantineColor,\n  Drawer,\n  Fieldset,\n  HoverCard,\n  Input,\n  lighten,\n  MantineColorScheme,\n  MantineColorsTuple,\n  MantineProvider,\n  MenuDropdown,\n  Modal,\n  MultiSelect,\n  PopoverDropdown,\n  Progress,\n  SegmentedControl,\n  Select,\n  Switch,\n  Table,\n  Tabs,\n  virtualColor,\n} from \"@mantine/core\";\nimport { ReactNode } from \"react\";\nimport { hexColorByIntention } from \"./color\";\n\n// Match in ./index.css\nexport const LIGHT_BODY = \"#f8f9fa\";\nexport const DARK_BODY = \"#0f1115\";\n\nconst DEFAULT_COLOR_SCHEME: MantineColorScheme = \"auto\";\n\nexport function ThemeProvider({\n  children,\n  additionalColors,\n}: {\n  children: ReactNode;\n  additionalColors?: AdditionalColors;\n}) {\n  return (\n    <MantineProvider\n      theme={theme(additionalColors)}\n      cssVariablesResolver={cssVariablesResolver}\n      defaultColorScheme={DEFAULT_COLOR_SCHEME}\n    >\n      {children}\n    </MantineProvider>\n  );\n}\n\nexport type AdditionalColors =\n  | Partial<Record<DefaultMantineColor, MantineColorsTuple>>\n  | undefined;\n\nfunction theme(additionalColors?: AdditionalColors) {\n  return createTheme({\n    cursorType: \"pointer\",\n    primaryColor: \"accent\",\n    breakpoints: {\n      xs: \"36em\",\n      sm: \"48em\",\n      md: \"66em\",\n      lg: \"82em\",\n      xl: \"96em\",\n      xl2: \"110em\",\n      xl3: \"126em\",\n      xl4: \"142em\",\n    },\n    colors: {\n      // Accent background color\n      lightAccent: functionColorsTuple(darken(LIGHT_BODY, 0.02), (color) =>\n        darken(color, 0.01),\n      ),\n      darkAccent: functionColorsTuple(lighten(DARK_BODY, 0.025), (color) =>\n        lighten(color, 0.02),\n      ),\n      accent: virtualColor({\n        name: \"accent\",\n        light: \"lightAccent\",\n        dark: \"darkAccent\",\n      }),\n      // Accent border color\n      lightAccentBorder: functionColorsTuple(darken(LIGHT_BODY, 0.1), (color) =>\n        darken(color, 0.01),\n      ),\n      darkAccentBorder: functionColorsTuple(lighten(DARK_BODY, 0.08), (color) =>\n        lighten(color, 0.03),\n      ),\n      \"accent-border\": virtualColor({\n        name: \"accent-border\",\n        light: \"lightAccentBorder\",\n        dark: \"darkAccentBorder\",\n      }),\n      lightBw: colorsTuple(\"#000000\"),\n      darkBw: colorsTuple(\"#FFFFFF\"),\n      bw: virtualColor({\n        name: \"bw\",\n        light: \"lightBw\",\n        dark: \"darkBw\",\n      }),\n      // Intention colors\n      Good: colorsTuple(hexColorByIntention(\"Good\")!),\n      Neutral: colorsTuple(hexColorByIntention(\"Neutral\")!),\n      Warning: colorsTuple(hexColorByIntention(\"Warning\")!),\n      Critical: colorsTuple(hexColorByIntention(\"Critical\")!),\n      Unknown: colorsTuple(hexColorByIntention(\"Unknown\")!),\n      // Additional colors (eg tags)\n      ...additionalColors,\n    },\n    components: {\n      Input: Input.extend({\n        vars: (theme) => ({\n          wrapper: {\n            \"--input-radius\": theme.radius.sm,\n          },\n        }),\n        styles: (theme) => ({\n          input: {\n            backgroundColor: theme.colors.accent[1],\n            border: \"1px solid \" + theme.colors[\"accent-border\"][4],\n          },\n        }),\n      }),\n      Select: Select.extend({\n        styles: (theme) => ({\n          input: {\n            backgroundColor: theme.colors.accent[1],\n            border: \"1px solid \" + theme.colors[\"accent-border\"][4],\n          },\n          dropdown: {\n            backgroundColor: theme.colors.accent[1],\n            borderColor: theme.colors[\"accent-border\"][4],\n          },\n        }),\n      }),\n      MultiSelect: MultiSelect.extend({\n        styles: (theme) => ({\n          input: {\n            backgroundColor: theme.colors.accent[1],\n            border: \"1px solid \" + theme.colors[\"accent-border\"][4],\n          },\n          dropdown: {\n            backgroundColor: theme.colors.accent[1],\n            borderColor: theme.colors[\"accent-border\"][4],\n          },\n        }),\n        defaultProps: {\n          maxDropdownHeight: 250,\n        },\n      }),\n      Combobox: Combobox.extend({\n        styles: (theme) => ({\n          dropdown: {\n            backgroundColor: theme.colors.accent[1],\n            border: \"1px solid \" + theme.colors[\"accent-border\"][4],\n          },\n        }),\n      }),\n      MenuDropdown: MenuDropdown.extend({\n        defaultProps: {\n          bg: \"var(--mantine-color-accent-1)\",\n          bd: \"1px solid var(--mantine-color-accent-border-4)\",\n          bdrs: \"md\",\n        },\n      }),\n      PopoverDropdown: PopoverDropdown.extend({\n        defaultProps: {\n          bg: \"var(--mantine-color-accent-1)\",\n          bd: \"1px solid var(--mantine-color-accent-border-4)\",\n          bdrs: \"md\",\n        },\n      }),\n      HoverCard: HoverCard.extend({\n        styles: (theme) => ({\n          dropdown: {\n            backgroundColor: theme.colors.accent[1],\n            border: \"1px solid \" + theme.colors[\"accent-border\"][4],\n          },\n        }),\n      }),\n      Button: Button.extend({\n        vars: (theme) => ({\n          root: {\n            \"--button-color\": theme.colors.bw[0],\n            \"--button-radius\": theme.radius.sm,\n          },\n        }),\n        defaultProps: {\n          variant: \"default\",\n        },\n        classNames: { root: \"bordered-heavy-outline\" },\n      }),\n      ActionIcon: ActionIcon.extend({\n        vars: (theme) => ({\n          root: {\n            \"--ai-color\": theme.colors.bw[0],\n            \"--ai-radius\": theme.radius.sm,\n          },\n        }),\n      }),\n      Switch: Switch.extend({\n        defaultProps: {\n          color: \"green\",\n        },\n      }),\n      Badge: Badge.extend({\n        defaultProps: {\n          bdrs: \"sm\",\n          c: \"var(--mantine-color-text)\",\n        },\n      }),\n      Table: Table.extend({\n        vars: (theme) => ({\n          table: {\n            \"--table-striped-color\": theme.colors.accent[0],\n            \"--table-border-color\": theme.colors[\"accent-border\"][0],\n            \"--table-highlight-on-hover-color\":\n              theme.colors[\"accent-border\"][0],\n          },\n        }),\n        defaultProps: {\n          striped: true,\n          highlightOnHover: true,\n        },\n      }),\n      Drawer: Drawer.extend({\n        vars: () => ({\n          root: {\n            \"--drawer-flex\": \"\",\n          },\n        }),\n        defaultProps: {\n          position: \"top\",\n          radius: \"md\",\n        },\n        styles: {\n          inner: { justifyContent: \"center\" },\n        },\n      }),\n      Modal: Modal.extend({\n        defaultProps: {\n          styles: { content: { borderRadius: \"var(--mantine-radius-md)\" } },\n        },\n      }),\n      Code: Code.extend({\n        defaultProps: {\n          bg: \"var(--mantine-color-accent-0)\",\n          bdrs: \"sm\",\n          p: \"md\",\n        },\n      }),\n      Fieldset: Fieldset.extend({\n        styles: (theme) => ({\n          root: {\n            backgroundColor: \"var(--mantine-color-body)\",\n            borderRadius: theme.radius.md,\n          },\n        }),\n        classNames: { root: \"bordered-light\" },\n      }),\n      SegmentedControl: SegmentedControl.extend({\n        styles: (theme) => ({\n          root: {\n            backgroundColor: theme.colors.accent[2],\n          },\n          indicator: {\n            backgroundColor: theme.colors.accent[9],\n          },\n        }),\n        classNames: { root: \"bordered-heavy\" },\n      }),\n      Progress: Progress.extend({\n        styles: (theme) => ({\n          root: {\n            backgroundColor: theme.colors.accent[4],\n          },\n        }),\n      }),\n      Tabs: Tabs.extend({\n        vars: (theme) => ({\n          root: {\n            \"--tabs-radius\": theme.radius.sm,\n          },\n        }),\n        styles: (theme) => ({\n          list: {\n            backgroundColor: theme.colors.accent[1],\n            borderRadius: theme.radius.sm,\n          },\n        }),\n      }),\n    },\n  });\n}\n\nconst cssVariablesResolver: CSSVariablesResolver = (theme) => ({\n  variables: {},\n  light: {\n    \"--mantine-color-default\": theme.colors.accent[5],\n    \"--mantine-color-default-hover\": theme.colors.accent[9],\n    \"--mantine-color-default-border\": theme.colors[\"accent-border\"][5],\n    \"--mantine-color-disabled\": theme.colors.accent[1],\n  },\n  dark: {\n    \"--mantine-color-default\": theme.colors.accent[5],\n    \"--mantine-color-default-hover\": theme.colors.accent[9],\n    \"--mantine-color-default-border\": theme.colors[\"accent-border\"][5],\n    \"--mantine-color-disabled\": theme.colors.accent[1],\n  },\n});\n\nexport function opacityColorsTuple(baseHex: string, length = 10) {\n  return colorsTuple(\n    Array.from({ length }).map(\n      (_, i) => baseHex + (i * 10 + 9).toString(16).padStart(2, \"0\"),\n    ),\n  );\n}\n\nexport function functionColorsTuple(\n  base: string,\n  fn: (color: string) => string,\n  length = 10,\n) {\n  let b = base;\n  const array = [\n    base,\n    ...Array.from({ length: length - 1 }).map(() => {\n      b = fn(b);\n      return b;\n    }),\n  ];\n  return colorsTuple(array);\n}\n"],"mappings":"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","names":["theme"]}

package/dist/theme.scss

@@ -0,0 +1,76 @@
+// https://mantine.dev/styles/sass/#usage-with-vite
+@use "sass:math";
+
+:root[data-mantine-color-scheme="light"] {
+  --mantine-color-body: #f8f9fa;
+  --mantine-color-text: #000000;
+}
+
+:root[data-mantine-color-scheme="dark"] {
+  --mantine-color-body: #0f1115;
+  --mantine-color-text: #ffffff;
+}
+
+$mantine-breakpoint-xs: "40em";
+$mantine-breakpoint-sm: "54em";
+$mantine-breakpoint-md: "68em";
+$mantine-breakpoint-lg: "82em";
+$mantine-breakpoint-xl: "96em";
+$mantine-breakpoint-xl2: "110em";
+$mantine-breakpoint-xl3: "126em";
+$mantine-breakpoint-xl4: "142em";
+
+@function rem($value) {
+  @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
+}
+
+@mixin light {
+  [data-mantine-color-scheme="light"] & {
+    @content;
+  }
+}
+
+@mixin dark {
+  [data-mantine-color-scheme="dark"] & {
+    @content;
+  }
+}
+
+@mixin hover {
+  @media (hover: hover) {
+    &:hover {
+      @content;
+    }
+  }
+
+  @media (hover: none) {
+    &:active {
+      @content;
+    }
+  }
+}
+
+@mixin smaller-than($breakpoint) {
+  @media (max-width: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin larger-than($breakpoint) {
+  @media (min-width: $breakpoint) {
+    @content;
+  }
+}
+
+// Add direction mixins if you need rtl support
+@mixin rtl {
+  [dir="rtl"] & {
+    @content;
+  }
+}
+
+@mixin ltr {
+  [dir="ltr"] & {
+    @content;
+  }
+}

package/dist/utils.cjs

@@ -0,0 +1,48 @@
+"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 utils_exports = {};
+__export(utils_exports, {
+  deepCompare: () => deepCompare
+});
+module.exports = __toCommonJS(utils_exports);
+function deepCompare(a, b) {
+  if (!a || !b) {
+    return a === b;
+  }
+  const ta = typeof a;
+  const tb = typeof b;
+  if (ta !== tb) return false;
+  if (ta === "function") return true;
+  if (ta === "object") {
+    const ea = Object.entries(a);
+    const kb = Object.keys(b);
+    if (ea.length !== kb.length) return false;
+    for (const [key, va] of ea) {
+      const vb = b[key];
+      if (!deepCompare(va, vb)) return false;
+    }
+    return true;
+  }
+  return a === b;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  deepCompare
+});
+//# sourceMappingURL=utils.cjs.map

package/dist/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts"],"sourcesContent":["/**\n * Does deep compare of 2 items, returning `true` if equal.\n *\n * - Functions: Always `true`\n * - Primitives: Returns direct `a === b`\n * - Arrays: Returns same items and ordering (recursive)\n * - Objects: Returns same keys / values (recursive)\n *\n * @param a Item a\n * @param b Item b\n * @returns a === b\n */\nexport function deepCompare(a: any, b: any) {\n  // Short path for falsy. Important to catch typeof null === \"object\" edge case.\n  if (!a || !b) {\n    return a === b;\n  }\n\n  const ta = typeof a;\n  const tb = typeof b;\n\n  if (ta !== tb) return false;\n\n  if (ta === \"function\") return true;\n\n  if (ta === \"object\") {\n    const ea = Object.entries(a);\n    const kb = Object.keys(b);\n\n    // Length not equal -> false\n    if (ea.length !== kb.length) return false;\n\n    for (const [key, va] of ea) {\n      const vb = b[key];\n\n      // Early return when any not equal\n      if (!deepCompare(va, vb)) return false;\n    }\n\n    // If it gets through all, it's equal\n    return true;\n  }\n\n  return a === b;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYO,SAAS,YAAY,GAAQ,GAAQ;AAE1C,MAAI,CAAC,KAAK,CAAC,GAAG;AACZ,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,KAAK,OAAO;AAClB,QAAM,KAAK,OAAO;AAElB,MAAI,OAAO,GAAI,QAAO;AAEtB,MAAI,OAAO,WAAY,QAAO;AAE9B,MAAI,OAAO,UAAU;AACnB,UAAM,KAAK,OAAO,QAAQ,CAAC;AAC3B,UAAM,KAAK,OAAO,KAAK,CAAC;AAGxB,QAAI,GAAG,WAAW,GAAG,OAAQ,QAAO;AAEpC,eAAW,CAAC,KAAK,EAAE,KAAK,IAAI;AAC1B,YAAM,KAAK,EAAE,GAAG;AAGhB,UAAI,CAAC,YAAY,IAAI,EAAE,EAAG,QAAO;AAAA,IACnC;AAGA,WAAO;AAAA,EACT;AAEA,SAAO,MAAM;AACf;","names":[]}

package/dist/utils.d.cts

@@ -0,0 +1,15 @@
+/**
+ * Does deep compare of 2 items, returning `true` if equal.
+ *
+ * - Functions: Always `true`
+ * - Primitives: Returns direct `a === b`
+ * - Arrays: Returns same items and ordering (recursive)
+ * - Objects: Returns same keys / values (recursive)
+ *
+ * @param a Item a
+ * @param b Item b
+ * @returns a === b
+ */
+declare function deepCompare(a: any, b: any): boolean;
+
+export { deepCompare };

package/dist/utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Does deep compare of 2 items, returning `true` if equal.
+ *
+ * - Functions: Always `true`
+ * - Primitives: Returns direct `a === b`
+ * - Arrays: Returns same items and ordering (recursive)
+ * - Objects: Returns same keys / values (recursive)
+ *
+ * @param a Item a
+ * @param b Item b
+ * @returns a === b
+ */
+declare function deepCompare(a: any, b: any): boolean;
+
+export { deepCompare };

package/dist/utils.js

@@ -0,0 +1,24 @@
+function deepCompare(a, b) {
+  if (!a || !b) {
+    return a === b;
+  }
+  const ta = typeof a;
+  const tb = typeof b;
+  if (ta !== tb) return false;
+  if (ta === "function") return true;
+  if (ta === "object") {
+    const ea = Object.entries(a);
+    const kb = Object.keys(b);
+    if (ea.length !== kb.length) return false;
+    for (const [key, va] of ea) {
+      const vb = b[key];
+      if (!deepCompare(va, vb)) return false;
+    }
+    return true;
+  }
+  return a === b;
+}
+export {
+  deepCompare
+};
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts"],"sourcesContent":["/**\n * Does deep compare of 2 items, returning `true` if equal.\n *\n * - Functions: Always `true`\n * - Primitives: Returns direct `a === b`\n * - Arrays: Returns same items and ordering (recursive)\n * - Objects: Returns same keys / values (recursive)\n *\n * @param a Item a\n * @param b Item b\n * @returns a === b\n */\nexport function deepCompare(a: any, b: any) {\n  // Short path for falsy. Important to catch typeof null === \"object\" edge case.\n  if (!a || !b) {\n    return a === b;\n  }\n\n  const ta = typeof a;\n  const tb = typeof b;\n\n  if (ta !== tb) return false;\n\n  if (ta === \"function\") return true;\n\n  if (ta === \"object\") {\n    const ea = Object.entries(a);\n    const kb = Object.keys(b);\n\n    // Length not equal -> false\n    if (ea.length !== kb.length) return false;\n\n    for (const [key, va] of ea) {\n      const vb = b[key];\n\n      // Early return when any not equal\n      if (!deepCompare(va, vb)) return false;\n    }\n\n    // If it gets through all, it's equal\n    return true;\n  }\n\n  return a === b;\n}\n"],"mappings":"AAYO,SAAS,YAAY,GAAQ,GAAQ;AAE1C,MAAI,CAAC,KAAK,CAAC,GAAG;AACZ,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,KAAK,OAAO;AAClB,QAAM,KAAK,OAAO;AAElB,MAAI,OAAO,GAAI,QAAO;AAEtB,MAAI,OAAO,WAAY,QAAO;AAE9B,MAAI,OAAO,UAAU;AACnB,UAAM,KAAK,OAAO,QAAQ,CAAC;AAC3B,UAAM,KAAK,OAAO,KAAK,CAAC;AAGxB,QAAI,GAAG,WAAW,GAAG,OAAQ,QAAO;AAEpC,eAAW,CAAC,KAAK,EAAE,KAAK,IAAI;AAC1B,YAAM,KAAK,EAAE,GAAG;AAGhB,UAAI,CAAC,YAAY,IAAI,EAAE,EAAG,QAAO;AAAA,IACnC;AAGA,WAAO;AAAA,EACT;AAEA,SAAO,MAAM;AACf;","names":[]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "mogh_ui",
+  "version": "0.1.0",
+  "description": "Common UI components and styling used across Mogh apps.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./index.scss": "./dist/index.scss",
+    "./theme.scss": "./dist/theme.scss"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup && cd src && find . -name '*.scss' -exec cp --parents {} ../dist \\;",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@mantine/core": "^9.0.0",
+    "@mantine/hooks": "^9.0.0",
+    "@mantine/notifications": "^9.0.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@tanstack/react-table": "^8.21.3",
+    "lucide-react": "^1.7.0",
+    "monaco-editor": "^0.55.1",
+    "monaco-yaml": "^5.4.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.14.0"
+  },
+  "devDependencies": {
+    "@mantine/core": "^9.0.0",
+    "@mantine/hooks": "^9.0.0",
+    "@mantine/notifications": "^9.0.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^1.7.0",
+    "monaco-editor": "^0.55.1",
+    "monaco-yaml": "^5.4.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.14.0",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.2"
+  }
+}