@ethisyscore/plugin-ui 1.15.0 → 1.17.0

package/dist/components/layout/index.cjs

@@ -0,0 +1,130 @@
+'use strict';
+
+var react = require('react');
+var material = require('@mui/material');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/layout/FillGrid.tsx
+
+// src/components/layout/fillGridClasses.ts
+var CLASSES = {
+  xs: {
+    5: {
+      2.4: "basis-[calc(20%-1rem)]",
+      3: "basis-[calc(25%-0.9375rem)]",
+      4: "basis-[calc(33.333%-0.8333rem)]",
+      5: "basis-[calc(41.667%-0.7292rem)]",
+      6: "basis-[calc(50%-0.625rem)]",
+      7: "basis-[calc(58.333%-0.5208rem)]",
+      8: "basis-[calc(66.667%-0.4167rem)]",
+      9: "basis-[calc(75%-0.3125rem)]",
+      12: "basis-full"
+    },
+    2.5: {
+      2.4: "basis-[calc(20%-0.5rem)]",
+      3: "basis-[calc(25%-0.46875rem)]",
+      4: "basis-[calc(33.333%-0.41667rem)]",
+      5: "basis-[calc(41.667%-0.36458rem)]",
+      6: "basis-[calc(50%-0.3125rem)]",
+      7: "basis-[calc(58.333%-0.26042rem)]",
+      8: "basis-[calc(66.667%-0.20833rem)]",
+      9: "basis-[calc(75%-0.15625rem)]",
+      12: "basis-full"
+    }
+  },
+  sm: {
+    5: {
+      2.4: "sm:basis-[calc(20%-1rem)]",
+      3: "sm:basis-[calc(25%-0.9375rem)]",
+      4: "sm:basis-[calc(33.333%-0.8333rem)]",
+      5: "sm:basis-[calc(41.667%-0.7292rem)]",
+      6: "sm:basis-[calc(50%-0.625rem)]",
+      7: "sm:basis-[calc(58.333%-0.5208rem)]",
+      8: "sm:basis-[calc(66.667%-0.4167rem)]",
+      9: "sm:basis-[calc(75%-0.3125rem)]",
+      12: "sm:basis-full"
+    },
+    2.5: {
+      2.4: "sm:basis-[calc(20%-0.5rem)]",
+      3: "sm:basis-[calc(25%-0.46875rem)]",
+      4: "sm:basis-[calc(33.333%-0.41667rem)]",
+      5: "sm:basis-[calc(41.667%-0.36458rem)]",
+      6: "sm:basis-[calc(50%-0.3125rem)]",
+      7: "sm:basis-[calc(58.333%-0.26042rem)]",
+      8: "sm:basis-[calc(66.667%-0.20833rem)]",
+      9: "sm:basis-[calc(75%-0.15625rem)]",
+      12: "sm:basis-full"
+    }
+  },
+  md: {
+    5: {
+      2.4: "md:basis-[calc(20%-1rem)]",
+      3: "md:basis-[calc(25%-0.9375rem)]",
+      4: "md:basis-[calc(33.333%-0.8333rem)]",
+      5: "md:basis-[calc(41.667%-0.7292rem)]",
+      6: "md:basis-[calc(50%-0.625rem)]",
+      7: "md:basis-[calc(58.333%-0.5208rem)]",
+      8: "md:basis-[calc(66.667%-0.4167rem)]",
+      9: "md:basis-[calc(75%-0.3125rem)]",
+      12: "md:basis-full"
+    },
+    2.5: {
+      2.4: "md:basis-[calc(20%-0.5rem)]",
+      3: "md:basis-[calc(25%-0.46875rem)]",
+      4: "md:basis-[calc(33.333%-0.41667rem)]",
+      5: "md:basis-[calc(41.667%-0.36458rem)]",
+      6: "md:basis-[calc(50%-0.3125rem)]",
+      7: "md:basis-[calc(58.333%-0.26042rem)]",
+      8: "md:basis-[calc(66.667%-0.20833rem)]",
+      9: "md:basis-[calc(75%-0.15625rem)]",
+      12: "md:basis-full"
+    }
+  },
+  lg: {
+    5: {
+      2.4: "lg:basis-[calc(20%-1rem)]",
+      3: "lg:basis-[calc(25%-0.9375rem)]",
+      4: "lg:basis-[calc(33.333%-0.8333rem)]",
+      5: "lg:basis-[calc(41.667%-0.7292rem)]",
+      6: "lg:basis-[calc(50%-0.625rem)]",
+      7: "lg:basis-[calc(58.333%-0.5208rem)]",
+      8: "lg:basis-[calc(66.667%-0.4167rem)]",
+      9: "lg:basis-[calc(75%-0.3125rem)]",
+      12: "lg:basis-full"
+    },
+    2.5: {
+      2.4: "lg:basis-[calc(20%-0.5rem)]",
+      3: "lg:basis-[calc(25%-0.46875rem)]",
+      4: "lg:basis-[calc(33.333%-0.41667rem)]",
+      5: "lg:basis-[calc(41.667%-0.36458rem)]",
+      6: "lg:basis-[calc(50%-0.3125rem)]",
+      7: "lg:basis-[calc(58.333%-0.26042rem)]",
+      8: "lg:basis-[calc(66.667%-0.20833rem)]",
+      9: "lg:basis-[calc(75%-0.15625rem)]",
+      12: "lg:basis-full"
+    }
+  }
+};
+var BREAKPOINTS = ["xs", "sm", "md", "lg"];
+function fillItemClass(span, gap) {
+  const parts = ["min-w-0", "grow"];
+  for (const bp of BREAKPOINTS) {
+    const n = span[bp];
+    if (n !== void 0) parts.push(CLASSES[bp][gap][n]);
+  }
+  return parts.join(" ");
+}
+var FillGapContext = react.createContext(5);
+function FillGrid({ gap = 5, className, children }) {
+  const gapClass = gap === 2.5 ? "gap-2.5" : "gap-5";
+  return /* @__PURE__ */ jsxRuntime.jsx(FillGapContext.Provider, { value: gap, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: ["flex w-full flex-wrap", gapClass, className].filter(Boolean).join(" "), children }) });
+}
+function FillGridItem({ span = { xs: 12 }, className, children }) {
+  const gap = react.useContext(FillGapContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: [fillItemClass(span, gap), className].filter(Boolean).join(" "), children });
+}
+
+exports.FillGrid = FillGrid;
+exports.FillGridItem = FillGridItem;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/fillGridClasses.ts","../../../src/components/layout/FillGrid.tsx"],"names":["createContext","jsx","Box","useContext"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Static Tailwind basis classes for {@link FillGridItem}.\n *\n * Tailwind's content scanner extracts class candidates from raw source text and\n * cannot follow string concatenation — `\"sm:\" + \"basis-[...]\"` is invisible to\n * it. So every fully-prefixed class is spelled out as a literal below, indexed\n * by breakpoint → gap → span. `fillItemClass` only ever *looks up* a literal; it\n * never builds one. This is what guarantees the responsive classes survive a\n * production purge (no fragile safelist comment to keep in sync).\n *\n * NOTE: because these literals live in the SDK, a CONSUMER's Tailwind build must\n * scan this package's dist (add it to `content`) or the classes won't generate.\n *\n * basis(n, g) = calc(n/12 * 100% - g * (1 - n/12)), g = gap in rem.\n * gap-5 => g = 1.25rem; gap-2.5 => g = 0.625rem. Span 12 => basis-full.\n */\nexport type Twelfths = 2.4 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12;\nexport type FillGap = 2.5 | 5;\ntype Breakpoint = \"xs\" | \"sm\" | \"md\" | \"lg\";\nexport type FillSpan = Partial<Record<Breakpoint, Twelfths>>;\n\n/**\n * Full literal class per breakpoint × gap × span. `xs` is unprefixed; `sm`/`md`/\n * `lg` carry the Tailwind prefix. Every string here is a real, scannable literal.\n */\nconst CLASSES: Record<Breakpoint, Record<FillGap, Record<Twelfths, string>>> = {\n  xs: {\n    5: {\n      2.4: \"basis-[calc(20%-1rem)]\",\n      3: \"basis-[calc(25%-0.9375rem)]\",\n      4: \"basis-[calc(33.333%-0.8333rem)]\",\n      5: \"basis-[calc(41.667%-0.7292rem)]\",\n      6: \"basis-[calc(50%-0.625rem)]\",\n      7: \"basis-[calc(58.333%-0.5208rem)]\",\n      8: \"basis-[calc(66.667%-0.4167rem)]\",\n      9: \"basis-[calc(75%-0.3125rem)]\",\n      12: \"basis-full\",\n    },\n    2.5: {\n      2.4: \"basis-[calc(20%-0.5rem)]\",\n      3: \"basis-[calc(25%-0.46875rem)]\",\n      4: \"basis-[calc(33.333%-0.41667rem)]\",\n      5: \"basis-[calc(41.667%-0.36458rem)]\",\n      6: \"basis-[calc(50%-0.3125rem)]\",\n      7: \"basis-[calc(58.333%-0.26042rem)]\",\n      8: \"basis-[calc(66.667%-0.20833rem)]\",\n      9: \"basis-[calc(75%-0.15625rem)]\",\n      12: \"basis-full\",\n    },\n  },\n  sm: {\n    5: {\n      2.4: \"sm:basis-[calc(20%-1rem)]\",\n      3: \"sm:basis-[calc(25%-0.9375rem)]\",\n      4: \"sm:basis-[calc(33.333%-0.8333rem)]\",\n      5: \"sm:basis-[calc(41.667%-0.7292rem)]\",\n      6: \"sm:basis-[calc(50%-0.625rem)]\",\n      7: \"sm:basis-[calc(58.333%-0.5208rem)]\",\n      8: \"sm:basis-[calc(66.667%-0.4167rem)]\",\n      9: \"sm:basis-[calc(75%-0.3125rem)]\",\n      12: \"sm:basis-full\",\n    },\n    2.5: {\n      2.4: \"sm:basis-[calc(20%-0.5rem)]\",\n      3: \"sm:basis-[calc(25%-0.46875rem)]\",\n      4: \"sm:basis-[calc(33.333%-0.41667rem)]\",\n      5: \"sm:basis-[calc(41.667%-0.36458rem)]\",\n      6: \"sm:basis-[calc(50%-0.3125rem)]\",\n      7: \"sm:basis-[calc(58.333%-0.26042rem)]\",\n      8: \"sm:basis-[calc(66.667%-0.20833rem)]\",\n      9: \"sm:basis-[calc(75%-0.15625rem)]\",\n      12: \"sm:basis-full\",\n    },\n  },\n  md: {\n    5: {\n      2.4: \"md:basis-[calc(20%-1rem)]\",\n      3: \"md:basis-[calc(25%-0.9375rem)]\",\n      4: \"md:basis-[calc(33.333%-0.8333rem)]\",\n      5: \"md:basis-[calc(41.667%-0.7292rem)]\",\n      6: \"md:basis-[calc(50%-0.625rem)]\",\n      7: \"md:basis-[calc(58.333%-0.5208rem)]\",\n      8: \"md:basis-[calc(66.667%-0.4167rem)]\",\n      9: \"md:basis-[calc(75%-0.3125rem)]\",\n      12: \"md:basis-full\",\n    },\n    2.5: {\n      2.4: \"md:basis-[calc(20%-0.5rem)]\",\n      3: \"md:basis-[calc(25%-0.46875rem)]\",\n      4: \"md:basis-[calc(33.333%-0.41667rem)]\",\n      5: \"md:basis-[calc(41.667%-0.36458rem)]\",\n      6: \"md:basis-[calc(50%-0.3125rem)]\",\n      7: \"md:basis-[calc(58.333%-0.26042rem)]\",\n      8: \"md:basis-[calc(66.667%-0.20833rem)]\",\n      9: \"md:basis-[calc(75%-0.15625rem)]\",\n      12: \"md:basis-full\",\n    },\n  },\n  lg: {\n    5: {\n      2.4: \"lg:basis-[calc(20%-1rem)]\",\n      3: \"lg:basis-[calc(25%-0.9375rem)]\",\n      4: \"lg:basis-[calc(33.333%-0.8333rem)]\",\n      5: \"lg:basis-[calc(41.667%-0.7292rem)]\",\n      6: \"lg:basis-[calc(50%-0.625rem)]\",\n      7: \"lg:basis-[calc(58.333%-0.5208rem)]\",\n      8: \"lg:basis-[calc(66.667%-0.4167rem)]\",\n      9: \"lg:basis-[calc(75%-0.3125rem)]\",\n      12: \"lg:basis-full\",\n    },\n    2.5: {\n      2.4: \"lg:basis-[calc(20%-0.5rem)]\",\n      3: \"lg:basis-[calc(25%-0.46875rem)]\",\n      4: \"lg:basis-[calc(33.333%-0.41667rem)]\",\n      5: \"lg:basis-[calc(41.667%-0.36458rem)]\",\n      6: \"lg:basis-[calc(50%-0.3125rem)]\",\n      7: \"lg:basis-[calc(58.333%-0.26042rem)]\",\n      8: \"lg:basis-[calc(66.667%-0.20833rem)]\",\n      9: \"lg:basis-[calc(75%-0.15625rem)]\",\n      12: \"lg:basis-full\",\n    },\n  },\n};\n\nconst BREAKPOINTS: readonly Breakpoint[] = [\"xs\", \"sm\", \"md\", \"lg\"];\n\n/**\n * Full class string for one item: always `min-w-0 grow`, plus the literal basis\n * class for each supplied breakpoint (looked up, never concatenated).\n */\nexport function fillItemClass(span: FillSpan, gap: FillGap): string {\n  const parts = [\"min-w-0\", \"grow\"];\n  for (const bp of BREAKPOINTS) {\n    const n = span[bp];\n    if (n !== undefined) parts.push(CLASSES[bp][gap][n]);\n  }\n  return parts.join(\" \");\n}\n","import { createContext, useContext } from \"react\";\nimport { Box } from \"@mui/material\";\nimport { fillItemClass, type FillGap, type FillSpan } from \"./fillGridClasses\";\n\nconst FillGapContext = createContext<FillGap>(5);\n\ninterface FillGridProps {\n  /** Gutter width. 5 = 20px (default), 2.5 = 10px. Matches MUI spacing values. */\n  gap?: FillGap;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/**\n * A flex-wrap row whose items `grow` to fill a partially-filled last row — the\n * dashboard/overview convention. NOT for forms, tables, or single full-width cards.\n *\n * Renders `w-full` so it always spans its container: a `FillGrid` is itself often\n * a flex item of a parent MUI `<Grid container>` / flex row, where without an\n * explicit width it would shrink-wrap to its content instead of filling the row\n * (the behaviour a `<Grid container size={12}>` used to give).\n */\nexport function FillGrid({ gap = 5, className, children }: FillGridProps) {\n  const gapClass = gap === 2.5 ? \"gap-2.5\" : \"gap-5\";\n  return (\n    <FillGapContext.Provider value={gap}>\n      <Box className={[\"flex w-full flex-wrap\", gapClass, className].filter(Boolean).join(\" \")}>\n        {children}\n      </Box>\n    </FillGapContext.Provider>\n  );\n}\n\ninterface FillGridItemProps {\n  /** 12-column span per breakpoint, mirroring MUI Grid's `size`. Default { xs: 12 }. */\n  span?: FillSpan;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function FillGridItem({ span = { xs: 12 }, className, children }: FillGridItemProps) {\n  const gap = useContext(FillGapContext);\n  return (\n    <Box className={[fillItemClass(span, gap), className].filter(Boolean).join(\" \")}>\n      {children}\n    </Box>\n  );\n}\n"]}

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

