mogh_ui 0.1.0

package/dist/components/data-table.js

@@ -0,0 +1,233 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useState
+} from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import {
+  Box,
+  Center,
+  Checkbox,
+  Group,
+  HoverCard,
+  Loader,
+  Table,
+  Text,
+  UnstyledButton
+} from "@mantine/core";
+import { ArrowDown, ArrowUp, Info, Minus } from "lucide-react";
+function DataTable({
+  tableKey,
+  columns,
+  data,
+  loading,
+  onRowClick,
+  noResults = /* @__PURE__ */ jsx(Text, { c: "dimmed", children: "No results" }),
+  sortDescFirst = false,
+  defaultSort = [],
+  selectOptions,
+  caption,
+  tableProps,
+  noBox,
+  noBorder,
+  mah = "max(150px, calc(100vh - 320px))",
+  ...boxProps
+}) {
+  const [sorting, setSorting] = useState(defaultSort);
+  const _internalState = useState({});
+  const [rowSelection, setRowSelection] = selectOptions?.state ? selectOptions.state : _internalState;
+  const table = useReactTable({
+    data,
+    columns: columns.filter((c) => c),
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+      rowSelection
+    },
+    sortDescFirst,
+    onRowSelectionChange: setRowSelection,
+    getRowId: selectOptions?.selectKey,
+    enableRowSelection: selectOptions?.disableRow
+  });
+  useEffect(() => {
+    const stored = localStorage.getItem("data-table-" + tableKey);
+    const sorting2 = stored ? JSON.parse(stored) : null;
+    if (sorting2) setSorting(sorting2);
+  }, [tableKey]);
+  useEffect(() => {
+    localStorage.setItem("data-table-" + tableKey, JSON.stringify(sorting));
+  }, [tableKey, sorting]);
+  useEffect(() => {
+    selectOptions?.onSelect?.(Object.keys(rowSelection));
+  }, [rowSelection]);
+  const rows = table.getPrePaginationRowModel().rows;
+  const tableNode = /* @__PURE__ */ jsxs(
+    Table,
+    {
+      borderColor: "accent-border",
+      captionSide: "top",
+      stickyHeader: true,
+      ...tableProps,
+      children: [
+        caption ? /* @__PURE__ */ jsx(Table.Caption, { children: caption }) : null,
+        /* @__PURE__ */ jsx(Table.Thead, { children: table.getHeaderGroups().map((hg, i) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          i === 0 && selectOptions && /* @__PURE__ */ jsx(
+            Table.Th,
+            {
+              onClick: () => selectOptions.disableRow !== true && table.toggleAllRowsSelected(),
+              style: {
+                cursor: "pointer",
+                borderColor: "var(--mantine-color-accent-border-0)",
+                borderWidth: 0,
+                borderRightWidth: 1,
+                borderStyle: "solid"
+              },
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  color: selectOptions.color ?? "Neutral",
+                  disabled: selectOptions.disableRow === true,
+                  checked: table.getIsAllRowsSelected(),
+                  indeterminate: table.getIsSomeRowsSelected()
+                }
+              )
+            }
+          ),
+          hg.headers.map((header, i2) => {
+            return /* @__PURE__ */ jsx(
+              Table.Th,
+              {
+                px: "md",
+                style: {
+                  cursor: "pointer",
+                  borderColor: "var(--mantine-color-accent-border-0)",
+                  borderWidth: 0,
+                  borderRightWidth: i2 < hg.headers.length - 1 ? 1 : 0,
+                  borderStyle: "solid"
+                },
+                children: header.isPlaceholder ? null : /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", lineClamp: 1, children: flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ) })
+              },
+              header.id
+            );
+          })
+        ] }, hg.id)) }),
+        /* @__PURE__ */ jsx(Table.Tbody, { children: loading ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(
+          Table.Td,
+          {
+            colSpan: table.getAllLeafColumns().length + (selectOptions ? 1 : 0),
+            children: /* @__PURE__ */ jsx(Group, { justify: "center", py: "lg", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) })
+          }
+        ) }) : rows.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(
+          Table.Td,
+          {
+            colSpan: table.getAllLeafColumns().length + (selectOptions ? 1 : 0),
+            children: /* @__PURE__ */ jsx(Group, { justify: "center", py: "lg", children: noResults })
+          }
+        ) }) : rows.map((row) => /* @__PURE__ */ jsxs(
+          Table.Tr,
+          {
+            style: {
+              cursor: onRowClick ? "pointer" : void 0,
+              contentVisibility: "auto",
+              containIntrinsicSize: "auto 2em"
+            },
+            children: [
+              selectOptions && /* @__PURE__ */ jsx(Table.Td, { onClick: () => row.toggleSelected(), children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  "aria-label": "Select row",
+                  color: selectOptions.color ?? "Neutral",
+                  disabled: !row.getCanSelect(),
+                  checked: row.getIsSelected()
+                }
+              ) }),
+              row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                Table.Td,
+                {
+                  onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+                  style: { flexWrap: "nowrap", textWrap: "nowrap" },
+                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                },
+                cell.id
+              ))
+            ]
+          },
+          row.id
+        )) })
+      ]
+    }
+  );
+  if (noBox) {
+    return tableNode;
+  } else {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        p: noBorder ? void 0 : "lg",
+        pt: "0",
+        className: noBorder ? void 0 : "bordered-light",
+        bdrs: "md",
+        w: "100%",
+        mah,
+        style: { overflow: "auto" },
+        ...boxProps,
+        children: tableNode
+      }
+    );
+  }
+}
+const SortableHeader = ({
+  column,
+  title,
+  description,
+  sortDescFirst
+}) => {
+  return /* @__PURE__ */ jsx(
+    UnstyledButton,
+    {
+      onClick: column.getToggleSortingHandler(),
+      style: { width: "100%" },
+      children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", gap: "sm", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "start", gap: "xs", wrap: "nowrap", miw: "120", w: "fit-content", children: [
+          /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", lineClamp: 1, children: title }),
+          description && /* @__PURE__ */ jsxs(HoverCard, { offset: 10, children: [
+            /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx(Info, { size: "1rem" }) }),
+            /* @__PURE__ */ jsx(HoverCard.Dropdown, { children: /* @__PURE__ */ jsx(Text, { children: description }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Center, { children: /* @__PURE__ */ jsx(
+          SortIcon,
+          {
+            state: column.getIsSorted(),
+            sortDescFirst
+          }
+        ) })
+      ] })
+    }
+  );
+};
+function SortIcon({
+  state,
+  sortDescFirst
+}) {
+  if (state === "asc")
+    return sortDescFirst ? /* @__PURE__ */ jsx(ArrowDown, { size: 14 }) : /* @__PURE__ */ jsx(ArrowUp, { size: 14 });
+  if (state === "desc")
+    return sortDescFirst ? /* @__PURE__ */ jsx(ArrowUp, { size: 14 }) : /* @__PURE__ */ jsx(ArrowDown, { size: 14 });
+  return /* @__PURE__ */ jsx(Minus, { size: 14 });
+}
+export {
+  DataTable,
+  SortableHeader
+};
+//# sourceMappingURL=data-table.js.map

