@amateescu/portal-ui-components 0.0.35-beta0 → 0.0.37

package/README.md

@@ -0,0 +1,113 @@
+# PassportX Portal UI Components
+
+Component library for PassportX BackOffice applications built with React, TypeScript, and Vite.
+
+## Installation
+
+\`\`\`bash
+npm install @amateescu/portal-ui-components
+\`\`\`
+
+## Peer Dependencies
+
+\`\`\`json
+{
+  "react": ">=18.2.0",
+  "react-dom": ">=18.2.0",
+  "i18next": ">=23.10.1",
+  "react-i18next": ">=14.1.0",
+  "antd": ">=5.16.2",
+  "@mui/material": ">=6.4.11"
+}
+\`\`\`
+
+## Usage
+
+### Importing Components
+
+\`\`\`typescript
+import { PassportButton, KpiCard, Login } from '@amateescu/portal-ui-components/components';
+import { currency, date, decimal } from '@amateescu/portal-ui-components/portal-utils';
+import type { Column, CultureStore } from '@amateescu/portal-ui-components/types';
+\`\`\`
+
+### Basic Example
+
+\`\`\`tsx
+import { PassportButton } from '@amateescu/portal-ui-components/components';
+
+function App() {
+  return (
+    <PassportButton 
+      content="Click me"
+      onClick={() => console.log('Clicked!')}
+    />
+  );
+}
+\`\`\`
+
+## Components
+
+### PassportButton
+A styled Material-UI button with project-specific defaults.
+
+### KpiCard
+Display key performance indicators with icons.
+
+### Login
+Authentication form with username/password fields.
+
+### TotalDataGrid
+Customized Material-UI DataGrid with totals row.
+
+[Full component documentation available in Storybook]
+
+## Development
+
+\`\`\`bash
+# Install dependencies
+npm install
+
+# Start Storybook
+npm run storybook
+
+# Run tests
+npm test
+
+# Build library
+npm run build
+\`\`\`
+
+## License
+
+Private
+
+## Contributing
+
+[Internal guidelines]
+\`\`\`
+
+### Component Documentation Template
+
+Each component should have inline JSDoc:
+
+```typescript
+/**
+ * KpiCard displays a key performance indicator with an icon and title.
+ * 
+ * @example
+ * ```tsx
+ * <KpiCard
+ *   title="Total Sales"
+ *   content="$1,234,567"
+ *   icon={<DollarIcon />}
+ *   menuCollapsed={false}
+ * />
+ * ```
+ * 
+ * @param {KpiCardProps} props - Component props
+ * @returns {JSX.Element} Rendered KPI card
+ */
+export function KpiCard({ title, content, icon, menuCollapsed }: KpiCardProps) {
+  // ...
+}

package/dist/{Button-DG4uye8X.js → Button-BM72-1G6.js}

@@ -1,55 +1,56 @@
 import * as s from "react";
-import { a as J, g as K, r as Q, u as X, s as b, c as N, b as r, d as Y, h as Z, m as oo, i as f, e as to, P as t } from "./createSimplePaletteValueFilter-CwLqlaaZ.js";
-import { jsxs as ao, jsx as c } from "react/jsx-runtime";
-import { B as no } from "./ButtonBase-DrxMtoTW.js";
-import { C as io } from "./CircularProgress-DpvktFBW.js";
-let O = 0;
-function ro(o) {
-  const [a, n] = s.useState(o), i = o || a;
+import { a as q, g as J, r as K, u as Q, s as f, c as E, b as r, d as X, l as Y, m as Z, P as t } from "./DefaultPropsProvider-BtPfTrMq.js";
+import { c as oo } from "./createSimplePaletteValueFilter-Bz8RuRaa.js";
+import { jsxs as to, jsx as c } from "react/jsx-runtime";
+import { B as no } from "./ButtonBase-D6nf3ymf.js";
+import { C as ao } from "./CircularProgress-BlQFR6DW.js";
+let N = 0;
+function io(o) {
+  const [n, a] = s.useState(o), i = o || n;
   return s.useEffect(() => {
-    a == null && (O += 1, n(`mui-${O}`));
-  }, [a]), i;
+    n == null && (N += 1, a(`mui-${N}`));
+  }, [n]), i;
 }