@@ -0,0 +1,48 @@
+import * as react from 'react';
+
+/**
+ * Static Tailwind basis classes for {@link FillGridItem}.
+ *
+ * Tailwind's content scanner extracts class candidates from raw source text and
+ * cannot follow string concatenation — `"sm:" + "basis-[...]"` is invisible to
+ * it. So every fully-prefixed class is spelled out as a literal below, indexed
+ * by breakpoint → gap → span. `fillItemClass` only ever *looks up* a literal; it
+ * never builds one. This is what guarantees the responsive classes survive a
+ * production purge (no fragile safelist comment to keep in sync).
+ *
+ * NOTE: because these literals live in the SDK, a CONSUMER's Tailwind build must
+ * scan this package's dist (add it to `content`) or the classes won't generate.
+ *
+ * basis(n, g) = calc(n/12 * 100% - g * (1 - n/12)), g = gap in rem.
+ * gap-5 => g = 1.25rem; gap-2.5 => g = 0.625rem. Span 12 => basis-full.
+ */
+type Twelfths = 2.4 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12;
+type FillGap = 2.5 | 5;
+type Breakpoint = "xs" | "sm" | "md" | "lg";
+type FillSpan = Partial<Record<Breakpoint, Twelfths>>;
+
+interface FillGridProps {
+    /** Gutter width. 5 = 20px (default), 2.5 = 10px. Matches MUI spacing values. */
+    gap?: FillGap;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * A flex-wrap row whose items `grow` to fill a partially-filled last row — the
+ * dashboard/overview convention. NOT for forms, tables, or single full-width cards.
+ *
+ * Renders `w-full` so it always spans its container: a `FillGrid` is itself often
+ * a flex item of a parent MUI `<Grid container>` / flex row, where without an
+ * explicit width it would shrink-wrap to its content instead of filling the row
+ * (the behaviour a `<Grid container size={12}>` used to give).
+ */
+declare function FillGrid({ gap, className, children }: FillGridProps): react.JSX.Element;
+interface FillGridItemProps {
+    /** 12-column span per breakpoint, mirroring MUI Grid's `size`. Default { xs: 12 }. */
+    span?: FillSpan;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function FillGridItem({ span, className, children }: FillGridItemProps): react.JSX.Element;
+
+export { type FillGap, FillGrid, FillGridItem, type FillSpan, type Twelfths };

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

@@ -0,0 +1,48 @@
+import * as react from 'react';
+
+/**
+ * Static Tailwind basis classes for {@link FillGridItem}.
+ *
+ * Tailwind's content scanner extracts class candidates from raw source text and
+ * cannot follow string concatenation — `"sm:" + "basis-[...]"` is invisible to
+ * it. So every fully-prefixed class is spelled out as a literal below, indexed
+ * by breakpoint → gap → span. `fillItemClass` only ever *looks up* a literal; it
+ * never builds one. This is what guarantees the responsive classes survive a
+ * production purge (no fragile safelist comment to keep in sync).
+ *
+ * NOTE: because these literals live in the SDK, a CONSUMER's Tailwind build must
+ * scan this package's dist (add it to `content`) or the classes won't generate.
+ *
+ * basis(n, g) = calc(n/12 * 100% - g * (1 - n/12)), g = gap in rem.
+ * gap-5 => g = 1.25rem; gap-2.5 => g = 0.625rem. Span 12 => basis-full.
+ */
+type Twelfths = 2.4 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12;
+type FillGap = 2.5 | 5;
+type Breakpoint = "xs" | "sm" | "md" | "lg";
+type FillSpan = Partial<Record<Breakpoint, Twelfths>>;
+
+interface FillGridProps {
+    /** Gutter width. 5 = 20px (default), 2.5 = 10px. Matches MUI spacing values. */
+    gap?: FillGap;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * A flex-wrap row whose items `grow` to fill a partially-filled last row — the
+ * dashboard/overview convention. NOT for forms, tables, or single full-width cards.
+ *
+ * Renders `w-full` so it always spans its container: a `FillGrid` is itself often
+ * a flex item of a parent MUI `<Grid container>` / flex row, where without an
+ * explicit width it would shrink-wrap to its content instead of filling the row
+ * (the behaviour a `<Grid container size={12}>` used to give).
+ */
+declare function FillGrid({ gap, className, children }: FillGridProps): react.JSX.Element;
+interface FillGridItemProps {
+    /** 12-column span per breakpoint, mirroring MUI Grid's `size`. Default { xs: 12 }. */
+    span?: FillSpan;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function FillGridItem({ span, className, children }: FillGridItemProps): react.JSX.Element;
+
+export { type FillGap, FillGrid, FillGridItem, type FillSpan, type Twelfths };

package/dist/components/layout/index.js

@@ -0,0 +1,127 @@
+import { createContext, useContext } from 'react';
+import { Box } from '@mui/material';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/layout/FillGrid.tsx
+
+// src/components/layout/fillGridClasses.ts
+var CLASSES = {
+  xs: {
+    5: {
+      2.4: "basis-[calc(20%-1rem)]",
+      3: "basis-[calc(25%-0.9375rem)]",
+      4: "basis-[calc(33.333%-0.8333rem)]",
+      5: "basis-[calc(41.667%-0.7292rem)]",
+      6: "basis-[calc(50%-0.625rem)]",
+      7: "basis-[calc(58.333%-0.5208rem)]",
+      8: "basis-[calc(66.667%-0.4167rem)]",
+      9: "basis-[calc(75%-0.3125rem)]",
+      12: "basis-full"
+    },
+    2.5: {
+      2.4: "basis-[calc(20%-0.5rem)]",
+      3: "basis-[calc(25%-0.46875rem)]",
+      4: "basis-[calc(33.333%-0.41667rem)]",
+      5: "basis-[calc(41.667%-0.36458rem)]",
+      6: "basis-[calc(50%-0.3125rem)]",
+      7: "basis-[calc(58.333%-0.26042rem)]",
+      8: "basis-[calc(66.667%-0.20833rem)]",
+      9: "basis-[calc(75%-0.15625rem)]",
+      12: "basis-full"
+    }
+  },
+  sm: {
+    5: {
+      2.4: "sm:basis-[calc(20%-1rem)]",
+      3: "sm:basis-[calc(25%-0.9375rem)]",
+      4: "sm:basis-[calc(33.333%-0.8333rem)]",
+      5: "sm:basis-[calc(41.667%-0.7292rem)]",
+      6: "sm:basis-[calc(50%-0.625rem)]",
+      7: "sm:basis-[calc(58.333%-0.5208rem)]",
+      8: "sm:basis-[calc(66.667%-0.4167rem)]",
+      9: "sm:basis-[calc(75%-0.3125rem)]",
+      12: "sm:basis-full"
+    },
+    2.5: {
+      2.4: "sm:basis-[calc(20%-0.5rem)]",
+      3: "sm:basis-[calc(25%-0.46875rem)]",
+      4: "sm:basis-[calc(33.333%-0.41667rem)]",
+      5: "sm:basis-[calc(41.667%-0.36458rem)]",
+      6: "sm:basis-[calc(50%-0.3125rem)]",
+      7: "sm:basis-[calc(58.333%-0.26042rem)]",
+      8: "sm:basis-[calc(66.667%-0.20833rem)]",
+      9: "sm:basis-[calc(75%-0.15625rem)]",
+      12: "sm:basis-full"
+    }
+  },
+  md: {
+    5: {
+      2.4: "md:basis-[calc(20%-1rem)]",
+      3: "md:basis-[calc(25%-0.9375rem)]",
+      4: "md:basis-[calc(33.333%-0.8333rem)]",
+      5: "md:basis-[calc(41.667%-0.7292rem)]",
+      6: "md:basis-[calc(50%-0.625rem)]",
+      7: "md:basis-[calc(58.333%-0.5208rem)]",
+      8: "md:basis-[calc(66.667%-0.4167rem)]",
+      9: "md:basis-[calc(75%-0.3125rem)]",
+      12: "md:basis-full"
+    },
+    2.5: {
+      2.4: "md:basis-[calc(20%-0.5rem)]",
+      3: "md:basis-[calc(25%-0.46875rem)]",
+      4: "md:basis-[calc(33.333%-0.41667rem)]",
+      5: "md:basis-[calc(41.667%-0.36458rem)]",
+      6: "md:basis-[calc(50%-0.3125rem)]",
+      7: "md:basis-[calc(58.333%-0.26042rem)]",
+      8: "md:basis-[calc(66.667%-0.20833rem)]",
+      9: "md:basis-[calc(75%-0.15625rem)]",
+      12: "md:basis-full"
+    }
+  },
+  lg: {
+    5: {
+      2.4: "lg:basis-[calc(20%-1rem)]",
+      3: "lg:basis-[calc(25%-0.9375rem)]",
+      4: "lg:basis-[calc(33.333%-0.8333rem)]",
+      5: "lg:basis-[calc(41.667%-0.7292rem)]",
+      6: "lg:basis-[calc(50%-0.625rem)]",
+      7: "lg:basis-[calc(58.333%-0.5208rem)]",
+      8: "lg:basis-[calc(66.667%-0.4167rem)]",
+      9: "lg:basis-[calc(75%-0.3125rem)]",
+      12: "lg:basis-full"
+    },
+    2.5: {
+      2.4: "lg:basis-[calc(20%-0.5rem)]",
+      3: "lg:basis-[calc(25%-0.46875rem)]",
+      4: "lg:basis-[calc(33.333%-0.41667rem)]",
+      5: "lg:basis-[calc(41.667%-0.36458rem)]",
+      6: "lg:basis-[calc(50%-0.3125rem)]",
+      7: "lg:basis-[calc(58.333%-0.26042rem)]",
+      8: "lg:basis-[calc(66.667%-0.20833rem)]",
+      9: "lg:basis-[calc(75%-0.15625rem)]",
+      12: "lg:basis-full"
+    }
+  }
+};
+var BREAKPOINTS = ["xs", "sm", "md", "lg"];
+function fillItemClass(span, gap) {
+  const parts = ["min-w-0", "grow"];
+  for (const bp of BREAKPOINTS) {
+    const n = span[bp];
+    if (n !== void 0) parts.push(CLASSES[bp][gap][n]);
+  }
+  return parts.join(" ");
+}
+var FillGapContext = createContext(5);
+function FillGrid({ gap = 5, className, children }) {
+  const gapClass = gap === 2.5 ? "gap-2.5" : "gap-5";
+  return /* @__PURE__ */ jsx(FillGapContext.Provider, { value: gap, children: /* @__PURE__ */ jsx(Box, { className: ["flex w-full flex-wrap", gapClass, className].filter(Boolean).join(" "), children }) });
+}
+function FillGridItem({ span = { xs: 12 }, className, children }) {
+  const gap = useContext(FillGapContext);
+  return /* @__PURE__ */ jsx(Box, { className: [fillItemClass(span, gap), className].filter(Boolean).join(" "), children });
+}
+
+export { FillGrid, FillGridItem };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/fillGridClasses.ts","../../../src/components/layout/FillGrid.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Static Tailwind basis classes for {@link FillGridItem}.\n *\n * Tailwind's content scanner extracts class candidates from raw source text and\n * cannot follow string concatenation — `\"sm:\" + \"basis-[...]\"` is invisible to\n * it. So every fully-prefixed class is spelled out as a literal below, indexed\n * by breakpoint → gap → span. `fillItemClass` only ever *looks up* a literal; it\n * never builds one. This is what guarantees the responsive classes survive a\n * production purge (no fragile safelist comment to keep in sync).\n *\n * NOTE: because these literals live in the SDK, a CONSUMER's Tailwind build must\n * scan this package's dist (add it to `content`) or the classes won't generate.\n *\n * basis(n, g) = calc(n/12 * 100% - g * (1 - n/12)), g = gap in rem.\n * gap-5 => g = 1.25rem; gap-2.5 => g = 0.625rem. Span 12 => basis-full.\n */\nexport type Twelfths = 2.4 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12;\nexport type FillGap = 2.5 | 5;\ntype Breakpoint = \"xs\" | \"sm\" | \"md\" | \"lg\";\nexport type FillSpan = Partial<Record<Breakpoint, Twelfths>>;\n\n/**\n * Full literal class per breakpoint × gap × span. `xs` is unprefixed; `sm`/`md`/\n * `lg` carry the Tailwind prefix. Every string here is a real, scannable literal.\n */\nconst CLASSES: Record<Breakpoint, Record<FillGap, Record<Twelfths, string>>> = {\n  xs: {\n    5: {\n      2.4: \"basis-[calc(20%-1rem)]\",\n      3: \"basis-[calc(25%-0.9375rem)]\",\n      4: \"basis-[calc(33.333%-0.8333rem)]\",\n      5: \"basis-[calc(41.667%-0.7292rem)]\",\n      6: \"basis-[calc(50%-0.625rem)]\",\n      7: \"basis-[calc(58.333%-0.5208rem)]\",\n      8: \"basis-[calc(66.667%-0.4167rem)]\",\n      9: \"basis-[calc(75%-0.3125rem)]\",\n      12: \"basis-full\",\n    },\n    2.5: {\n      2.4: \"basis-[calc(20%-0.5rem)]\",\n      3: \"basis-[calc(25%-0.46875rem)]\",\n      4: \"basis-[calc(33.333%-0.41667rem)]\",\n      5: \"basis-[calc(41.667%-0.36458rem)]\",\n      6: \"basis-[calc(50%-0.3125rem)]\",\n      7: \"basis-[calc(58.333%-0.26042rem)]\",\n      8: \"basis-[calc(66.667%-0.20833rem)]\",\n      9: \"basis-[calc(75%-0.15625rem)]\",\n      12: \"basis-full\",\n    },\n  },\n  sm: {\n    5: {\n      2.4: \"sm:basis-[calc(20%-1rem)]\",\n      3: \"sm:basis-[calc(25%-0.9375rem)]\",\n      4: \"sm:basis-[calc(33.333%-0.8333rem)]\",\n      5: \"sm:basis-[calc(41.667%-0.7292rem)]\",\n      6: \"sm:basis-[calc(50%-0.625rem)]\",\n      7: \"sm:basis-[calc(58.333%-0.5208rem)]\",\n      8: \"sm:basis-[calc(66.667%-0.4167rem)]\",\n      9: \"sm:basis-[calc(75%-0.3125rem)]\",\n      12: \"sm:basis-full\",\n    },\n    2.5: {\n      2.4: \"sm:basis-[calc(20%-0.5rem)]\",\n      3: \"sm:basis-[calc(25%-0.46875rem)]\",\n      4: \"sm:basis-[calc(33.333%-0.41667rem)]\",\n      5: \"sm:basis-[calc(41.667%-0.36458rem)]\",\n      6: \"sm:basis-[calc(50%-0.3125rem)]\",\n      7: \"sm:basis-[calc(58.333%-0.26042rem)]\",\n      8: \"sm:basis-[calc(66.667%-0.20833rem)]\",\n      9: \"sm:basis-[calc(75%-0.15625rem)]\",\n      12: \"sm:basis-full\",\n    },\n  },\n  md: {\n    5: {\n      2.4: \"md:basis-[calc(20%-1rem)]\",\n      3: \"md:basis-[calc(25%-0.9375rem)]\",\n      4: \"md:basis-[calc(33.333%-0.8333rem)]\",\n      5: \"md:basis-[calc(41.667%-0.7292rem)]\",\n      6: \"md:basis-[calc(50%-0.625rem)]\",\n      7: \"md:basis-[calc(58.333%-0.5208rem)]\",\n      8: \"md:basis-[calc(66.667%-0.4167rem)]\",\n      9: \"md:basis-[calc(75%-0.3125rem)]\",\n      12: \"md:basis-full\",\n    },\n    2.5: {\n      2.4: \"md:basis-[calc(20%-0.5rem)]\",\n      3: \"md:basis-[calc(25%-0.46875rem)]\",\n      4: \"md:basis-[calc(33.333%-0.41667rem)]\",\n      5: \"md:basis-[calc(41.667%-0.36458rem)]\",\n      6: \"md:basis-[calc(50%-0.3125rem)]\",\n      7: \"md:basis-[calc(58.333%-0.26042rem)]\",\n      8: \"md:basis-[calc(66.667%-0.20833rem)]\",\n      9: \"md:basis-[calc(75%-0.15625rem)]\",\n      12: \"md:basis-full\",\n    },\n  },\n  lg: {\n    5: {\n      2.4: \"lg:basis-[calc(20%-1rem)]\",\n      3: \"lg:basis-[calc(25%-0.9375rem)]\",\n      4: \"lg:basis-[calc(33.333%-0.8333rem)]\",\n      5: \"lg:basis-[calc(41.667%-0.7292rem)]\",\n      6: \"lg:basis-[calc(50%-0.625rem)]\",\n      7: \"lg:basis-[calc(58.333%-0.5208rem)]\",\n      8: \"lg:basis-[calc(66.667%-0.4167rem)]\",\n      9: \"lg:basis-[calc(75%-0.3125rem)]\",\n      12: \"lg:basis-full\",\n    },\n    2.5: {\n      2.4: \"lg:basis-[calc(20%-0.5rem)]\",\n      3: \"lg:basis-[calc(25%-0.46875rem)]\",\n      4: \"lg:basis-[calc(33.333%-0.41667rem)]\",\n      5: \"lg:basis-[calc(41.667%-0.36458rem)]\",\n      6: \"lg:basis-[calc(50%-0.3125rem)]\",\n      7: \"lg:basis-[calc(58.333%-0.26042rem)]\",\n      8: \"lg:basis-[calc(66.667%-0.20833rem)]\",\n      9: \"lg:basis-[calc(75%-0.15625rem)]\",\n      12: \"lg:basis-full\",\n    },\n  },\n};\n\nconst BREAKPOINTS: readonly Breakpoint[] = [\"xs\", \"sm\", \"md\", \"lg\"];\n\n/**\n * Full class string for one item: always `min-w-0 grow`, plus the literal basis\n * class for each supplied breakpoint (looked up, never concatenated).\n */\nexport function fillItemClass(span: FillSpan, gap: FillGap): string {\n  const parts = [\"min-w-0\", \"grow\"];\n  for (const bp of BREAKPOINTS) {\n    const n = span[bp];\n    if (n !== undefined) parts.push(CLASSES[bp][gap][n]);\n  }\n  return parts.join(\" \");\n}\n","import { createContext, useContext } from \"react\";\nimport { Box } from \"@mui/material\";\nimport { fillItemClass, type FillGap, type FillSpan } from \"./fillGridClasses\";\n\nconst FillGapContext = createContext<FillGap>(5);\n\ninterface FillGridProps {\n  /** Gutter width. 5 = 20px (default), 2.5 = 10px. Matches MUI spacing values. */\n  gap?: FillGap;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/**\n * A flex-wrap row whose items `grow` to fill a partially-filled last row — the\n * dashboard/overview convention. NOT for forms, tables, or single full-width cards.\n *\n * Renders `w-full` so it always spans its container: a `FillGrid` is itself often\n * a flex item of a parent MUI `<Grid container>` / flex row, where without an\n * explicit width it would shrink-wrap to its content instead of filling the row\n * (the behaviour a `<Grid container size={12}>` used to give).\n */\nexport function FillGrid({ gap = 5, className, children }: FillGridProps) {\n  const gapClass = gap === 2.5 ? \"gap-2.5\" : \"gap-5\";\n  return (\n    <FillGapContext.Provider value={gap}>\n      <Box className={[\"flex w-full flex-wrap\", gapClass, className].filter(Boolean).join(\" \")}>\n        {children}\n      </Box>\n    </FillGapContext.Provider>\n  );\n}\n\ninterface FillGridItemProps {\n  /** 12-column span per breakpoint, mirroring MUI Grid's `size`. Default { xs: 12 }. */\n  span?: FillSpan;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function FillGridItem({ span = { xs: 12 }, className, children }: FillGridItemProps) {\n  const gap = useContext(FillGapContext);\n  return (\n    <Box className={[fillItemClass(span, gap), className].filter(Boolean).join(\" \")}>\n      {children}\n    </Box>\n  );\n}\n"]}

package/dist/components/shared/index.cjs

@@ -0,0 +1,186 @@
+'use strict';
+
+var material = require('@mui/material');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ui/index.ts
+function Dialog(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Dialog, { disableScrollLock: true, disableRestoreFocus: true, ...props });
+}
+function ConfirmActionDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  isLoading = false,
+  labels,
+  icon,
+  confirmVariant = "default",
+  children,
+  disableConfirm
+}) {
+  const description = labels.description ?? "Are you sure you want to continue?";
+  const btnCancel = labels.btnCancel ?? "Cancel";
+  const btnConfirm = labels.btnConfirm ?? "Confirm";
+  const btnLoading = labels.btnLoading ?? "Processing...";
+  const handleClose = () => {
+    if (!isLoading) onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { open, onClose: handleClose, maxWidth: "xs", fullWidth: true, role: "alertdialog", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.DialogTitle, { className: "flex items-center gap-2", children: [
+      icon,
+      labels.title
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { children: [
+      typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(material.DialogContentText, { children: description }) : /* @__PURE__ */ jsxRuntime.jsx(material.DialogContentText, { component: "div", children: description }),
+      children
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleClose, disabled: isLoading, children: btnCancel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Button,
+        {
+          variant: "contained",
+          color: confirmVariant === "destructive" ? "error" : "primary",
+          onClick: onConfirm,
+          disabled: isLoading || disableConfirm,
+          children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 16, color: "inherit", className: "mr-2" }),
+            btnLoading
+          ] }) : btnConfirm
+        }
+      )
+    ] })
+  ] });
+}
+function NiBinEmpty({ className, variant = "outlined", size = "medium" }) {
+  const iconSize = sizeHelper(size);
+  const iconStrokeWidth = strokeSizeHelper(iconSize);
+  if (variant === "outlined") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        width: iconSize,
+        height: iconSize,
+        className,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M6 6L5.48806 9.58357C5.16413 11.8511 5.14395 14.1516 5.42806 16.4245L5.51601 17.1281C5.80316 19.4253 7.56538 21.2609 9.84894 21.6415V21.6415C11.2732 21.8789 12.7268 21.8789 14.1511 21.6415V21.6415C16.4346 21.2609 18.1968 19.4253 18.484 17.1281L18.5719 16.4245C18.856 14.1516 18.8359 11.8511 18.5119 9.58357L18 6",
+              stroke: "currentColor",
+              strokeWidth: iconStrokeWidth,
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M15 5L14.9062 4.43717C14.7408 3.4451 14.6582 2.94906 14.3711 2.60286C14.2462 2.45218 14.0957 2.32469 13.9265 2.22623C13.5378 2 13.035 2 12.0292 2L11.9708 2C10.965 2 10.4622 2 10.0735 2.22623C9.90431 2.32469 9.75381 2.45219 9.62888 2.60286C9.34182 2.94906 9.25915 3.4451 9.09381 4.43717L9 5",
+              stroke: "currentColor",
+              strokeWidth: iconStrokeWidth,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M20 6L18.2017 5.77522C14.0833 5.26041 9.91673 5.26041 5.79826 5.77522L4 6",
+              stroke: "currentColor",
+              strokeWidth: iconStrokeWidth,
+              strokeLinecap: "round"
+            }
+          )
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        width: iconSize,
+        height: iconSize,
+        className,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M9.74018 5.12304C9.6721 5.53152 9.28536 5.80813 8.8769 5.74023C8.46843 5.67215 8.19181 5.28541 8.25971 4.87695L8.35444 4.31347C8.43472 3.83178 8.50246 3.41913 8.59077 3.08593C8.68246 2.74003 8.81179 2.41337 9.0517 2.12402C9.23282 1.90562 9.45102 1.72085 9.69623 1.57812C10.0211 1.38906 10.3644 1.31483 10.7206 1.28125C11.0639 1.24892 11.4822 1.25 11.9706 1.25L12.0292 1.25C12.5177 1.25 12.936 1.24892 13.2792 1.28125C13.6355 1.31483 13.9788 1.38906 14.3037 1.57812C14.5489 1.72085 14.7671 1.90562 14.9482 2.12402C15.1881 2.41337 15.3174 2.74003 15.4091 3.08593C15.4974 3.41913 15.5652 3.83177 15.6455 4.31347L15.7402 4.87695L15.749 4.95312C15.7732 5.33241 15.506 5.6764 15.123 5.74023C14.74 5.80389 14.3763 5.56494 14.2763 5.19824L14.2597 5.12304L14.166 4.56054C14.081 4.05049 14.025 3.71896 13.9589 3.46972C13.8964 3.23378 13.8409 3.13889 13.7939 3.08203C13.7252 2.99916 13.6418 2.92817 13.5488 2.87402C13.4849 2.83695 13.3818 2.79831 13.1386 2.77539C12.8819 2.75121 12.5462 2.75 12.0292 2.75L11.9706 2.75C11.4537 2.75 11.1179 2.75121 10.8613 2.77539C10.6181 2.79831 10.515 2.83695 10.4511 2.87402C10.3581 2.92817 10.2747 2.99916 10.206 3.08203C10.1589 3.13889 10.1035 3.23378 10.041 3.46972C9.97489 3.71896 9.91894 4.05049 9.83393 4.56054L9.74018 5.12304Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M5.94819 5.00114C9.96612 4.51861 14.0279 4.51807 18.0459 5.00016C18.1288 5.01011 18.212 5.02008 18.2949 5.03043L20.0927 5.25504L20.1689 5.26872C20.5391 5.35382 20.792 5.70788 20.7441 6.09293C20.6958 6.47814 20.3633 6.75806 19.9834 6.74918L19.9072 6.7443L18.8447 6.61051L19.2548 9.4777C19.5881 11.8107 19.6086 14.1783 19.3164 16.5168L19.2285 17.2209C18.9001 19.8471 16.8851 21.9459 14.2744 22.381C12.7685 22.632 11.2314 22.632 9.72554 22.381C7.11486 21.9458 5.09978 19.8471 4.77144 17.2209L4.68355 16.5168C4.39132 14.1783 4.41185 11.8107 4.74507 9.4777L5.15425 6.61051L4.09273 6.7443L4.01655 6.74918C3.63657 6.75805 3.30414 6.47813 3.25581 6.09293C3.20471 5.68211 3.49633 5.30642 3.90718 5.25504L5.70503 5.03043C5.78598 5.02032 5.86721 5.01086 5.94819 5.00114Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      }
+    );
+  }
+}
+var sizeHelper = (size) => {
+  if (typeof size === "number") {
+    return size;
+  } else if (size === "large") {
+    return 24;
+  } else if (size === "small" || size === "tiny") {
+    return 16;
+  } else {
+    return 20;
+  }
+};
+var strokeSizeHelper = (size) => {
+  if (size === 32) {
+    return 1.15;
+  } else if (size >= 20) {
+    return 1.5;
+  } else {
+    return 1.75;
+  }
+};
+function ConfirmDeleteDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  isDeleting,
+  labels
+}) {
+  const title = labels?.title ?? "Delete?";
+  const description = labels?.description ?? "Are you sure? This action cannot be undone.";
+  const btnCancel = labels?.btnCancel ?? "Cancel";
+  const btnConfirm = labels?.btnConfirm ?? "Delete";
+  const btnDeleting = labels?.btnDeleting ?? "Deleting...";
+  const handleClose = () => {
+    if (!isDeleting) onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { open, onClose: handleClose, maxWidth: "xs", fullWidth: true, role: "alertdialog", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.DialogTitle, { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { color: "error.main", display: "inline-flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(NiBinEmpty, { size: "medium" }) }),
+      title
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { children: typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(material.DialogContentText, { children: description }) : /* @__PURE__ */ jsxRuntime.jsx(material.DialogContentText, { component: "div", children: description }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.DialogActions, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleClose, disabled: isDeleting, children: btnCancel }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Button, { variant: "contained", color: "error", onClick: onConfirm, disabled: isDeleting, children: isDeleting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 16, color: "inherit", className: "mr-2" }),
+        btnDeleting
+      ] }) : btnConfirm })
+    ] })
+  ] });
+}
+
+exports.ConfirmActionDialog = ConfirmActionDialog;
+exports.ConfirmDeleteDialog = ConfirmDeleteDialog;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map