package/dist/components/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table.tsx"],"sourcesContent":["import {\n  Dispatch,\n  ReactNode,\n  SetStateAction,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  Column,\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  Row,\n  RowSelectionState,\n  SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport {\n  Box,\n  BoxProps,\n  Center,\n  Checkbox,\n  DefaultMantineColor,\n  Group,\n  HoverCard,\n  Loader,\n  Table,\n  TableProps,\n  Text,\n  UnstyledButton,\n} from \"@mantine/core\";\nimport { ArrowDown, ArrowUp, Info, Minus } from \"lucide-react\";\n\nexport interface DataTableProps<TData, TValue = unknown> extends BoxProps {\n  /** Unique key given to table so sorting can be remembered on local storage */\n  tableKey: string;\n  columns: (ColumnDef<TData, TValue> | false | undefined)[];\n  data: TData[];\n  loading?: boolean;\n  onRowClick?: (row: TData) => void;\n  noResults?: ReactNode;\n  defaultSort?: SortingState;\n  sortDescFirst?: boolean;\n  selectOptions?: {\n    selectKey: (row: TData) => string;\n    onSelect?: (selected: string[]) => void;\n    state?: [RowSelectionState, Dispatch<SetStateAction<RowSelectionState>>];\n    disableRow?: boolean | ((row: Row<TData>) => boolean);\n    color?: DefaultMantineColor;\n  };\n  caption?: string;\n  tableProps?: TableProps;\n  noBox?: boolean;\n  noBorder?: boolean;\n}\n\nexport function DataTable<TData, TValue>({\n  tableKey,\n  columns,\n  data,\n  loading,\n  onRowClick,\n  noResults = <Text c=\"dimmed\">No results</Text>,\n  sortDescFirst = false,\n  defaultSort = [],\n  selectOptions,\n  caption,\n  tableProps,\n  noBox,\n  noBorder,\n  mah = \"max(150px, calc(100vh - 320px))\",\n  ...boxProps\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = useState<SortingState>(defaultSort);\n\n  // intentionally not initialized to clear selected values on table mount\n  // could add some prop for adding default selected state to preserve between mounts\n  const _internalState = useState<RowSelectionState>({});\n  const [rowSelection, setRowSelection] = selectOptions?.state\n    ? selectOptions.state\n    : _internalState;\n\n  const table = useReactTable({\n    data,\n    columns: columns.filter((c) => c) as any,\n    getCoreRowModel: getCoreRowModel(),\n    onSortingChange: setSorting,\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      sorting,\n      rowSelection,\n    },\n    sortDescFirst,\n    onRowSelectionChange: setRowSelection,\n    getRowId: selectOptions?.selectKey,\n    enableRowSelection: selectOptions?.disableRow,\n  });\n\n  useEffect(() => {\n    const stored = localStorage.getItem(\"data-table-\" + tableKey);\n    const sorting = stored ? (JSON.parse(stored) as SortingState) : null;\n    if (sorting) setSorting(sorting);\n  }, [tableKey]);\n\n  useEffect(() => {\n    localStorage.setItem(\"data-table-\" + tableKey, JSON.stringify(sorting));\n  }, [tableKey, sorting]);\n\n  useEffect(() => {\n    selectOptions?.onSelect?.(Object.keys(rowSelection));\n  }, [rowSelection]);\n\n  const rows = table.getPrePaginationRowModel().rows;\n\n  const tableNode = (\n    <Table\n      borderColor=\"accent-border\"\n      captionSide=\"top\"\n      stickyHeader\n      {...tableProps}\n    >\n      {caption ? <Table.Caption>{caption}</Table.Caption> : null}\n\n      <Table.Thead>\n        {table.getHeaderGroups().map((hg, i) => (\n          <Table.Tr key={hg.id}>\n            {i === 0 && selectOptions && (\n              <Table.Th\n                onClick={() =>\n                  selectOptions.disableRow !== true &&\n                  table.toggleAllRowsSelected()\n                }\n                style={{\n                  cursor: \"pointer\",\n                  borderColor: \"var(--mantine-color-accent-border-0)\",\n                  borderWidth: 0,\n                  borderRightWidth: 1,\n                  borderStyle: \"solid\",\n                }}\n              >\n                <Checkbox\n                  color={selectOptions.color ?? \"Neutral\"}\n                  disabled={selectOptions.disableRow === true}\n                  checked={table.getIsAllRowsSelected()}\n                  indeterminate={table.getIsSomeRowsSelected()}\n                />\n              </Table.Th>\n            )}\n            {hg.headers.map((header, i) => {\n              // const canSort = header.column.getCanSort();\n              // const sortState = header.column.getIsSorted();\n              return (\n                <Table.Th\n                  key={header.id}\n                  px=\"md\"\n                  style={{\n                    cursor: \"pointer\",\n                    borderColor: \"var(--mantine-color-accent-border-0)\",\n                    borderWidth: 0,\n                    borderRightWidth: i < hg.headers.length - 1 ? 1 : 0,\n                    borderStyle: \"solid\",\n                  }}\n                >\n                  {header.isPlaceholder ? null : (\n                    <Text fw={600} size=\"sm\" lineClamp={1}>\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext(),\n                      )}\n                    </Text>\n                  )}\n                </Table.Th>\n              );\n            })}\n          </Table.Tr>\n        ))}\n      </Table.Thead>\n\n      <Table.Tbody>\n        {loading ? (\n          <Table.Tr>\n            <Table.Td\n              colSpan={\n                table.getAllLeafColumns().length + (selectOptions ? 1 : 0)\n              }\n            >\n              <Group justify=\"center\" py=\"lg\">\n                <Loader size=\"sm\" />\n              </Group>\n            </Table.Td>\n          </Table.Tr>\n        ) : rows.length === 0 ? (\n          <Table.Tr>\n            <Table.Td\n              colSpan={\n                table.getAllLeafColumns().length + (selectOptions ? 1 : 0)\n              }\n            >\n              <Group justify=\"center\" py=\"lg\">\n                {noResults}\n              </Group>\n            </Table.Td>\n          </Table.Tr>\n        ) : (\n          rows.map((row) => (\n            <Table.Tr\n              key={row.id}\n              style={{\n                cursor: onRowClick ? \"pointer\" : undefined,\n                contentVisibility: \"auto\",\n                containIntrinsicSize: \"auto 2em\",\n              }}\n            >\n              {selectOptions && (\n                <Table.Td onClick={() => row.toggleSelected()}>\n                  <Checkbox\n                    aria-label=\"Select row\"\n                    color={selectOptions.color ?? \"Neutral\"}\n                    disabled={!row.getCanSelect()}\n                    checked={row.getIsSelected()}\n                  />\n                </Table.Td>\n              )}\n              {row.getVisibleCells().map((cell) => (\n                <Table.Td\n                  key={cell.id}\n                  onClick={\n                    onRowClick ? () => onRowClick(row.original) : undefined\n                  }\n                  style={{ flexWrap: \"nowrap\", textWrap: \"nowrap\" }}\n                >\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </Table.Td>\n              ))}\n            </Table.Tr>\n          ))\n        )}\n      </Table.Tbody>\n    </Table>\n  );\n\n  if (noBox) {\n    return tableNode;\n  } else {\n    return (\n      <Box\n        p={noBorder ? undefined : \"lg\"}\n        pt=\"0\"\n        className={noBorder ? undefined : \"bordered-light\"}\n        bdrs=\"md\"\n        w=\"100%\"\n        mah={mah}\n        style={{ overflow: \"auto\" }}\n        {...boxProps}\n      >\n        {tableNode}\n      </Box>\n    );\n  }\n}\n\nexport const SortableHeader = <T, V>({\n  column,\n  title,\n  description,\n  sortDescFirst,\n}: {\n  column: Column<T, V>;\n  title: string;\n  description?: ReactNode;\n  sortDescFirst?: boolean;\n}) => {\n  return (\n    <UnstyledButton\n      onClick={column.getToggleSortingHandler()}\n      style={{ width: \"100%\" }}\n    >\n      <Group justify=\"space-between\" gap=\"sm\" wrap=\"nowrap\">\n        <Group justify=\"start\" gap=\"xs\" wrap=\"nowrap\" miw=\"120\" w=\"fit-content\">\n          <Text fw={600} size=\"sm\" lineClamp={1}>\n            {title}\n          </Text>\n          {description && (\n            <HoverCard offset={10}>\n              <HoverCard.Target>\n                <Info size=\"1rem\" />\n              </HoverCard.Target>\n              <HoverCard.Dropdown>\n                <Text>{description}</Text>\n              </HoverCard.Dropdown>\n            </HoverCard>\n          )}\n        </Group>\n        <Center>\n          <SortIcon\n            state={column.getIsSorted()}\n            sortDescFirst={sortDescFirst}\n          />\n        </Center>\n      </Group>\n    </UnstyledButton>\n  );\n};\n\nfunction SortIcon({\n  state,\n  sortDescFirst,\n}: {\n  state: false | \"asc\" | \"desc\";\n  sortDescFirst?: boolean;\n}) {\n  if (state === \"asc\")\n    return sortDescFirst ? <ArrowDown size={14} /> : <ArrowUp size={14} />;\n  if (state === \"desc\")\n    return sortDescFirst ? <ArrowUp size={14} /> : <ArrowDown size={14} />;\n  return <Minus size={14} />;\n}\n"],"mappings":"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","names":["sorting","i"]}

