@etsoo/toolpad 1.0.0

package/.github/workflows/main.yml

@@ -0,0 +1,49 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+# https://docs.github.com/en/actions/language-and-framework-guides/publishing-nodejs-packages
+
+# Description
+name: Node.js Package
+
+# Event to trigger the action
+on:
+  [push]
+  # release:
+  #  types: [created]
+
+jobs:
+  # Publish to NPM
+  publish-npm:
+    # Condition: previous build is successful
+    # needs: Any previous jobs
+
+    # Operation system
+    runs-on: ubuntu-latest
+
+    steps:
+      # https://github.com/actions/checkout, This action checks-out your repository under $GITHUB_WORKSPACE
+      # so your workflow can access it.
+      - uses: actions/checkout@v4
+
+      # Set up your GitHub Actions workflow with a specific version of node.js
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+
+      # Named after Continuous Integration, installs dependencies directly from package-lock.json
+      # ci vs install
+      - run: npm install
+
+      # Make sure pass the test without any exception
+      - run: npm test
+
+      # Build the package
+      - run: npm run build
+
+      # Publish to npm
+      # For scoped package, make it public for free service
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.ETSOONpmToken }}

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2004-2024 ETSOO ® (亿速思维 ®), https://etsoo.com, https://etsoo.nz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+## Toolpad
+
+It's a project originally cloned from Toolpad Core (https://github.com/mui/toolpad/tree/master/packages/toolpad-core).Toolpad Core is a set of full-stack components for building dashboards, internal tools, and B2B web applications with React. Additional simplicity and new features have been implemented for ETSOO SmartERP SaaS platform development.
+
+## Installation
+
+Install the package in your project directory with:
+
+```bash
+npm install @etsoo/toolpad
+```

package/build/src/Account/Account.d.ts