-const eo = {
+const ro = {
   ...s
-}, W = eo.useId;
-function so(o) {
+}, W = ro.useId;
+function eo(o) {
   if (W !== void 0) {
-    const a = W();
-    return o ?? a;
+    const n = W();
+    return o ?? n;
   }
-  return ro(o);
+  return io(o);
 }
-function lo(o) {
-  return K("MuiButton", o);
+function so(o) {
+  return J("MuiButton", o);
 }
-const p = J("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge", "loading", "loadingWrapper", "loadingIconPlaceholder", "loadingIndicator", "loadingPositionCenter", "loadingPositionStart", "loadingPositionEnd"]), L = /* @__PURE__ */ s.createContext({});
-process.env.NODE_ENV !== "production" && (L.displayName = "ButtonGroupContext");
-const M = /* @__PURE__ */ s.createContext(void 0);
-process.env.NODE_ENV !== "production" && (M.displayName = "ButtonGroupButtonContext");
-const co = (o) => {
+const p = q("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge", "loading", "loadingWrapper", "loadingIconPlaceholder", "loadingIndicator", "loadingPositionCenter", "loadingPositionStart", "loadingPositionEnd"]), T = /* @__PURE__ */ s.createContext({});
+process.env.NODE_ENV !== "production" && (T.displayName = "ButtonGroupContext");
+const L = /* @__PURE__ */ s.createContext(void 0);
+process.env.NODE_ENV !== "production" && (L.displayName = "ButtonGroupButtonContext");
+const lo = (o) => {
   const {
-    color: a,
-    disableElevation: n,
+    color: n,
+    disableElevation: a,
     fullWidth: i,
     size: u,
     variant: g,
     loading: v,
-    loadingPosition: I,
-    classes: x
-  } = o, S = {
-    root: ["root", v && "loading", g, `${g}${r(a)}`, `size${r(u)}`, `${g}Size${r(u)}`, `color${r(a)}`, n && "disableElevation", i && "fullWidth", v && `loadingPosition${r(I)}`],
+    loadingPosition: S,
+    classes: b
+  } = o, x = {
+    root: ["root", v && "loading", g, `${g}${r(n)}`, `size${r(u)}`, `${g}Size${r(u)}`, `color${r(n)}`, a && "disableElevation", i && "fullWidth", v && `loadingPosition${r(S)}`],
     startIcon: ["icon", "startIcon", `iconSize${r(u)}`],
     endIcon: ["icon", "endIcon", `iconSize${r(u)}`],
     loadingIndicator: ["loadingIndicator"],
     loadingWrapper: ["loadingWrapper"]
-  }, z = Y(S, lo, x);
+  }, I = X(x, so, b);
   return {
-    ...x,
+    ...b,
     // forward the focused, disabled, etc. classes to the ButtonBase
-    ...z
+    ...I
   };
-}, k = [{
+}, M = [{
   props: {
     size: "small"
   },
@@ -76,20 +77,20 @@ const co = (o) => {
       fontSize: 22
     }
   }
-}], po = b(no, {
-  shouldForwardProp: (o) => Z(o) || o === "classes",
+}], co = f(no, {
+  shouldForwardProp: (o) => Y(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: n
+      ownerState: a
     } = o;
-    return [a.root, a[n.variant], a[`${n.variant}${r(n.color)}`], a[`size${r(n.size)}`], a[`${n.variant}Size${r(n.size)}`], n.color === "inherit" && a.colorInherit, n.disableElevation && a.disableElevation, n.fullWidth && a.fullWidth, n.loading && a.loading];
+    return [n.root, n[a.variant], n[`${a.variant}${r(a.color)}`], n[`size${r(a.size)}`], n[`${a.variant}Size${r(a.size)}`], a.color === "inherit" && n.colorInherit, a.disableElevation && n.disableElevation, a.fullWidth && n.fullWidth, a.loading && n.loading];
   }
-})(oo(({
+})(Z(({
   theme: o
 }) => {
-  const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], n = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
+  const n = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], a = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
   return {
     ...o.typography.button,
     minWidth: 64,
@@ -155,22 +156,22 @@ const co = (o) => {
         color: "var(--variant-textColor)",
         backgroundColor: "var(--variant-textBg)"
       }
-    }, ...Object.entries(o.palette).filter(to()).map(([i]) => ({
+    }, ...Object.entries(o.palette).filter(oo()).map(([i]) => ({
       props: {
         color: i
       },
       style: {
         "--variant-textColor": (o.vars || o).palette[i].main,
         "--variant-outlinedColor": (o.vars || o).palette[i].main,
-        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[i].mainChannel} / 0.5)` : f(o.palette[i].main, 0.5),
+        "--variant-outlinedBorder": o.alpha((o.vars || o).palette[i].main, 0.5),
         "--variant-containedColor": (o.vars || o).palette[i].contrastText,
         "--variant-containedBg": (o.vars || o).palette[i].main,
         "@media (hover: hover)": {
           "&:hover": {
             "--variant-containedBg": (o.vars || o).palette[i].dark,
-            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[i].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : f(o.palette[i].main, o.palette.action.hoverOpacity),
+            "--variant-textBg": o.alpha((o.vars || o).palette[i].main, (o.vars || o).palette.action.hoverOpacity),
             "--variant-outlinedBorder": (o.vars || o).palette[i].main,
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[i].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : f(o.palette[i].main, o.palette.action.hoverOpacity)
+            "--variant-outlinedBg": o.alpha((o.vars || o).palette[i].main, (o.vars || o).palette.action.hoverOpacity)
           }
         }
       }
@@ -181,12 +182,12 @@ const co = (o) => {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
+        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : n,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : n,
-            "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : f(o.palette.text.primary, o.palette.action.hoverOpacity),
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : f(o.palette.text.primary, o.palette.action.hoverOpacity)
+            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
+            "--variant-textBg": o.alpha((o.vars || o).palette.text.primary, (o.vars || o).palette.action.hoverOpacity),
+            "--variant-outlinedBg": o.alpha((o.vars || o).palette.text.primary, (o.vars || o).palette.action.hoverOpacity)
           }
         }
       }
@@ -284,14 +285,14 @@ const co = (o) => {
       }
     }]
   };
-})), uo = b("span", {
+})), po = f("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: n
+      ownerState: a
     } = o;
-    return [a.startIcon, n.loading && a.startIconLoadingStart, a[`iconSize${r(n.size)}`]];
+    return [n.startIcon, a.loading && n.startIconLoadingStart, n[`iconSize${r(a.size)}`]];
   }
 })(({
   theme: o
@@ -326,15 +327,15 @@ const co = (o) => {
     style: {
       marginRight: -8
     }
-  }, ...k]
-})), go = b("span", {
+  }, ...M]
+})), uo = f("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, a) => {
+  overridesResolver: (o, n) => {
     const {
-      ownerState: n
+      ownerState: a
     } = o;
-    return [a.endIcon, n.loading && a.endIconLoadingEnd, a[`iconSize${r(n.size)}`]];
+    return [n.endIcon, a.loading && n.endIconLoadingEnd, n[`iconSize${r(a.size)}`]];
   }
 })(({
   theme: o
@@ -369,8 +370,8 @@ const co = (o) => {
     style: {
       marginLeft: -8
     }
-  }, ...k]
-})), vo = b("span", {
+  }, ...M]
+})), go = f("span", {
   name: "MuiButton",
   slot: "LoadingIndicator"
 })(({
@@ -460,99 +461,99 @@ const co = (o) => {
       right: -10
     }
   }]
-})), T = b("span", {
+})), O = f("span", {
   name: "MuiButton",
   slot: "LoadingIconPlaceholder"
 })({
   display: "inline-block",
   width: "1em",
   height: "1em"
-}), yo = /* @__PURE__ */ s.forwardRef(function(a, n) {
-  const i = s.useContext(L), u = s.useContext(M), g = Q(i, a), v = X({
+}), vo = /* @__PURE__ */ s.forwardRef(function(n, a) {
+  const i = s.useContext(T), u = s.useContext(L), g = K(i, n), v = Q({
     props: g,
     name: "MuiButton"
   }), {
-    children: I,
-    color: x = "primary",
-    component: S = "button",
-    className: z,
-    disabled: C = !1,
-    disableElevation: V = !1,
+    children: S,
+    color: b = "primary",
+    component: x = "button",
+    className: I,
+    disabled: z = !1,
+    disableElevation: k = !1,
     disableFocusRipple: B = !1,
-    endIcon: P,
-    focusVisibleClassName: j,
-    fullWidth: D = !1,
-    id: h,
+    endIcon: C,
+    focusVisibleClassName: V,
+    fullWidth: j = !1,
+    id: P,
     loading: l = null,
-    loadingIndicator: G,
+    loadingIndicator: D,
     loadingPosition: y = "center",
-    size: F = "medium",
-    startIcon: m,
-    type: w,
-    variant: U = "text",
-    ..._
-  } = v, $ = so(h), R = G ?? /* @__PURE__ */ c(io, {
-    "aria-labelledby": $,
+    size: G = "medium",
+    startIcon: w,
+    type: m,
+    variant: F = "text",
+    ...U
+  } = v, h = eo(P), R = D ?? /* @__PURE__ */ c(ao, {
+    "aria-labelledby": h,
     color: "inherit",
     size: 16
   }), d = {
     ...v,
-    color: x,
-    component: S,
-    disabled: C,
-    disableElevation: V,
+    color: b,
+    component: x,
+    disabled: z,
+    disableElevation: k,
     disableFocusRipple: B,
-    fullWidth: D,
+    fullWidth: j,
     loading: l,
     loadingIndicator: R,
     loadingPosition: y,
-    size: F,
-    type: w,
-    variant: U
-  }, e = co(d), H = (m || l && y === "start") && /* @__PURE__ */ c(uo, {
+    size: G,
+    type: m,
+    variant: F
+  }, e = lo(d), _ = (w || l && y === "start") && /* @__PURE__ */ c(po, {
     className: e.startIcon,
     ownerState: d,
-    children: m || /* @__PURE__ */ c(T, {
+    children: w || /* @__PURE__ */ c(O, {
       className: e.loadingIconPlaceholder,
       ownerState: d
     })
-  }), A = (P || l && y === "end") && /* @__PURE__ */ c(go, {
+  }), H = (C || l && y === "end") && /* @__PURE__ */ c(uo, {
     className: e.endIcon,
     ownerState: d,
-    children: P || /* @__PURE__ */ c(T, {
+    children: C || /* @__PURE__ */ c(O, {
       className: e.loadingIconPlaceholder,
       ownerState: d
     })
-  }), q = u || "", E = typeof l == "boolean" ? (
+  }), A = u || "", $ = typeof l == "boolean" ? (
     // use plain HTML span to minimize the runtime overhead
     /* @__PURE__ */ c("span", {
       className: e.loadingWrapper,
       style: {
         display: "contents"
       },
-      children: l && /* @__PURE__ */ c(vo, {
+      children: l && /* @__PURE__ */ c(go, {
         className: e.loadingIndicator,
         ownerState: d,
         children: R
       })
     })
   ) : null;
-  return /* @__PURE__ */ ao(po, {
+  return /* @__PURE__ */ to(co, {
     ownerState: d,
-    className: N(i.className, e.root, z, q),
-    component: S,
-    disabled: C || l,
+    className: E(i.className, e.root, I, A),
+    component: x,
+    disabled: z || l,
     focusRipple: !B,
-    focusVisibleClassName: N(e.focusVisible, j),
-    ref: n,
-    type: w,
-    id: l ? $ : h,
-    ..._,
+    focusVisibleClassName: E(e.focusVisible, V),
+    ref: a,
+    type: m,
+    id: l ? h : P,
+    ...U,
     classes: e,
-    children: [H, y !== "end" && E, I, y === "end" && E, A]
+    children: [_, y !== "end" && $, S, y === "end" && $, H]
   });
 });
-process.env.NODE_ENV !== "production" && (yo.propTypes = {
+process.env.NODE_ENV !== "production" && (vo.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -669,6 +670,6 @@ process.env.NODE_ENV !== "production" && (yo.propTypes = {
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
 export {
-  yo as B,
-  so as u
+  vo as B,
+  eo as u
 };