package/dist/components/divided-children/index.cjs

@@ -0,0 +1,53 @@
+"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 divided_children_exports = {};
+__export(divided_children_exports, {
+  DividedChildren: () => DividedChildren
+});
+module.exports = __toCommonJS(divided_children_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@mantine/core");
+var import_react = require("react");
+var import_index_module = __toESM(require("./index.module.scss"), 1);
+const DividedChildren = (0, import_core.createPolymorphicComponent)(
+  (0, import_react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.Group,
+    {
+      className: className ? import_index_module.default["divided-children"] + " " + className : import_index_module.default["divided-children"],
+      gap: "md",
+      ...props,
+      ref
+    }
+  ))
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DividedChildren
+});
+//# sourceMappingURL=index.cjs.map

package/dist/components/divided-children/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/divided-children/index.tsx"],"sourcesContent":["import { createPolymorphicComponent, Group, GroupProps } from \"@mantine/core\";\nimport { forwardRef } from \"react\";\nimport classes from \"./index.module.scss\";\n\n// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components\n\nexport const DividedChildren = createPolymorphicComponent<\"div\", GroupProps>(\n  forwardRef<HTMLDivElement, GroupProps>(({ className, ...props }, ref) => (\n    <Group\n      className={\n        className\n          ? classes[\"divided-children\"] + \" \" + className\n          : classes[\"divided-children\"]\n      }\n      gap=\"md\"\n      {...props}\n      ref={ref}\n    />\n  )),\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQI;AARJ,kBAA8D;AAC9D,mBAA2B;AAC3B,0BAAoB;AAIb,MAAM,sBAAkB;AAAA,MAC7B,yBAAuC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC/D;AAAA,IAAC;AAAA;AAAA,MACC,WACE,YACI,oBAAAA,QAAQ,kBAAkB,IAAI,MAAM,YACpC,oBAAAA,QAAQ,kBAAkB;AAAA,MAEhC,KAAI;AAAA,MACH,GAAG;AAAA,MACJ;AAAA;AAAA,EACF,CACD;AACH;","names":["classes"]}