@@ -0,0 +1,71 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Popover from "@mui/material/Popover";
+import Stack from "@mui/material/Stack";
+import { SignInButton } from "./SignInButton";
+import { AccountPreviewProps } from "./AccountPreview";
+import { useLocaleText } from "../shared/locales/LocaleContext";
+export interface AccountSlots {
+    /**
+     * The component used for the account preview
+     * @default AccountPreview
+     */
+    preview?: React.ElementType;
+    /**
+     * The component used for the account popover menu
+     * @default Popover
+     */
+    popover?: React.ElementType;
+    /**
+     * The component used for the content of account popover
+     * @default Stack
+     */
+    popoverContent?: React.ElementType;
+    /**
+     * The component used for the sign in button.
+     * @default Button
+     */
+    signInButton?: React.ElementType;
+    /**
+     * The component used for the sign out button.
+     * @default Button
+     */
+    signOutButton?: React.ElementType;
+}
+export interface AccountProps {
+    /**
+     * The components used for each slot inside.
+     */
+    slots?: AccountSlots;
+    /**
+     * The props used for each slot inside.
+     */
+    slotProps?: {
+        preview?: AccountPreviewProps;
+        popover?: React.ComponentProps<typeof Popover>;
+        popoverContent?: React.ComponentProps<typeof Stack>;
+        signInButton?: React.ComponentProps<typeof SignInButton>;
+        signOutButton?: React.ComponentProps<typeof Button>;
+    };
+    /**
+     * The labels for the account component.
+     */
+    localeText?: Partial<ReturnType<typeof useLocaleText>>;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
+ * - [Sign-in Page](https://mui.com/toolpad/core/react-sign-in-page/)
+ *
+ * API:
+ *
+ * - [Account API](https://mui.com/toolpad/core/api/account)
+ */
+declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace Account {
+    var propTypes: any;
+}
+export { Account };

package/build/src/Account/Account.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import PropTypes from "prop-types";
+import Popover from "@mui/material/Popover";
+import Divider from "@mui/material/Divider";
+import Stack from "@mui/material/Stack";
+import { SignInButton } from "./SignInButton";
+import { SignOutButton } from "./SignOutButton";
+import { AccountPreview } from "./AccountPreview";
+import { AccountPopoverHeader } from "./AccountPopoverHeader";
+import { AccountPopoverFooter } from "./AccountPopoverFooter";
+import { SessionContext, AuthenticationContext } from "../AppProvider/AppProvider";
+import { LocaleProvider } from "../shared/locales/LocaleContext";
+/**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
+ * - [Sign-in Page](https://mui.com/toolpad/core/react-sign-in-page/)
+ *
+ * API:
+ *
+ * - [Account API](https://mui.com/toolpad/core/api/account)
+ */
+function Account(props) {
+    const { localeText } = props;
+    const { slots, slotProps } = props;
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const session = React.useContext(SessionContext);
+    const authentication = React.useContext(AuthenticationContext);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    if (!authentication) {
+        return null;
+    }
+    if (!session?.user) {
+        return (_jsx(LocaleProvider, { localeText: localeText, children: slots?.signInButton ? (_jsx(slots.signInButton, { onClick: authentication.signIn })) : (_jsx(SignInButton, { ...slotProps?.signInButton })) }));
+    }
+    return (_jsxs(LocaleProvider, { localeText: localeText, children: [slots?.preview ? (_jsx(slots.preview, { handleClick: handleClick, open: open })) : (_jsx(AccountPreview, { variant: "condensed", handleClick: handleClick, open: open, ...slotProps?.preview })), slots?.popover ? (_jsx(slots.popover, { ...slotProps?.popover })) : (_jsx(Popover, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, ...slotProps?.popover, slotProps: {
+                    paper: {
+                        elevation: 0,
+                        sx: {
+                            overflow: "visible",
+                            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                            mt: 1,
+                            "&::before": {
+                                content: '""',
+                                display: "block",
+                                position: "absolute",
+                                top: 0,
+                                right: 14,
+                                width: 10,
+                                height: 10,
+                                bgcolor: "background.paper",
+                                transform: "translateY(-50%) rotate(45deg)",
+                                zIndex: 0
+                            }
+                        }
+                    },
+                    ...slotProps?.popover?.slotProps
+                }, children: slots?.popoverContent ? (_jsx(slots.popoverContent, { ...slotProps?.popoverContent })) : (_jsxs(Stack, { direction: "column", ...slotProps?.popoverContent, children: [_jsx(AccountPopoverHeader, { children: _jsx(AccountPreview, { variant: "expanded" }) }), _jsx(Divider, {}), _jsx(AccountPopoverFooter, { children: _jsx(SignOutButton, { ...slotProps?.signOutButton }) })] })) }))] }));
+}
+Account.propTypes /* remove-proptypes */ = {
+    // ┌────────────────────────────── Warning ──────────────────────────────┐
+    // │ These PropTypes are generated from the TypeScript type definitions. │
+    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+    // └─────────────────────────────────────────────────────────────────────┘
+    /**
+     * The labels for the account component.
+     */
+    localeText: PropTypes.shape({
+        iconButtonAriaLabel: PropTypes.string,
+        signInLabel: PropTypes.string,
+        signOutLabel: PropTypes.string
+    }),
+    /**
+     * The props used for each slot inside.
+     */
+    slotProps: PropTypes.shape({
+        popover: PropTypes.object,
+        popoverContent: PropTypes.object,
+        preview: PropTypes.shape({
+            handleClick: PropTypes.func,
+            open: PropTypes.bool,
+            slotProps: PropTypes.shape({
+                avatar: PropTypes.object,
+                avatarIconButton: PropTypes.object,
+                moreIconButton: PropTypes.object
+            }),
+            slots: PropTypes.shape({
+                avatar: PropTypes.elementType,
+                avatarIconButton: PropTypes.elementType,
+                moreIconButton: PropTypes.elementType
+            }),
+            variant: PropTypes.oneOf(["condensed", "expanded"])
+        }),
+        signInButton: PropTypes.object,
+        signOutButton: PropTypes.object
+    }),
+    /**
+     * The components used for each slot inside.
+     */
+    slots: PropTypes.shape({
+        popover: PropTypes.elementType,
+        popoverContent: PropTypes.elementType,
+        preview: PropTypes.elementType,
+        signInButton: PropTypes.elementType,
+        signOutButton: PropTypes.elementType
+    })
+};
+export { Account };

package/build/src/Account/Account.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/src/Account/Account.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, test, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Account } from "./Account";
+import describeConformance from "../utils/describeConformance";
+import { AppProvider } from "../AppProvider/AppProviderComponent";
+describe("AppProvider", () => {
+    describeConformance(_jsx(Account, {}), () => ({
+        skip: ["themeDefaultProps"]
+    }));
+    test("renders nothing in button when no authentication", async () => {
+        render(_jsx(Account, {}));
+        expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+    test("renders log in button when no session", async () => {
+        const auth = { signIn: vi.fn(), signOut: vi.fn() };
+        render(_jsx(AppProvider, { authentication: auth, children: _jsx(Account, {}) }));
+        const loginButton = screen.getByRole("button", { name: "Sign In" });
+        await userEvent.click(loginButton);
+        expect(auth.signIn).toHaveBeenCalled();
+    });
+    test("renders content correctly when there is a session", async () => {
+        const auth = { signIn: vi.fn(), signOut: vi.fn() };
+        const session = { user: { name: "John Doe", email: "john@example.com" } };
+        render(_jsx(AppProvider, { authentication: auth, session: session, children: _jsx(Account, {}) }));
+        const userButton = screen.getByRole("button", { name: "Current User" });
+        await userEvent.click(userButton);
+        expect(screen.getByText("John Doe")).toBeInTheDocument();
+        expect(screen.getByText("john@example.com")).toBeInTheDocument();
+        const signOutButton = screen.getByRole("button", { name: "Sign Out" });
+        await userEvent.click(signOutButton);
+        expect(auth.signOut).toHaveBeenCalled();
+    });
+});

package/build/src/Account/AccountPopoverFooter.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { BoxProps } from "@mui/material/Box";
+export interface AccountPopoverFooterProps extends BoxProps {
+    children?: React.ReactNode;
+}
+export declare function AccountPopoverFooter(props: AccountPopoverFooterProps): import("react/jsx-runtime").JSX.Element;

package/build/src/Account/AccountPopoverFooter.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+export /**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [AccountPopoverFooter API](https://mui.com/toolpad/core/api/account-popover-footer)
+ */ function AccountPopoverFooter(props) {
+    const { children, ...rest } = props;
+    return (_jsx(Box, { ...rest, sx: {
+            display: "flex",
+            flexDirection: "row",
+            p: 1,
+            justifyContent: "flex-end",
+            ...rest.sx
+        }, children: children }));
+}

package/build/src/Account/AccountPopoverHeader.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { StackProps } from "@mui/material/Stack";
+export interface AccountPopoverHeaderProps extends StackProps {
+    children?: React.ReactNode;
+}
+export declare function AccountPopoverHeader(props: AccountPopoverHeaderProps): import("react/jsx-runtime").JSX.Element;

package/build/src/Account/AccountPopoverHeader.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Stack from "@mui/material/Stack";
+export /**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [AccountPopoverHeader API](https://mui.com/toolpad/core/api/account-popover-header)
+ */ function AccountPopoverHeader(props) {
+    const { children, ...rest } = props;
+    return _jsx(Stack, { ...rest, children: children });
+}

package/build/src/Account/AccountPreview.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { AvatarProps } from "@mui/material/Avatar";
+import { IconButtonProps } from "@mui/material/IconButton";
+export type AccountPreviewVariant = "condensed" | "expanded";
+export interface AccountPreviewSlots {
+    /**
+     * The component used for the Avatar
+     * @default Avatar
+     */
+    avatar?: React.ElementType;
+    /**
+     * The component used for the overflow icon button in the expanded variant
+     * @default IconButton
+     */
+    moreIconButton?: React.ElementType;
+    /**
+     * The component used for the avatar icon button in the condensed variant
+     * @default IconButton
+     */
+    avatarIconButton?: React.ElementType;
+}
+export interface AccountPreviewProps {
+    /**
+     * The components used for each slot inside.
+     */
+    slots?: AccountPreviewSlots;
+    /**
+     * The props used for each slot inside.
+     */
+    slotProps?: {
+        avatar?: AvatarProps;
+        moreIconButton?: IconButtonProps;
+        avatarIconButton?: IconButtonProps;
+    };
+    /**
+     * The type of account details to display.
+     * @property {'condensed'} condensed - Shows only the user's avatar.
+     * @property {'expanded'} expanded - Displays the user's avatar, name, and email if available.
+     * @default 'condensed'
+     */
+    variant?: AccountPreviewVariant;
+    /**
+     * The handler used when the preview is expanded
+     */
+    handleClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * The state of the Account popover
+     * @default false
+     */
+    open?: boolean;
+}
+/**
+ * The AccountPreview component displays user account information.
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [AccountPreview API](https://mui.com/toolpad/core/api/account-preview)
+ */
+declare function AccountPreview(props: AccountPreviewProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace AccountPreview {
+    var propTypes: any;
+}
+export { AccountPreview };

package/build/src/Account/AccountPreview.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import PropTypes from "prop-types";
+import Avatar from "@mui/material/Avatar";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import Stack from "@mui/material/Stack";
+import IconButton from "@mui/material/IconButton";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { SessionContext } from "../AppProvider";
+import { useLocaleText } from "../shared/locales/LocaleContext";
+/**
+ * The AccountPreview component displays user account information.
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [AccountPreview API](https://mui.com/toolpad/core/api/account-preview)
+ */
+function AccountPreview(props) {
+    const { slots, variant = "condensed", slotProps, open, handleClick } = props;
+    const session = React.useContext(SessionContext);
+    const localeText = useLocaleText();
+    if (!session || !session.user) {
+        return null;
+    }
+    const avatarContent = slots?.avatar ? (_jsx(slots.avatar, {})) : (_jsx(Avatar, { src: session.user?.image || "", alt: session.user?.name || session.user?.email || "", sx: {
+            height: variant === "expanded" ? 48 : 32,
+            width: variant === "expanded" ? 48 : 32
+        }, ...slotProps?.avatar }));
+    if (variant === "expanded") {
+        return (_jsxs(Stack, { direction: "row", justifyContent: "flex-start", spacing: 2, padding: 2, children: [avatarContent, _jsxs(Stack, { direction: "column", justifyContent: "space-evenly", children: [_jsx(Typography, { variant: "body2", fontWeight: "bolder", noWrap: true, children: session.user?.name }), _jsx(Typography, { variant: "caption", noWrap: true, children: session.user?.email })] }), handleClick &&
+                    (slots?.moreIconButton ? (_jsx(slots.moreIconButton, {})) : (_jsx(IconButton, { size: "small", onClick: handleClick, ...slotProps?.moreIconButton, sx: { alignSelf: "flex-start", ...slotProps?.moreIconButton?.sx }, children: _jsx(MoreVertIcon, { fontSize: "small" }) })))] }));
+    }
+    return (_jsx(Tooltip, { title: session.user.name ?? "Account", children: slots?.avatarIconButton ? (_jsx(slots.avatarIconButton, {})) : (_jsx(IconButton, { onClick: handleClick, "aria-label": localeText.iconButtonAriaLabel || "Current User", size: "small", "aria-controls": open ? "account-menu" : undefined, "aria-haspopup": "true", "aria-expanded": open ? "true" : undefined, ...slotProps?.avatarIconButton, children: avatarContent })) }));
+}
+AccountPreview.propTypes /* remove-proptypes */ = {
+    // ┌────────────────────────────── Warning ──────────────────────────────┐
+    // │ These PropTypes are generated from the TypeScript type definitions. │
+    // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+    // └─────────────────────────────────────────────────────────────────────┘
+    /**
+     * The handler used when the preview is expanded
+     */
+    handleClick: PropTypes.func,
+    /**
+     * The state of the Account popover
+     * @default false
+     */
+    open: PropTypes.bool,
+    /**
+     * The props used for each slot inside.
+     */
+    slotProps: PropTypes.shape({
+        avatar: PropTypes.object,
+        avatarIconButton: PropTypes.object,
+        moreIconButton: PropTypes.object
+    }),
+    /**
+     * The components used for each slot inside.
+     */
+    slots: PropTypes.shape({
+        avatar: PropTypes.elementType
+    }),
+    /**
+     * The type of account details to display.
+     * @property {'condensed'} condensed - Shows only the user's avatar.
+     * @property {'expanded'} expanded - Displays the user's avatar, name, and email if available.
+     * @default 'condensed'
+     */
+    variant: PropTypes.oneOf(["condensed", "expanded"])
+};
+export { AccountPreview };

package/build/src/Account/AccountPreview.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/src/Account/AccountPreview.test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, test, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AccountPreview } from "./AccountPreview";
+import { AppProvider } from "../AppProvider/AppProviderComponent";
+describe("AccountPreview", () => {
+    const auth = { signIn: vi.fn(), signOut: vi.fn() };
+    const session = {
+        user: {
+            name: "John Doe",
+            email: "john@example.com",
+            image: "https://example.com/avatar.jpg"
+        }
+    };
+    test("renders nothing when no session is provided", () => {
+        render(_jsx(AppProvider, { authentication: auth, children: _jsx(AccountPreview, {}) }));
+        expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+    test("displays condensed variant by default", () => {
+        render(_jsx(AppProvider, { authentication: auth, session: session, children: _jsx(AccountPreview, {}) }));
+        const avatar = screen.getByRole("img", { name: "John Doe" });
+        expect(avatar).toBeInTheDocument();
+        expect(screen.queryByText("John Doe")).not.toBeInTheDocument();
+        expect(avatar).toHaveAttribute("src", "https://example.com/avatar.jpg");
+    });
+    test("displays user name, email, and avatar in expanded variant", () => {
+        render(_jsx(AppProvider, { authentication: auth, session: session, children: _jsx(AccountPreview, { variant: "expanded" }) }));
+        expect(screen.getByText("John Doe")).toBeInTheDocument();
+        expect(screen.getByText("john@example.com")).toBeInTheDocument();
+        expect(screen.getByRole("img", { name: "John Doe" })).toBeInTheDocument();
+    });
+    test("calls handleClick when more icon button is clicked in expanded variant", async () => {
+        const handleClick = vi.fn();
+        render(_jsx(AppProvider, { authentication: auth, session: session, children: _jsx(AccountPreview, { variant: "expanded", handleClick: handleClick }) }));
+        const moreButton = screen.getByRole("button");
+        await userEvent.click(moreButton);
+        expect(handleClick).toHaveBeenCalled();
+    });
+    test("calls handleClick when avatar is clicked in condensed variant", async () => {
+        const handleClick = vi.fn();
+        render(_jsx(AppProvider, { authentication: auth, session: session, children: _jsx(AccountPreview, { handleClick: handleClick }) }));
+        const avatarButton = screen.getByRole("button", { name: "Current User" });
+        await userEvent.click(avatarButton);
+        expect(handleClick).toHaveBeenCalled();
+    });
+});

package/build/src/Account/SignInButton.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from "@mui/material/Button";
+export declare function SignInButton(props: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/build/src/Account/SignInButton.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import Button from "@mui/material/Button";
+import { AuthenticationContext } from "../AppProvider/AppProvider";
+import { useLocaleText } from "../shared/locales/LocaleContext";
+export /**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [SignInButton API](https://mui.com/toolpad/core/api/sign-in-button)
+ */ function SignInButton(props) {
+    const authentication = React.useContext(AuthenticationContext);
+    const localeText = useLocaleText();
+    return (_jsx(Button, { disableElevation: true, variant: "contained", size: "small", onClick: authentication?.signIn, sx: {
+            textTransform: "capitalize",
+            filter: "opacity(0.9)",
+            transition: "filter 0.2s ease-in",
+            "&:hover": {
+                filter: "opacity(1)"
+            }
+        }, ...props, children: localeText?.signInLabel || "Sign In" }));
+}

package/build/src/Account/SignOutButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "@mui/material/Button";
+export type SignOutButtonProps = ButtonProps;
+export declare function SignOutButton(props: SignOutButtonProps): import("react/jsx-runtime").JSX.Element;

package/build/src/Account/SignOutButton.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import Button from "@mui/material/Button";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { AuthenticationContext } from "../AppProvider/AppProvider";
+import { useLocaleText } from "../shared/locales/LocaleContext";
+export /**
+ *
+ * Demos:
+ *
+ * - [Account](https://mui.com/toolpad/core/react-account/)
+ *
+ * API:
+ *
+ * - [SignOutButton API](https://mui.com/toolpad/core/api/sign-out-button)
+ */ function SignOutButton(props) {
+    const authentication = React.useContext(AuthenticationContext);
+    const localeText = useLocaleText();
+    return (_jsx(Button, { disabled: !authentication, variant: "outlined", size: "small", disableElevation: true, onClick: authentication?.signOut, sx: {
+            textTransform: "capitalize",
+            fontWeight: "normal",
+            filter: "opacity(0.9)",
+            transition: "filter 0.2s ease-in",
+            "&:hover": {
+                filter: "opacity(1)"
+            }
+        }, startIcon: _jsx(LogoutIcon, {}), ...props, children: localeText.signOutLabel }));
+}

package/build/src/Account/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./Account";
+export * from "./AccountPreview";
+export * from "./AccountPopoverHeader";
+export * from "./AccountPopoverFooter";
+export * from "./SignOutButton";
+export * from "./SignInButton";

package/build/src/Account/index.js

@@ -0,0 +1,6 @@
+export * from "./Account";
+export * from "./AccountPreview";
+export * from "./AccountPopoverHeader";
+export * from "./AccountPopoverFooter";
+export * from "./SignOutButton";
+export * from "./SignInButton";