@evolve.ui/core-components 1.0.0

package/BannerNotification-DM78PllX.d.cts

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+
+//#region src/BannerNotification/BannerNotification.d.ts
+type Props = {
+  /**
+   * Configuration for the action button.
+   */
+  actionButtonConfig?: {
+    /**
+     * The label for the close button.
+     */
+    label: string;
+    /**
+     * Callback function called when the close button is clicked.
+     */
+    onClick: () => void;
+  };
+  /**
+   * Additional CSS class name for the component.
+   */
+  className?: string;
+  /**
+   * The emphasis style of the component.
+   * - "bold": Bold emphasis.
+   * - "subtle": Subtle emphasis.
+   */
+  emphasis?: 'bold' | 'subtle';
+  /**
+   * Forces the component to render as a skeleton.
+   */
+  forceSkeleton?: boolean;
+  /**
+   * The message content of the component.
+   */
+  message?: string | ReactNode;
+  /**
+   * Callback function called when the component is closed.
+   */
+  onClose?: () => void;
+  /**
+   * The status of the component.
+   * - "info": Informational status.
+   * - "warning": Warning status.
+   * - "critical": Critical status.
+   */
+  status: 'info' | 'warning' | 'critical';
+};
+declare const BannerNotification: ({
+  actionButtonConfig,
+  className,
+  emphasis,
+  forceSkeleton,
+  message,
+  onClose,
+  status
+}: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { BannerNotification as t };
+//# sourceMappingURL=BannerNotification-DM78PllX.d.cts.map

package/BannerNotification-DM78PllX.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerNotification-DM78PllX.d.cts","names":[],"sources":["../src/BannerNotification/BannerNotification.tsx"],"mappings":";;;KAaK,KAAA;;AAZsC;;EAgBvC,kBAAA;IAgC4B;;;IA5BxB,KAAA;IAWJ;;;IANI,OAAA;EAAA;EA4BJ;;;EAtBA,SAAA;EAiCS;;;;;EA1BT,QAAA;EA0B+B;;;EArB/B,aAAA;EA6BD;;;EAxBC,OAAA,YAAmB,SAAS;EAgBG;;;EAX/B,OAAA;EAW+B;;;;;;EAH/B,MAAA;AAAA;AAAA,cAGS,kBAAA;EAAsB,kBAAA;EAAA,SAAA;EAAA,QAAA;EAAA,aAAA;EAAA,OAAA;EAAA,OAAA;EAAA;AAAA,GAQhC,KAAA,iCAAK,GAAA,CAAA,OAAA"}

package/BannerNotification-DM78PllX.d.mts

@@ -0,0 +1,59 @@
+import { ReactNode } from "react";
+
+//#region src/BannerNotification/BannerNotification.d.ts
+type Props = {
+  /**
+   * Configuration for the action button.
+   */
+  actionButtonConfig?: {
+    /**
+     * The label for the close button.
+     */
+    label: string;
+    /**
+     * Callback function called when the close button is clicked.
+     */
+    onClick: () => void;
+  };
+  /**
+   * Additional CSS class name for the component.
+   */
+  className?: string;
+  /**
+   * The emphasis style of the component.
+   * - "bold": Bold emphasis.
+   * - "subtle": Subtle emphasis.
+   */
+  emphasis?: 'bold' | 'subtle';
+  /**
+   * Forces the component to render as a skeleton.
+   */
+  forceSkeleton?: boolean;
+  /**
+   * The message content of the component.
+   */
+  message?: string | ReactNode;
+  /**
+   * Callback function called when the component is closed.
+   */
+  onClose?: () => void;
+  /**
+   * The status of the component.
+   * - "info": Informational status.
+   * - "warning": Warning status.
+   * - "critical": Critical status.
+   */
+  status: 'info' | 'warning' | 'critical';
+};
+declare const BannerNotification: ({
+  actionButtonConfig,
+  className,
+  emphasis,
+  forceSkeleton,
+  message,
+  onClose,
+  status
+}: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { BannerNotification as t };
+//# sourceMappingURL=BannerNotification-DM78PllX.d.mts.map

package/BannerNotification-DM78PllX.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerNotification-DM78PllX.d.mts","names":[],"sources":["../src/BannerNotification/BannerNotification.tsx"],"mappings":";;;KAaK,KAAA;;AAZsC;;EAgBvC,kBAAA;IAgC4B;;;IA5BxB,KAAA;IAWJ;;;IANI,OAAA;EAAA;EA4BJ;;;EAtBA,SAAA;EAiCS;;;;;EA1BT,QAAA;EA0B+B;;;EArB/B,aAAA;EA6BD;;;EAxBC,OAAA,YAAmB,SAAS;EAgBG;;;EAX/B,OAAA;EAW+B;;;;;;EAH/B,MAAA;AAAA;AAAA,cAGS,kBAAA;EAAsB,kBAAA;EAAA,SAAA;EAAA,QAAA;EAAA,aAAA;EAAA,OAAA;EAAA,OAAA;EAAA;AAAA,GAQhC,KAAA,iCAAK,GAAA,CAAA,OAAA"}

package/BannerNotification-DzprO7bZ.mjs

@@ -0,0 +1,151 @@
+import { Close, Info, Warning } from "./Icons.mjs";
+import { BodyPrimary, BodySecondary } from "./Typography/Text.mjs";
+import { l as useWindowIsMobile } from "./windowSizeProvider-sYwAqaOy.mjs";
+import { Button } from "./Button.mjs";
+import { Tooltip } from "./Tooltip.mjs";
+import { IconButton } from "./IconButton.mjs";
+import { Skeleton } from "./skeleton.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/BannerNotification/components/BannerNotificationSkeleton.tsx
+const BannerNotificationSkeleton = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center border border-solid border-border-secondary px-sm py-md",
+		children: /* @__PURE__ */ jsxs(Skeleton, {
+			backgroundColor: "#f3f3f3",
+			className: "col-start-1 col-end-4",
+			foregroundColor: "#ecebeb",
+			height: 40,
+			speed: 2,
+			viewBox: "0 0 600 40",
+			width: 600,
+			children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: "20",
+					cy: "20",
+					r: "20"
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					height: "24",
+					rx: "3",
+					ry: "3",
+					width: "300",
+					x: "60",
+					y: "10"
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					height: "24",
+					rx: "3",
+					ry: "3",
+					width: "200",
+					x: "370",
+					y: "10"
+				})
+			]
+		})
+	});
+};
+//#endregion
+//#region src/BannerNotification/components/CalloutIcon/BannerIcon.tsx
+const BannerIcon = ({ emphasis, status }) => {
+	const isMobile = useWindowIsMobile();
+	let icon = /* @__PURE__ */ jsx(Fragment, {});
+	switch (status) {
+		case "critical":
+			icon = /* @__PURE__ */ jsx(Warning, {
+				color: emphasis === "bold" ? "inverse" : "critical",
+				size: isMobile ? "sm" : "md",
+				style: "fill"
+			});
+			break;
+		case "warning":
+			icon = /* @__PURE__ */ jsx(Warning, {
+				color: emphasis === "bold" ? "primary" : "warning",
+				size: isMobile ? "sm" : "md",
+				style: "fill"
+			});
+			break;
+		default:
+			icon = /* @__PURE__ */ jsx(Info, {
+				color: emphasis === "bold" ? "inverse" : "info",
+				size: isMobile ? "sm" : "md",
+				style: "fill"
+			});
+			break;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "pr-xs xsMax:p-xs xsMax:pt-0",
+		children: icon
+	});
+};
+//#endregion
+//#region src/BannerNotification/utils/getRandomTooltipId.ts
+const getRandomTooltipId = () => {
+	return Math.floor(Math.random() * 1e3);
+};
+//#endregion
+//#region src/BannerNotification/BannerNotification.tsx
+const BannerNotification = ({ actionButtonConfig, className, emphasis = "subtle", forceSkeleton, message, onClose, status = "info" }) => {
+	const randomTooltipId = useMemo(() => getRandomTooltipId(), []);
+	const isMobile = useWindowIsMobile();
+	const classes = useMemo(() => cn(className, "grid w-full grid-cols-[1fr_min-content] items-center p-[10px_16px_16px_8px]", "xsMax:items-start", {
+		"bg-background-critical-light": emphasis === "subtle" && status === "critical",
+		"bg-background-info-light": emphasis === "subtle" && status === "info",
+		"bg-background-warning-light": emphasis === "subtle" && status === "warning"
+	}, {
+		"bg-background-critical-dark": emphasis === "bold" && status === "critical",
+		"bg-background-info-dark": emphasis === "bold" && status === "info",
+		"bg-background-warning-dark": emphasis === "bold" && status === "warning"
+	}), [
+		className,
+		emphasis,
+		status
+	]);
+	if (forceSkeleton) return /* @__PURE__ */ jsx(BannerNotificationSkeleton, {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "col-start-1 col-end-2 mt-[6px] flex items-center justify-center xsMax:items-start",
+			children: [/* @__PURE__ */ jsx(BannerIcon, {
+				emphasis,
+				status
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "mr-sm flex flex-row items-center xsMax:flex-col xsMax:items-start",
+				children: [isMobile ? /* @__PURE__ */ jsx(BodySecondary, {
+					color: emphasis === "bold" && status !== "warning" ? "inverse" : "primary",
+					children: message
+				}) : /* @__PURE__ */ jsx(BodyPrimary, {
+					color: emphasis === "bold" && status !== "warning" ? "inverse" : "primary",
+					children: message
+				}), actionButtonConfig && /* @__PURE__ */ jsx(Button, {
+					className: "ml-sm xsMax:ml-0 xsMax:mt-sm",
+					onClick: actionButtonConfig.onClick,
+					size: isMobile ? "sm" : "md",
+					style: "primary",
+					variant: "outlined",
+					children: actionButtonConfig.label
+				})]
+			})]
+		}), onClose && status !== "critical" && /* @__PURE__ */ jsxs("div", {
+			className: "relative flex h-full w-[34px] items-center justify-center xsMax:items-start",
+			children: [/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Close Banner",
+				className: "absolute right-0 col-start-3 col-end-4",
+				"data-tooltip-id": `close-banner-${randomTooltipId}`,
+				icon: Close,
+				onClick: onClose,
+				size: isMobile ? "sm" : "md",
+				style: emphasis === "bold" && status !== "warning" ? "inverse" : "neutral"
+			}), /* @__PURE__ */ jsx(Tooltip, {
+				id: `close-banner-${randomTooltipId}`,
+				place: "left",
+				children: "Close Banner"
+			})]
+		})]
+	});
+};
+//#endregion
+export { BannerNotification as t };
+
+//# sourceMappingURL=BannerNotification-DzprO7bZ.mjs.map

