@octoguide/mui-ui-toolkit 0.9.0 → 0.10.0

package/dist/index.mjs

@@ -3845,66 +3845,20 @@ function Toggle({
 }
 Toggle.displayName = "ToolkitToggle";
 
-// src/components/Table/Table.tsx
-import {
-  Table as MuiTable,
-  TableHead as MuiTableHead,
-  TableBody as MuiTableBody,
-  TableRow as MuiTableRow,
-  TableCell as MuiTableCell,
-  TableContainer as MuiTableContainer,
-  TablePagination as MuiTablePagination,
-  TableSortLabel as MuiTableSortLabel
-} from "@mui/material";
-import { styled as styled23 } from "@mui/material/styles";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var StyledTableContainer = styled23(MuiTableContainer)(() => ({
-  overflowX: "auto"
-}));
-var StyledHeadCell = styled23(MuiTableCell)(({ theme }) => ({
-  fontWeight: theme.tokens.components.table.headerFontWeight,
-  backgroundColor: theme.tokens.components.table.headerBackground,
-  borderBottomWidth: theme.tokens.components.table.borderWidth,
-  borderBottomColor: theme.tokens.components.table.borderColor
-}));
-function Table(props) {
-  return /* @__PURE__ */ jsx28(MuiTable, { ...props });
-}
-function TableHead(props) {
-  return /* @__PURE__ */ jsx28(MuiTableHead, { ...props });
-}
-function TableBody(props) {
-  return /* @__PURE__ */ jsx28(MuiTableBody, { ...props });
-}
-function TableRow(props) {
-  return /* @__PURE__ */ jsx28(MuiTableRow, { ...props });
-}
-function TableCell(props) {
-  return /* @__PURE__ */ jsx28(MuiTableCell, { ...props });
-}
-function TableHeadCell(props) {
-  return /* @__PURE__ */ jsx28(StyledHeadCell, { component: "th", scope: "col", ...props });
-}
-function TableContainer(props) {
-  return /* @__PURE__ */ jsx28(StyledTableContainer, { ...props });
-}
-var TablePagination = MuiTablePagination;
-var TableSortLabel = MuiTableSortLabel;
-Table.displayName = "ToolkitTable";
-TableHead.displayName = "ToolkitTableHead";
-TableBody.displayName = "ToolkitTableBody";
-TableRow.displayName = "ToolkitTableRow";
-TableCell.displayName = "ToolkitTableCell";
-TableHeadCell.displayName = "ToolkitTableHeadCell";
-TableContainer.displayName = "ToolkitTableContainer";
+// src/components/Toast/Toast.tsx
+import React26 from "react";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import InfoIcon2 from "@mui/icons-material/Info";
+import WarningIcon2 from "@mui/icons-material/Warning";
 
 // src/foundation/H1/H1.tsx
 import React13 from "react";
 import { Typography } from "@mui/material";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var H1 = React13.forwardRef(
   function H12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx29(Typography, { ref, variant: "h1", color, ...props, children });
+    return /* @__PURE__ */ jsx28(Typography, { ref, variant: "h1", color, ...props, children });
   }
 );
 H1.displayName = "ToolkitH1";
@@ -3912,10 +3866,10 @@ H1.displayName = "ToolkitH1";
 // src/foundation/H2/H2.tsx
 import React14 from "react";
 import { Typography as Typography2 } from "@mui/material";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var H2 = React14.forwardRef(
   function H22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx30(Typography2, { ref, variant: "h2", color, ...props, children });
+    return /* @__PURE__ */ jsx29(Typography2, { ref, variant: "h2", color, ...props, children });
   }
 );
 H2.displayName = "ToolkitH2";