package/dist/components/divided-children/index.d.cts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import * as _mantine_core from '@mantine/core';
+import { GroupProps } from '@mantine/core';
+
+declare const DividedChildren: (<C = "div">(props: _mantine_core.PolymorphicComponentProps<C, GroupProps>) => React.ReactElement) & Omit<react.FunctionComponent<(GroupProps & {
+    component?: any;
+} & Omit<any, "component" | keyof GroupProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (GroupProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;
+
+export { DividedChildren };

package/dist/components/divided-children/index.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import * as _mantine_core from '@mantine/core';
+import { GroupProps } from '@mantine/core';
+
+declare const DividedChildren: (<C = "div">(props: _mantine_core.PolymorphicComponentProps<C, GroupProps>) => React.ReactElement) & Omit<react.FunctionComponent<(GroupProps & {
+    component?: any;
+} & Omit<any, "component" | keyof GroupProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (GroupProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;
+
+export { DividedChildren };

package/dist/components/divided-children/index.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { createPolymorphicComponent, Group } from "@mantine/core";
+import { forwardRef } from "react";
+import classes from "./index.module.scss";
+const DividedChildren = createPolymorphicComponent(
+  forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    Group,
+    {
+      className: className ? classes["divided-children"] + " " + className : classes["divided-children"],
+      gap: "md",
+      ...props,
+      ref
+    }
+  ))
+);
+export {
+  DividedChildren
+};
+//# sourceMappingURL=index.js.map

package/dist/components/divided-children/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/divided-children/index.tsx"],"sourcesContent":["import { createPolymorphicComponent, Group, GroupProps } from \"@mantine/core\";\nimport { forwardRef } from \"react\";\nimport classes from \"./index.module.scss\";\n\n// https://mantine.dev/guides/polymorphic/#create-your-own-polymorphic-components\n\nexport const DividedChildren = createPolymorphicComponent<\"div\", GroupProps>(\n  forwardRef<HTMLDivElement, GroupProps>(({ className, ...props }, ref) => (\n    <Group\n      className={\n        className\n          ? classes[\"divided-children\"] + \" \" + className\n          : classes[\"divided-children\"]\n      }\n      gap=\"md\"\n      {...props}\n      ref={ref}\n    />\n  )),\n);\n"],"mappings":"AAQI;AARJ,SAAS,4BAA4B,aAAyB;AAC9D,SAAS,kBAAkB;AAC3B,OAAO,aAAa;AAIb,MAAM,kBAAkB;AAAA,EAC7B,WAAuC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC/D;AAAA,IAAC;AAAA;AAAA,MACC,WACE,YACI,QAAQ,kBAAkB,IAAI,MAAM,YACpC,QAAQ,kBAAkB;AAAA,MAEhC,KAAI;AAAA,MACH,GAAG;AAAA,MACJ;AAAA;AAAA,EACF,CACD;AACH;","names":[]}