package/BannerNotification-DzprO7bZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerNotification-DzprO7bZ.mjs","names":[],"sources":["../src/BannerNotification/components/BannerNotificationSkeleton.tsx","../src/BannerNotification/components/CalloutIcon/BannerIcon.tsx","../src/BannerNotification/utils/getRandomTooltipId.ts","../src/BannerNotification/BannerNotification.tsx"],"sourcesContent":["import { Skeleton } from '../../Skeleton/Skeleton';\n\nexport const BannerNotificationSkeleton = () => {\n    return (\n        <div className=\"flex justify-center border border-solid border-border-secondary px-sm py-md\">\n            <Skeleton\n                backgroundColor=\"#f3f3f3\"\n                className=\"col-start-1 col-end-4\"\n                foregroundColor=\"#ecebeb\"\n                height={40}\n                speed={2}\n                viewBox=\"0 0 600 40\"\n                width={600}\n            >\n                <circle\n                    cx=\"20\"\n                    cy=\"20\"\n                    r=\"20\"\n                />\n                <rect\n                    height=\"24\"\n                    rx=\"3\"\n                    ry=\"3\"\n                    width=\"300\"\n                    x=\"60\"\n                    y=\"10\"\n                />\n                <rect\n                    height=\"24\"\n                    rx=\"3\"\n                    ry=\"3\"\n                    width=\"200\"\n                    x=\"370\"\n                    y=\"10\"\n                />\n            </Skeleton>\n        </div>\n    );\n};\n","import { Info, Warning } from '../../../Icons';\nimport { useWindowIsMobile } from '../../../providers';\n\ntype Props = {\n    emphasis?: 'bold' | 'subtle';\n    status: 'info' | 'warning' | 'critical';\n};\n\nexport const BannerIcon = ({ emphasis, status }: Props) => {\n    const isMobile = useWindowIsMobile();\n\n    let icon = <></>;\n\n    switch (status) {\n        case 'critical':\n            icon = (\n                <Warning\n                    color={emphasis === 'bold' ? 'inverse' : 'critical'}\n                    size={isMobile ? 'sm' : 'md'}\n                    style=\"fill\"\n                />\n            );\n            break;\n\n        case 'warning':\n            icon = (\n                <Warning\n                    color={emphasis === 'bold' ? 'primary' : 'warning'}\n                    size={isMobile ? 'sm' : 'md'}\n                    style=\"fill\"\n                />\n            );\n            break;\n\n        case 'info':\n        default:\n            icon = (\n                <Info\n                    color={emphasis === 'bold' ? 'inverse' : 'info'}\n                    size={isMobile ? 'sm' : 'md'}\n                    style=\"fill\"\n                />\n            );\n            break;\n    }\n\n    return <div className=\"pr-xs xsMax:p-xs xsMax:pt-0\">{icon}</div>;\n};\n","export const getRandomTooltipId = () => {\n    return Math.floor(Math.random() * 1000);\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode, useMemo } from 'react';\n\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Close } from '../Icons';\nimport { useWindowIsMobile } from '../providers';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { BodyPrimary, BodySecondary } from '../Typography/Text/Text';\nimport { BannerNotificationSkeleton } from './components/BannerNotificationSkeleton';\nimport { BannerIcon } from './components/CalloutIcon/BannerIcon';\nimport { getRandomTooltipId } from './utils/getRandomTooltipId';\n\ntype Props = {\n    /**\n     * Configuration for the action button.\n     */\n    actionButtonConfig?: {\n        /**\n         * The label for the close button.\n         */\n        label: string;\n\n        /**\n         * Callback function called when the close button is clicked.\n         */\n        onClick: () => void;\n    };\n\n    /**\n     * Additional CSS class name for the component.\n     */\n    className?: string;\n\n    /**\n     * The emphasis style of the component.\n     * - \"bold\": Bold emphasis.\n     * - \"subtle\": Subtle emphasis.\n     */\n    emphasis?: 'bold' | 'subtle';\n\n    /**\n     * Forces the component to render as a skeleton.\n     */\n    forceSkeleton?: boolean;\n\n    /**\n     * The message content of the component.\n     */\n    message?: string | ReactNode;\n\n    /**\n     * Callback function called when the component is closed.\n     */\n    onClose?: () => void;\n\n    /**\n     * The status of the component.\n     * - \"info\": Informational status.\n     * - \"warning\": Warning status.\n     * - \"critical\": Critical status.\n     */\n    status: 'info' | 'warning' | 'critical';\n};\n\nexport const BannerNotification = ({\n    actionButtonConfig,\n    className,\n    emphasis = 'subtle',\n    forceSkeleton,\n    message,\n    onClose,\n    status = 'info',\n}: Props) => {\n    const randomTooltipId = useMemo(() => getRandomTooltipId(), []);\n    const isMobile = useWindowIsMobile();\n\n    const classes = useMemo(\n        () =>\n            cn(\n                className,\n                // GENERAL\n                'grid w-full grid-cols-[1fr_min-content] items-center p-[10px_16px_16px_8px]',\n                // MOBILE\n                'xsMax:items-start',\n                // SUBTLE\n                {\n                    'bg-background-critical-light': emphasis === 'subtle' && status === 'critical',\n                    'bg-background-info-light': emphasis === 'subtle' && status === 'info',\n                    'bg-background-warning-light': emphasis === 'subtle' && status === 'warning',\n                },\n                // BOLD\n                {\n                    'bg-background-critical-dark': emphasis === 'bold' && status === 'critical',\n                    'bg-background-info-dark': emphasis === 'bold' && status === 'info',\n                    'bg-background-warning-dark': emphasis === 'bold' && status === 'warning',\n                }\n            ),\n        [className, emphasis, status]\n    );\n\n    if (forceSkeleton) {\n        return <BannerNotificationSkeleton />;\n    }\n\n    return (\n        <div className={classes}>\n            <div className=\"col-start-1 col-end-2 mt-[6px] flex items-center justify-center xsMax:items-start\">\n                <BannerIcon\n                    emphasis={emphasis}\n                    status={status}\n                />\n                <div className=\"mr-sm flex flex-row items-center xsMax:flex-col xsMax:items-start\">\n                    {isMobile ? (\n                        <BodySecondary color={emphasis === 'bold' && status !== 'warning' ? 'inverse' : 'primary'}>\n                            {message}\n                        </BodySecondary>\n                    ) : (\n                        <BodyPrimary color={emphasis === 'bold' && status !== 'warning' ? 'inverse' : 'primary'}>\n                            {message}\n                        </BodyPrimary>\n                    )}\n                    {actionButtonConfig && (\n                        <Button\n                            className=\"ml-sm xsMax:ml-0 xsMax:mt-sm\"\n                            onClick={actionButtonConfig.onClick}\n                            size={isMobile ? 'sm' : 'md'}\n                            style=\"primary\"\n                            variant=\"outlined\"\n                        >\n                            {actionButtonConfig.label}\n                        </Button>\n                    )}\n                </div>\n            </div>\n            {onClose && status !== 'critical' && (\n                <div className=\"relative flex h-full w-[34px] items-center justify-center xsMax:items-start\">\n                    <IconButton\n                        aria-label=\"Close Banner\"\n                        className=\"absolute right-0 col-start-3 col-end-4\"\n                        data-tooltip-id={`close-banner-${randomTooltipId}`}\n                        icon={Close}\n                        onClick={onClose}\n                        size={isMobile ? 'sm' : 'md'}\n                        style={emphasis === 'bold' && status !== 'warning' ? 'inverse' : 'neutral'}\n                    />\n                    <Tooltip\n                        id={`close-banner-${randomTooltipId}`}\n                        place=\"left\"\n                    >\n                        Close Banner\n                    </Tooltip>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}