@@ -3923,10 +3877,10 @@ H2.displayName = "ToolkitH2";
 // src/foundation/H3/H3.tsx
 import React15 from "react";
 import { Typography as Typography3 } from "@mui/material";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var H3 = React15.forwardRef(
   function H32({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx31(Typography3, { ref, variant: "h3", color, ...props, children });
+    return /* @__PURE__ */ jsx30(Typography3, { ref, variant: "h3", color, ...props, children });
   }
 );
 H3.displayName = "ToolkitH3";
@@ -3934,10 +3888,10 @@ H3.displayName = "ToolkitH3";
 // src/foundation/H4/H4.tsx
 import React16 from "react";
 import { Typography as Typography4 } from "@mui/material";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var H4 = React16.forwardRef(
   function H42({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx32(Typography4, { ref, variant: "h4", color, ...props, children });
+    return /* @__PURE__ */ jsx31(Typography4, { ref, variant: "h4", color, ...props, children });
   }
 );
 H4.displayName = "ToolkitH4";
@@ -3945,10 +3899,10 @@ H4.displayName = "ToolkitH4";
 // src/foundation/H5/H5.tsx
 import React17 from "react";
 import { Typography as Typography5 } from "@mui/material";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var H5 = React17.forwardRef(
   function H52({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx33(Typography5, { ref, variant: "h5", color, ...props, children });
+    return /* @__PURE__ */ jsx32(Typography5, { ref, variant: "h5", color, ...props, children });
   }
 );
 H5.displayName = "ToolkitH5";
@@ -3956,10 +3910,10 @@ H5.displayName = "ToolkitH5";
 // src/foundation/H6/H6.tsx
 import React18 from "react";
 import { Typography as Typography6 } from "@mui/material";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var H6 = React18.forwardRef(
   function H62({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx34(Typography6, { ref, variant: "h6", color, ...props, children });
+    return /* @__PURE__ */ jsx33(Typography6, { ref, variant: "h6", color, ...props, children });
   }
 );
 H6.displayName = "ToolkitH6";
@@ -3967,10 +3921,10 @@ H6.displayName = "ToolkitH6";
 // src/foundation/Subtitle1/Subtitle1.tsx
 import React19 from "react";
 import { Typography as Typography7 } from "@mui/material";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Subtitle1 = React19.forwardRef(
   function Subtitle12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx35(Typography7, { ref, variant: "subtitle1", color, ...props, children });
+    return /* @__PURE__ */ jsx34(Typography7, { ref, variant: "subtitle1", color, ...props, children });
   }
 );
 Subtitle1.displayName = "ToolkitSubtitle1";
@@ -3978,10 +3932,10 @@ Subtitle1.displayName = "ToolkitSubtitle1";
 // src/foundation/Subtitle2/Subtitle2.tsx
 import React20 from "react";
 import { Typography as Typography8 } from "@mui/material";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Subtitle2 = React20.forwardRef(
   function Subtitle22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx36(Typography8, { ref, variant: "subtitle2", color, ...props, children });
+    return /* @__PURE__ */ jsx35(Typography8, { ref, variant: "subtitle2", color, ...props, children });
   }
 );
 Subtitle2.displayName = "ToolkitSubtitle2";
@@ -3989,10 +3943,10 @@ Subtitle2.displayName = "ToolkitSubtitle2";
 // src/foundation/Body1/Body1.tsx
 import React21 from "react";
 import { Typography as Typography9 } from "@mui/material";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Body1 = React21.forwardRef(
   function Body12({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx37(Typography9, { ref, variant: "body1", color, ...props, children });
+    return /* @__PURE__ */ jsx36(Typography9, { ref, variant: "body1", color, ...props, children });
   }
 );
 Body1.displayName = "ToolkitBody1";
@@ -4000,10 +3954,10 @@ Body1.displayName = "ToolkitBody1";
 // src/foundation/Body2/Body2.tsx
 import React22 from "react";
 import { Typography as Typography10 } from "@mui/material";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var Body2 = React22.forwardRef(
   function Body22({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx38(Typography10, { ref, variant: "body2", color, ...props, children });
+    return /* @__PURE__ */ jsx37(Typography10, { ref, variant: "body2", color, ...props, children });
   }
 );
 Body2.displayName = "ToolkitBody2";
@@ -4011,10 +3965,10 @@ Body2.displayName = "ToolkitBody2";
 // src/foundation/Caption/Caption.tsx
 import React23 from "react";
 import { Typography as Typography11 } from "@mui/material";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var Caption = React23.forwardRef(
   function Caption2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx39(Typography11, { ref, variant: "caption", color, ...props, children });
+    return /* @__PURE__ */ jsx38(Typography11, { ref, variant: "caption", color, ...props, children });
   }
 );
 Caption.displayName = "ToolkitCaption";
@@ -4022,10 +3976,10 @@ Caption.displayName = "ToolkitCaption";
 // src/foundation/Overline/Overline.tsx
 import React24 from "react";
 import { Typography as Typography12 } from "@mui/material";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Overline = React24.forwardRef(
   function Overline2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx40(Typography12, { ref, variant: "overline", color, ...props, children });
+    return /* @__PURE__ */ jsx39(Typography12, { ref, variant: "overline", color, ...props, children });
   }
 );
 Overline.displayName = "ToolkitOverline";
@@ -4033,13 +3987,182 @@ Overline.displayName = "ToolkitOverline";
 // src/foundation/TypographyButton/TypographyButton.tsx
 import React25 from "react";
 import { Typography as Typography13 } from "@mui/material";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var TypographyButton = React25.forwardRef(
   function TypographyButton2({ color = "text.primary", children, ...props }, ref) {
-    return /* @__PURE__ */ jsx41(Typography13, { ref, variant: "button", color, ...props, children });
+    return /* @__PURE__ */ jsx40(Typography13, { ref, variant: "button", color, ...props, children });
   }
 );
 TypographyButton.displayName = "ToolkitTypographyButton";
+
+// src/components/Toast/Toast.styles.tsx
+import { styled as styled23 } from "@mui/material/styles";
+import IconButton2 from "@mui/material/IconButton";
+var StyledToastRoot = styled23("div")(
+  ({ theme, ownerState }) => {
+    const bgMap = {
+      success: theme.tokens.colors.success,
+      warning: theme.tokens.colors.warning,
+      error: theme.tokens.colors.error
+    };
+    const colorMap = {
+      success: theme.palette.common.white,
+      warning: theme.tokens.colors.textPrimary,
+      error: theme.palette.common.white
+    };
+    return {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      zIndex: theme.tokens.zIndex.toast,
+      backgroundColor: bgMap[ownerState.variant],
+      color: colorMap[ownerState.variant],
+      WebkitFontSmoothing: "antialiased",
+      boxSizing: "border-box"
+    };
+  }
+);
+var StyledToastInner = styled23("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  padding: `${theme.spacing(2.25)} ${theme.spacing(7)} ${theme.spacing(2.25)} ${theme.spacing(1.25)}`,
+  [theme.breakpoints.up("md")]: {
+    maxWidth: 800,
+    padding: `${theme.spacing(2.25)} ${theme.spacing(13.75)}`,
+    margin: "0 auto",
+    justifyContent: "center"
+  }
+}));
+var StyledToastIconWrapper = styled23("span")(({ theme }) => ({
+  display: "flex",
+  alignItems: "flex-start",
+  marginRight: theme.spacing(1.25),
+  flexShrink: 0,
+  "& svg": {
+    height: 28,
+    width: 28
+  }
+}));
+var StyledToastCloseButton = styled23(IconButton2)(({ theme, ownerState }) => ({
+  position: "absolute",
+  top: theme.spacing(1.25),
+  right: theme.spacing(1.25),
+  color: ownerState.variant === "warning" ? theme.tokens.colors.textPrimary : theme.palette.common.white,
+  fontFamily: theme.tokens.typography.fontFamilyBase,
+  fontSize: theme.tokens.typography.fontSizeLg,
+  borderRadius: theme.tokens.borderRadius.md,
+  "&:hover": {
+    backgroundColor: "rgba(0,0,0,0.08)"
+  }
+}));
+
+// src/components/Toast/Toast.tsx
+import { jsx as jsx41, jsxs as jsxs15 } from "react/jsx-runtime";
+var defaultIconMap = {
+  success: /* @__PURE__ */ jsx41(CheckIcon, {}),
+  warning: /* @__PURE__ */ jsx41(InfoIcon2, {}),
+  error: /* @__PURE__ */ jsx41(WarningIcon2, {})
+};
+var roleMap = {
+  success: void 0,
+  warning: "alert",
+  error: "alert"
+};
+var Toast = React26.forwardRef(
+  ({
+    onClose,
+    variant = "success",
+    isVisible = false,
+    icon,
+    message,
+    className,
+    ...restProps
+  }, ref) => {
+    if (!isVisible) return null;
+    const ownerState = { variant };
+    return /* @__PURE__ */ jsxs15(
+      StyledToastRoot,
+      {
+        ownerState,
+        ref,
+        className,
+        role: roleMap[variant],
+        ...getCleanProps(restProps),
+        children: [
+          /* @__PURE__ */ jsxs15(StyledToastInner, { children: [
+            /* @__PURE__ */ jsx41(StyledToastIconWrapper, { "aria-hidden": "true", children: icon ?? defaultIconMap[variant] }),
+            /* @__PURE__ */ jsx41(Body1, { component: "span", sx: { color: "inherit" }, children: message })
+          ] }),
+          /* @__PURE__ */ jsx41(
+            StyledToastCloseButton,
+            {
+              ownerState,
+              onClick: onClose,
+              "aria-label": "Close notification",
+              size: "small",
+              children: /* @__PURE__ */ jsx41(CloseIcon, { fontSize: "small" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "ToolkitToast";
+
+// src/components/Table/Table.tsx
+import {
+  Table as MuiTable,
+  TableHead as MuiTableHead,
+  TableBody as MuiTableBody,
+  TableRow as MuiTableRow,
+  TableCell as MuiTableCell,
+  TableContainer as MuiTableContainer,
+  TablePagination as MuiTablePagination,
+  TableSortLabel as MuiTableSortLabel
+} from "@mui/material";
+import { styled as styled24 } from "@mui/material/styles";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var StyledTableContainer = styled24(MuiTableContainer)(() => ({
+  overflowX: "auto"
+}));
+var StyledHeadCell = styled24(MuiTableCell)(({ theme }) => ({
+  fontWeight: theme.tokens.components.table.headerFontWeight,
+  backgroundColor: theme.tokens.components.table.headerBackground,
+  borderBottomWidth: theme.tokens.components.table.borderWidth,
+  borderBottomColor: theme.tokens.components.table.borderColor
+}));
+function Table(props) {
+  return /* @__PURE__ */ jsx42(MuiTable, { ...props });
+}
+function TableHead(props) {
+  return /* @__PURE__ */ jsx42(MuiTableHead, { ...props });
+}
+function TableBody(props) {
+  return /* @__PURE__ */ jsx42(MuiTableBody, { ...props });
+}
+function TableRow(props) {
+  return /* @__PURE__ */ jsx42(MuiTableRow, { ...props });
+}
+function TableCell(props) {
+  return /* @__PURE__ */ jsx42(MuiTableCell, { ...props });
+}
+function TableHeadCell(props) {
+  return /* @__PURE__ */ jsx42(StyledHeadCell, { component: "th", scope: "col", ...props });
+}
+function TableContainer(props) {
+  return /* @__PURE__ */ jsx42(StyledTableContainer, { ...props });
+}
+var TablePagination = MuiTablePagination;
+var TableSortLabel = MuiTableSortLabel;
+Table.displayName = "ToolkitTable";
+TableHead.displayName = "ToolkitTableHead";
+TableBody.displayName = "ToolkitTableBody";
+TableRow.displayName = "ToolkitTableRow";
+TableCell.displayName = "ToolkitTableCell";
+TableHeadCell.displayName = "ToolkitTableHeadCell";
+TableContainer.displayName = "ToolkitTableContainer";
 export {
   ABNInput,
   Accordion,
@@ -4114,6 +4237,7 @@ export {
   TextField,
   TimeField,
   TimePicker,
+  Toast,
   Toggle,
   ToggleButton,
   ToggleButtonGroup,