package/dist/components/divided-children/index.module.scss

@@ -0,0 +1,4 @@
+.divided-children > *:not(:last-child) {
+  padding-right: var(--mantine-spacing-md);
+  border-right: 1px solid var(--mantine-color-accent-border-0);
+}

package/dist/components/enable-switch.cjs

@@ -0,0 +1,67 @@
+"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 enable_switch_exports = {};
+__export(enable_switch_exports, {
+  EnableSwitch: () => EnableSwitch
+});
+module.exports = __toCommonJS(enable_switch_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@mantine/core");
+function EnableSwitch({
+  checked,
+  color = "green.9",
+  label,
+  onChange,
+  onCheckedChange,
+  disabled,
+  redDisabled = true,
+  labelProps,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.Switch,
+    {
+      disabled,
+      checked,
+      color,
+      label: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { gap: "sm", wrap: "nowrap", ...labelProps, children: [
+        label,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_core.Badge,
+          {
+            color: checked ? color : redDisabled ? "red" : "gray",
+            opacity: disabled ? 0.7 : 1,
+            style: { cursor: disabled ? void 0 : "pointer" },
+            children: checked ? "Enabled" : "Disabled"
+          }
+        )
+      ] }),
+      onChange: (e) => {
+        onChange?.(e);
+        onCheckedChange?.(e.target.checked);
+      },
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EnableSwitch
+});
+//# sourceMappingURL=enable-switch.cjs.map

