@octoguide/mui-ui-toolkit 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -26,7 +26,17 @@ var defaultTheme = {
     border: "#C5CFE0",
     borderFocus: "#1565C0",
     overlayLight: "rgba(255, 255, 255, 0.8)",
-    overlayDark: "rgba(0, 0, 0, 0.12)"
+    overlayDark: "rgba(0, 0, 0, 0.12)",
+    overlayLight60: "rgba(255, 255, 255, 0.6)",
+    overlayLight70: "rgba(255, 255, 255, 0.7)",
+    overlayLight75: "rgba(255, 255, 255, 0.75)",
+    overlayLight85: "rgba(255, 255, 255, 0.85)",
+    colorRed: "#FF5630",
+    colorAmber: "#FFAB00",
+    colorOrange: "#FF8B00",
+    colorGreen: "#36B37E",
+    colorBlue: "#0065FF",
+    colorGrey: "#6B778C"
   },
   typography: {
     fontFamilyBase: '"Source Sans Pro", sans-serif',
@@ -46,6 +56,8 @@ var defaultTheme = {
     // 22px
     fontSize3xl: "1.75rem",
     // 28px
+    fontSize4xl: "2.25rem",
+    // 36px
     // ── Weights (identical across all themes) ─────────────────────────────
     fontWeightLight: 300,
     fontWeightRegular: 400,
@@ -106,6 +118,12 @@ var defaultTheme = {
     tooltip: 700
   },
   components: {
+    footer: {
+      background: "#003c8f",
+      textColor: "rgba(255, 255, 255, 0.7)",
+      linkColor: "rgba(255, 255, 255, 0.7)",
+      linkHoverColor: "#ffffff"
+    },
     button: {
       // Sizes & paddings (identical across themes)
       paddingX: "12px",
@@ -1162,11 +1180,17 @@ var CardActions = MuiCardActions;
 Card.displayName = "ToolkitCard";
 
 // src/components/TextField/TextField.tsx
+import React, { useState } from "react";
 import {
-  TextField as MuiTextField
+  TextField as MuiTextField,
+  InputAdornment,
+  IconButton,
+  SvgIcon as SvgIcon2
 } from "@mui/material";
 import { styled as styled3 } from "@mui/material/styles";
 import { jsx as jsx5 } from "react/jsx-runtime";
+var VisibilityIcon = /* @__PURE__ */ jsx5(SvgIcon2, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { fill: "currentColor", d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3" }) });
+var VisibilityOffIcon = /* @__PURE__ */ jsx5(SvgIcon2, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { fill: "currentColor", d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75C21.27 5.61 17 2.5 12 2.5c-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 5.13 11.35 5 12 5M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27M7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01" }) });
 var StyledTextField = styled3(MuiTextField)(({ theme }) => ({
   // Transition on the entire field when focus changes
   "& .MuiOutlinedInput-root": {
@@ -1176,38 +1200,55 @@ var StyledTextField = styled3(MuiTextField)(({ theme }) => ({
     }
   }
 }));
-function TextField({ error, FormHelperTextProps, inputProps, label, ...props }) {
-  if (process.env.NODE_ENV !== "production") {
-    if (!label && !props["aria-label"] && !props["aria-labelledby"] && !inputProps?.["aria-label"] && !inputProps?.["aria-labelledby"]) {
-      console.warn("[ToolkitTextField] Missing accessible label. Provide `label`, `aria-label`, or `aria-labelledby`.");
+var TextField = React.forwardRef(
+  function TextField2({ error, FormHelperTextProps, inputProps, label, showPasswordToggle, type, slotProps, ...props }, ref) {
+    const [showPassword, setShowPassword] = useState(false);
+    if (process.env.NODE_ENV !== "production") {
+      if (!label && !props["aria-label"] && !props["aria-labelledby"] && !inputProps?.["aria-label"] && !inputProps?.["aria-labelledby"]) {
+        console.warn("[ToolkitTextField] Missing accessible label. Provide `label`, `aria-label`, or `aria-labelledby`.");
+      }
     }
+    const resolvedType = showPasswordToggle && type === "password" ? showPassword ? "text" : "password" : type;
+    const toggleAdornment = showPasswordToggle && type === "password" ? /* @__PURE__ */ jsx5(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx5(
+      IconButton,
+      {
+        "aria-label": showPassword ? "Hide password" : "Show password",
+        onClick: () => setShowPassword((prev) => !prev),
+        edge: "end",
+        children: showPassword ? VisibilityOffIcon : VisibilityIcon
+      }
+    ) }) : null;
+    const mergedSlotProps = toggleAdornment ? { ...slotProps, input: { endAdornment: toggleAdornment, ...slotProps?.input } } : slotProps;
+    return /* @__PURE__ */ jsx5(
+      StyledTextField,
+      {
+        fullWidth: true,
+        variant: "outlined",
+        label,
+        error,
+        type: resolvedType,
+        inputRef: ref,
+        inputProps,
+        slotProps: mergedSlotProps,
+        FormHelperTextProps: error ? { role: "alert", ...FormHelperTextProps } : FormHelperTextProps,
+        ...props
+      }
+    );
   }
-  return /* @__PURE__ */ jsx5(
-    StyledTextField,
-    {
-      fullWidth: true,
-      variant: "outlined",
-      label,
-      error,
-      inputProps,
-      FormHelperTextProps: error ? { role: "alert", ...FormHelperTextProps } : FormHelperTextProps,
-      ...props
-    }
-  );
-}
+);
 TextField.displayName = "ToolkitTextField";
 
 // src/components/Alert/Alert.tsx
 import {
   Alert as MuiAlert,
   AlertTitle as MuiAlertTitle,
-  SvgIcon as SvgIcon2
+  SvgIcon as SvgIcon3
 } from "@mui/material";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var InfoIcon = /* @__PURE__ */ jsx6(SvgIcon2, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-10 5.75a.75.75 0 0 0 .75-.75v-6a.75.75 0 0 0-1.5 0v6c0 .414.336.75.75.75M12 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2", clipRule: "evenodd" }) });
-var SuccessIcon = /* @__PURE__ */ jsx6(SvgIcon2, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-5.97-3.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0", clipRule: "evenodd" }) });
-var WarningIcon = /* @__PURE__ */ jsx6(SvgIcon2, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M5.312 10.762C8.23 5.587 9.689 3 12 3c2.31 0 3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572s.117-3.722 2.542-8.022zM12 7.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V8a.75.75 0 0 1 .75-.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2", clipRule: "evenodd" }) });
-var ErrorIcon = /* @__PURE__ */ jsx6(SvgIcon2, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M7.843 3.802C9.872 2.601 10.886 2 12 2c1.114 0 2.128.6 4.157 1.802l.686.406c2.029 1.202 3.043 1.803 3.6 2.792c.557.99.557 2.19.557 4.594v.812c0 2.403 0 3.605-.557 4.594c-.557.99-1.571 1.59-3.6 2.791l-.686.407C14.128 21.399 13.114 22 12 22c-1.114 0-2.128-.6-4.157-1.802l-.686-.407c-2.029-1.2-3.043-1.802-3.6-2.791C3 16.01 3 14.81 3 12.406v-.812C3 9.19 3 7.989 3.557 7c.557-.99 1.571-1.59 3.6-2.792zM13 16a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-1-9.75a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75", clipRule: "evenodd" }) });
+var InfoIcon = /* @__PURE__ */ jsx6(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-10 5.75a.75.75 0 0 0 .75-.75v-6a.75.75 0 0 0-1.5 0v6c0 .414.336.75.75.75M12 7a1 1 0 1 1 0 2a1 1 0 0 1 0-2", clipRule: "evenodd" }) });
+var SuccessIcon = /* @__PURE__ */ jsx6(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-5.97-3.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0", clipRule: "evenodd" }) });
+var WarningIcon = /* @__PURE__ */ jsx6(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M5.312 10.762C8.23 5.587 9.689 3 12 3c2.31 0 3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572s.117-3.722 2.542-8.022zM12 7.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V8a.75.75 0 0 1 .75-.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2", clipRule: "evenodd" }) });
+var ErrorIcon = /* @__PURE__ */ jsx6(SvgIcon3, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { fill: "currentColor", fillRule: "evenodd", d: "M7.843 3.802C9.872 2.601 10.886 2 12 2c1.114 0 2.128.6 4.157 1.802l.686.406c2.029 1.202 3.043 1.803 3.6 2.792c.557.99.557 2.19.557 4.594v.812c0 2.403 0 3.605-.557 4.594c-.557.99-1.571 1.59-3.6 2.791l-.686.407C14.128 21.399 13.114 22 12 22c-1.114 0-2.128-.6-4.157-1.802l-.686-.407c-2.029-1.2-3.043-1.802-3.6-2.791C3 16.01 3 14.81 3 12.406v-.812C3 9.19 3 7.989 3.557 7c.557-.99 1.571-1.59 3.6-2.792zM13 16a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-1-9.75a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75", clipRule: "evenodd" }) });
 var defaultIconMapping = {
   info: InfoIcon,
   success: SuccessIcon,
@@ -1307,7 +1348,7 @@ function ToggleButtonGroup(props) {
 ToggleButtonGroup.displayName = "ToolkitToggleButtonGroup";
 
 // src/components/DatePicker/DatePicker.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import {
@@ -1363,7 +1404,7 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import Button2 from "@mui/material/Button";
 import Box from "@mui/material/Box";
-import TextField2 from "@mui/material/TextField";
+import TextField3 from "@mui/material/TextField";
 import { styled as styled6 } from "@mui/material/styles";
 import { Fragment, jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 function DateLocalizationProvider({ children }) {
@@ -1446,8 +1487,8 @@ function DateRangePickerInput({
   endLabel = "End date",
   buttonLabel = "Click me!"
 }) {
-  const [open, setOpen] = useState(false);
-  const [draft, setDraft] = useState(value);
+  const [open, setOpen] = useState2(false);
+  const [draft, setDraft] = useState2(value);
   const handleOpen = () => {
     setDraft(value);
     setOpen(true);
@@ -1493,9 +1534,9 @@ function DateRangePickerCalendar({
   onChange,
   buttonLabel = "Click me!"
 }) {
-  const [open, setOpen] = useState(false);
-  const [draft, setDraft] = useState(value);
-  const [selecting, setSelecting] = useState("start");
+  const [open, setOpen] = useState2(false);
+  const [draft, setDraft] = useState2(value);
+  const [selecting, setSelecting] = useState2("start");
   const handleOpen = () => {
     setDraft(value);
     setSelecting("start");
@@ -1519,7 +1560,7 @@ function DateRangePickerCalendar({
     /* @__PURE__ */ jsxs2(Dialog, { open, onClose: handleCancel, children: [
       /* @__PURE__ */ jsxs2(DialogContent, { sx: { p: 1 }, children: [
         /* @__PURE__ */ jsx10(Box, { sx: { mb: 1, px: 1 }, children: /* @__PURE__ */ jsx10(
-          TextField2,
+          TextField3,
           {
             size: "small",
             label: "Selecting",