package/dist/components/enable-switch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/enable-switch.tsx"],"sourcesContent":["import { Badge, Group, GroupProps, Switch, SwitchProps } from \"@mantine/core\";\n\nexport interface EnableSwitchProps extends SwitchProps {\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  redDisabled?: boolean;\n  labelProps?: GroupProps;\n}\n\nexport function EnableSwitch({\n  checked,\n  color = \"green.9\",\n  label,\n  onChange,\n  onCheckedChange,\n  disabled,\n  redDisabled = true,\n  labelProps,\n  ...props\n}: EnableSwitchProps) {\n  return (\n    <Switch\n      disabled={disabled}\n      checked={checked}\n      color={color}\n      label={\n        <Group gap=\"sm\" wrap=\"nowrap\" {...labelProps}>\n          {label}\n          <Badge\n            color={checked ? color : redDisabled ? \"red\" : \"gray\"}\n            opacity={disabled ? 0.7 : 1}\n            style={{ cursor: disabled ? undefined : \"pointer\" }}\n          >\n            {checked ? \"Enabled\" : \"Disabled\"}\n          </Badge>\n        </Group>\n      }\n      onChange={(e) => {\n        onChange?.(e);\n        onCheckedChange?.(e.target.checked);\n      }}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BQ;AA1BR,kBAA8D;AASvD,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OACE,6CAAC,qBAAM,KAAI,MAAK,MAAK,UAAU,GAAG,YAC/B;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,UAAU,QAAQ,cAAc,QAAQ;AAAA,YAC/C,SAAS,WAAW,MAAM;AAAA,YAC1B,OAAO,EAAE,QAAQ,WAAW,SAAY,UAAU;AAAA,YAEjD,oBAAU,YAAY;AAAA;AAAA,QACzB;AAAA,SACF;AAAA,MAEF,UAAU,CAAC,MAAM;AACf,mBAAW,CAAC;AACZ,0BAAkB,EAAE,OAAO,OAAO;AAAA,MACpC;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/enable-switch.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SwitchProps, GroupProps } from '@mantine/core';
+
+interface EnableSwitchProps extends SwitchProps {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    redDisabled?: boolean;
+    labelProps?: GroupProps;
+}
+declare function EnableSwitch({ checked, color, label, onChange, onCheckedChange, disabled, redDisabled, labelProps, ...props }: EnableSwitchProps): react_jsx_runtime.JSX.Element;
+
+export { EnableSwitch, type EnableSwitchProps };

package/dist/components/enable-switch.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SwitchProps, GroupProps } from '@mantine/core';
+
+interface EnableSwitchProps extends SwitchProps {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    redDisabled?: boolean;
+    labelProps?: GroupProps;
+}
+declare function EnableSwitch({ checked, color, label, onChange, onCheckedChange, disabled, redDisabled, labelProps, ...props }: EnableSwitchProps): react_jsx_runtime.JSX.Element;
+
+export { EnableSwitch, type EnableSwitchProps };

package/dist/components/enable-switch.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge, Group, Switch } from "@mantine/core";
+function EnableSwitch({
+  checked,
+  color = "green.9",
+  label,
+  onChange,
+  onCheckedChange,
+  disabled,
+  redDisabled = true,
+  labelProps,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      disabled,
+      checked,
+      color,
+      label: /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", ...labelProps, children: [
+        label,
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            color: checked ? color : redDisabled ? "red" : "gray",
+            opacity: disabled ? 0.7 : 1,
+            style: { cursor: disabled ? void 0 : "pointer" },
+            children: checked ? "Enabled" : "Disabled"
+          }
+        )
+      ] }),
+      onChange: (e) => {
+        onChange?.(e);
+        onCheckedChange?.(e.target.checked);
+      },
+      ...props
+    }
+  );
+}
+export {
+  EnableSwitch
+};
+//# sourceMappingURL=enable-switch.js.map

package/dist/components/enable-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/enable-switch.tsx"],"sourcesContent":["import { Badge, Group, GroupProps, Switch, SwitchProps } from \"@mantine/core\";\n\nexport interface EnableSwitchProps extends SwitchProps {\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  redDisabled?: boolean;\n  labelProps?: GroupProps;\n}\n\nexport function EnableSwitch({\n  checked,\n  color = \"green.9\",\n  label,\n  onChange,\n  onCheckedChange,\n  disabled,\n  redDisabled = true,\n  labelProps,\n  ...props\n}: EnableSwitchProps) {\n  return (\n    <Switch\n      disabled={disabled}\n      checked={checked}\n      color={color}\n      label={\n        <Group gap=\"sm\" wrap=\"nowrap\" {...labelProps}>\n          {label}\n          <Badge\n            color={checked ? color : redDisabled ? \"red\" : \"gray\"}\n            opacity={disabled ? 0.7 : 1}\n            style={{ cursor: disabled ? undefined : \"pointer\" }}\n          >\n            {checked ? \"Enabled\" : \"Disabled\"}\n          </Badge>\n        </Group>\n      }\n      onChange={(e) => {\n        onChange?.(e);\n        onCheckedChange?.(e.target.checked);\n      }}\n      {...props}\n    />\n  );\n}\n"],"mappings":"AA0BQ,SAEE,KAFF;AA1BR,SAAS,OAAO,OAAmB,cAA2B;AASvD,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OACE,qBAAC,SAAM,KAAI,MAAK,MAAK,UAAU,GAAG,YAC/B;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,UAAU,QAAQ,cAAc,QAAQ;AAAA,YAC/C,SAAS,WAAW,MAAM;AAAA,YAC1B,OAAO,EAAE,QAAQ,WAAW,SAAY,UAAU;AAAA,YAEjD,oBAAU,YAAY;AAAA;AAAA,QACzB;AAAA,SACF;AAAA,MAEF,UAAU,CAAC,MAAM;AACf,mBAAW,CAAC;AACZ,0BAAkB,EAAE,OAAO,OAAO;AAAA,MACpC;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}