@galaxy-io/dls 1.1.2 → 1.1.3

package/dist/chips/Chip.js

@@ -1,10 +1,10 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import TextShimmer from "../text/TextShimmer.js";
-import Ellipsis from "../text/Ellipsis.js";
 import FlexWrapper from "../containers/FlexWrapper.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
+import TextShimmer from "../text/TextShimmer.js";
+import Ellipsis from "../text/Ellipsis.js";
 import AvatarShimmer from "../avatar/AvatarShimmer.js";
 /* empty css               */
 import { styled } from "@linaria/react";

package/dist/inputs/CheckboxInput.js

@@ -1,8 +1,8 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextVariant } from "../text/Text.js";
-import RequiredMarker from "../text/RequiredMarker.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
+import RequiredMarker from "../text/RequiredMarker.js";
 /* empty css                        */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";

package/dist/inputs/Input.js

@@ -2,9 +2,9 @@ import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import Tooltip, { TooltipPosition } from "../tooltip/Tooltip.js";
-import RequiredMarker from "../text/RequiredMarker.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
+import RequiredMarker from "../text/RequiredMarker.js";
 import Spacing from "../containers/Spacing.js";
 import HelpIcon from "../icons/HelpIcon.js";
 /* empty css                */

package/dist/inputs/RadioInput.js

@@ -1,8 +1,8 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextVariant } from "../text/Text.js";
 import Tooltip, { TooltipPosition } from "../tooltip/Tooltip.js";
-import RequiredMarker from "../text/RequiredMarker.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
+import RequiredMarker from "../text/RequiredMarker.js";
 import Spacing from "../containers/Spacing.js";
 import HelpIcon from "../icons/HelpIcon.js";
 /* empty css                     */

package/dist/inputs/TextAreaInput.js

@@ -1,8 +1,8 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import TextShimmer from "../text/TextShimmer.js";
 import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
+import TextShimmer from "../text/TextShimmer.js";
 import { InputLabel } from "./Input.js";
 /* empty css                        */
 import { styled } from "@linaria/react";

package/dist/spreadsheet/InfiniteSpreadsheet.js

@@ -12,8 +12,8 @@ import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useVirtualizer } from "@tanstack/react-virtual";
 import { PlusIcon } from "@phosphor-icons/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/spreadsheet/InfiniteSpreadsheet.tsx
 var _exp = () => ({ $width, $fillWidth }) => {
 	if ($fillWidth) return "100%";

package/dist/styles.css

@@ -208,5 +208,7 @@
 .s10h6trl{margin:10px 0 4px 0;}.s10h6trl:first-child{margin-top:0;}
 .sts1mtj{color:var(--sts1mtj-0);font-family:var(--sts1mtj-1);font-size:var(--sts1mtj-2);font-weight:var(--sts1mtj-3);line-height:var(--sts1mtj-4);letter-spacing:var(--sts1mtj-5);text-align:var(--sts1mtj-6);cursor:var(--sts1mtj-7);-webkit-user-select:var(--sts1mtj-8);-moz-user-select:var(--sts1mtj-8);-ms-user-select:var(--sts1mtj-8);user-select:var(--sts1mtj-8);-webkit-user-select:var(--sts1mtj-8);-moz-user-select:var(--sts1mtj-8);-ms-user-select:var(--sts1mtj-8);display:var(--sts1mtj-9);-webkit-line-clamp:var(--sts1mtj-10);-webkit-box-orient:var(--sts1mtj-11);overflow:var(--sts1mtj-12);width:var(--sts1mtj-13);min-height:var(--sts1mtj-14);overscroll-behavior:auto;-webkit-transition:color 0.075s ease-in-out;transition:color 0.075s ease-in-out;}
 .sfziwh{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;}
+.sgmrm4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:8px;padding:var(--sgmrm4-0);min-width:360px;max-width:420px;background-color:var(--sgmrm4-1);border:0.5px solid var(--sgmrm4-2);border-radius:5px;}
+.stlie57{position:fixed;z-index:11000;top:var(--stlie57-0);right:var(--stlie57-1);bottom:var(--stlie57-2);left:var(--stlie57-3);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;gap:8px;pointer-events:none;}.stlie57 >*{pointer-events:auto;}
 .sx1o0cd{background:var(--sx1o0cd-0);border:0.5px solid var(--sx1o0cd-1);border-radius:5px;padding:var(--sx1o0cd-2);box-shadow:0 1px 10px 0 var(--sx1o0cd-3),0 1px 1px 0 var(--sx1o0cd-4);width:var(--sx1o0cd-5);height:var(--sx1o0cd-6);min-width:var(--sx1o0cd-7);max-width:var(--sx1o0cd-8);min-height:var(--sx1o0cd-9);max-height:var(--sx1o0cd-10);cursor:var(--sx1o0cd-11);}.sx1o0cd:hover{border-color:var(--sx1o0cd-12);}
 /*$vite$:1*/

package/dist/toast/Toast.d.ts

@@ -0,0 +1,18 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { ButtonProps } from "../buttons/Button";
+export declare enum ToastVariant {
+    PRIMARY = "PRIMARY",
+    SUCCESS = "SUCCESS",
+    WARNING = "WARNING",
+    ERROR = "ERROR"
+}
+export interface ToastProps {
+    variant?: ToastVariant;
+    icon?: PhosphorIcon;
+    header: string | React.ReactNode;
+    subheader: string | React.ReactNode;
+    actions?: ButtonProps[];
+    onClose?: () => void;
+}
+declare const Toast: ({ variant, icon, header, subheader, actions, onClose, }: ToastProps) => import("react").JSX.Element;
+export default Toast;

package/dist/toast/Toast.js

@@ -0,0 +1,103 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextVariant } from "../text/Text.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import FlexItem from "../containers/FlexItem.js";
+import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+/* empty css                */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon, SpinnerGapIcon, WarningIcon, XIcon } from "@phosphor-icons/react";
+//#region src/toast/Toast.tsx
+var ToastVariant = /* @__PURE__ */ function(ToastVariant) {
+	ToastVariant["PRIMARY"] = "PRIMARY";
+	ToastVariant["SUCCESS"] = "SUCCESS";
+	ToastVariant["WARNING"] = "WARNING";
+	ToastVariant["ERROR"] = "ERROR";
+	return ToastVariant;
+}({});
+var _exp = () => ({ $hasActions }) => $hasActions ? "12px 12px 8px 12px" : "12px";
+var _exp2 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.tertiary).with("WARNING", () => theme.color.background.tertiary).with("ERROR", () => theme.color.background.tertiary).exhaustive();
+var _exp3 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.border.primary).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.primary).with("ERROR", () => theme.color.border.error).exhaustive();
+var StyledToast = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledToast",
+	class: "sgmrm4",
+	propsAsIs: false,
+	vars: {
+		"sgmrm4-0": [_exp()],
+		"sgmrm4-1": [_exp2()],
+		"sgmrm4-2": [_exp3()]
+	}
+}));
+var Toast = ({ variant = "PRIMARY", icon, header, subheader, actions, onClose }) => {
+	const renderIcon = () => {
+		if (icon) return /* @__PURE__ */ jsx(Icon, {
+			component: icon,
+			size: 16
+		});
+		return match(variant).with("PRIMARY", () => /* @__PURE__ */ jsx(Icon, {
+			component: SpinnerGapIcon,
+			size: 16
+		})).with("SUCCESS", () => /* @__PURE__ */ jsx(Icon, {
+			component: CheckCircleIcon,
+			variant: IconVariant.SUCCESS,
+			size: 16,
+			weight: IconWeight.FILL
+		})).with("WARNING", () => /* @__PURE__ */ jsx(Icon, {
+			component: WarningIcon,
+			variant: IconVariant.WARNING,
+			size: 16,
+			weight: IconWeight.FILL
+		})).with("ERROR", () => /* @__PURE__ */ jsx(Icon, {
+			component: WarningIcon,
+			variant: IconVariant.ERROR,
+			size: 16,
+			weight: IconWeight.FILL
+		})).exhaustive();
+	};
+	const hasActions = (actions && actions.length > 0) ?? false;
+	return /* @__PURE__ */ jsxs(StyledToast, {
+		$variant: variant,
+		$hasActions: hasActions,
+		children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+			alignItems: AlignItems.START,
+			gap: 8,
+			children: [
+				/* @__PURE__ */ jsx(FlexWrapper, {
+					width: 20,
+					height: 20,
+					children: renderIcon()
+				}),
+				/* @__PURE__ */ jsx(FlexItem, {
+					grow: 1,
+					children: /* @__PURE__ */ jsxs(FlexWrapper, {
+						direction: FlexDirection.COLUMN,
+						gap: 4,
+						children: [typeof header === "string" ? /* @__PURE__ */ jsx(Text, { children: header }) : header, typeof subheader === "string" ? /* @__PURE__ */ jsx(Text, {
+							variant: TextVariant.TERTIARY,
+							children: subheader
+						}) : subheader]
+					})
+				}),
+				onClose && /* @__PURE__ */ jsx(Button, {
+					icon: XIcon,
+					variant: ButtonVariant.TERTIARY,
+					size: ButtonSize.SMALL,
+					onClick: onClose
+				})
+			]
+		}), hasActions && /* @__PURE__ */ jsx(FlexWrapper, {
+			alignItems: AlignItems.CENTER,
+			gap: 8,
+			children: actions?.map((action, index) => /* @__PURE__ */ jsx(Button, {
+				label: action.label,
+				variant: action.variant ?? ButtonVariant.TERTIARY,
+				size: ButtonSize.SMALL,
+				onClick: action.onClick
+			}, index))
+		})]
+	});
+};
+//#endregion
+export { ToastVariant, Toast as default };

package/dist/toast/ToastContainer.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+interface ToastContainerProps {
+    children: ReactNode;
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+}
+declare const ToastContainer: ({ children, top, right, bottom, left }: ToastContainerProps) => import("react").JSX.Element;
+export default ToastContainer;

package/dist/toast/ToastContainer.js

@@ -0,0 +1,31 @@
+import { getCssSizeValue } from "../utils/linaria.js";
+/* empty css                         */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/toast/ToastContainer.tsx
+var _exp2 = () => ({ $top, $bottom }) => $top !== void 0 ? getCssSizeValue($top) : $bottom !== void 0 ? "auto" : "auto";
+var _exp3 = () => ({ $right, $left }) => $right !== void 0 ? getCssSizeValue($right) : $left !== void 0 ? "auto" : getCssSizeValue(24);
+var _exp4 = () => ({ $bottom, $top }) => $bottom !== void 0 ? getCssSizeValue($bottom) : $top !== void 0 ? "auto" : getCssSizeValue(24);
+var _exp5 = () => ({ $left }) => $left !== void 0 ? getCssSizeValue($left) : "auto";
+var StyledToastContainer = /*#__PURE__*/ styled("div")({
+	name: "StyledToastContainer",
+	class: "stlie57",
+	propsAsIs: false,
+	vars: {
+		"stlie57-0": [_exp2()],
+		"stlie57-1": [_exp3()],
+		"stlie57-2": [_exp4()],
+		"stlie57-3": [_exp5()]
+	}
+});
+var ToastContainer = ({ children, top, right, bottom, left }) => {
+	return /* @__PURE__ */ jsx(StyledToastContainer, {
+		$top: top,
+		$right: right,
+		$bottom: bottom,
+		$left: left,
+		children
+	});
+};
+//#endregion
+export { ToastContainer as default };

package/dist/toast/ToastProvider.d.ts

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from "react";
+import { ToastVariant, type ToastProps } from "./Toast";
+export type ShowToastProps = Omit<ToastProps, "onClose"> & {
+    timeout?: number;
+    top?: number | string;
+    left?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+};
+export interface ToastContextProps {
+    showToast: (options: ShowToastProps) => string;
+    hideToast: (id?: string) => void;
+}
+export declare const ToastContext: import("react").Context<ToastContextProps | undefined>;
+export declare const ToastProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+export { ToastVariant };

package/dist/toast/ToastProvider.js

@@ -0,0 +1,111 @@
+import Toast, { ToastVariant } from "./Toast.js";
+import ToastContainer from "./ToastContainer.js";
+import ToastWrapper from "./ToastWrapper.js";
+import { createContext, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { AnimatePresence } from "framer-motion";
+//#region src/toast/ToastProvider.tsx
+var ToastContext = createContext(void 0);
+var DEFAULT_TIMEOUT = 3e3;
+var toastCounter = 0;
+var nextToastId = () => `toast-${++toastCounter}`;
+var positionKey = (toast) => JSON.stringify([
+	toast.top,
+	toast.right,
+	toast.bottom,
+	toast.left
+]);
+var ToastProvider = ({ children }) => {
+	const [toasts, setToasts] = useState([]);
+	const timeoutRefs = useRef(/* @__PURE__ */ new Map());
+	const showToast = useCallback((options) => {
+		const id = nextToastId();
+		const { timeout, top, right, bottom, left, ...props } = options;
+		const finalTimeout = timeout === void 0 ? DEFAULT_TIMEOUT : timeout;
+		setToasts((prev) => [...prev, {
+			id,
+			props,
+			timeout: finalTimeout,
+			top,
+			right,
+			bottom,
+			left
+		}]);
+		return id;
+	}, []);
+	const hideToast = useCallback((id) => {
+		if (id) {
+			const timeoutId = timeoutRefs.current.get(id);
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+				timeoutRefs.current.delete(id);
+			}
+			setToasts((prev) => prev.filter((toast) => toast.id !== id));
+		} else setToasts((prev) => {
+			const firstToast = prev[0];
+			if (firstToast) {
+				const timeoutId = timeoutRefs.current.get(firstToast.id);
+				if (timeoutId) {
+					clearTimeout(timeoutId);
+					timeoutRefs.current.delete(firstToast.id);
+				}
+			}
+			return prev.slice(1);
+		});
+	}, []);
+	useEffect(() => {
+		const currentToastIds = new Set(toasts.map((toast) => toast.id));
+		toasts.forEach((toast) => {
+			if (timeoutRefs.current.has(toast.id)) return;
+			if (toast.timeout > 0) {
+				const timeoutId = setTimeout(() => {
+					setToasts((prev) => prev.filter((t) => t.id !== toast.id));
+					timeoutRefs.current.delete(toast.id);
+				}, toast.timeout);
+				timeoutRefs.current.set(toast.id, timeoutId);
+			}
+		});
+		timeoutRefs.current.forEach((timeoutId, toastId) => {
+			if (!currentToastIds.has(toastId)) {
+				clearTimeout(timeoutId);
+				timeoutRefs.current.delete(toastId);
+			}
+		});
+	}, [toasts]);
+	useEffect(() => {
+		const refs = timeoutRefs.current;
+		return () => {
+			refs.forEach((timeoutId) => {
+				clearTimeout(timeoutId);
+			});
+			refs.clear();
+		};
+	}, []);
+	const positionGroups = /* @__PURE__ */ new Map();
+	toasts.forEach((toast) => {
+		const key = positionKey(toast);
+		const group = positionGroups.get(key);
+		if (group) group.push(toast);
+		else positionGroups.set(key, [toast]);
+	});
+	const toastContent = /* @__PURE__ */ jsx(Fragment, { children: [...positionGroups.entries()].map(([key, group]) => /* @__PURE__ */ jsx(ToastContainer, {
+		top: group[0].top,
+		right: group[0].right,
+		bottom: group[0].bottom,
+		left: group[0].left,
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: group.map((toast) => /* @__PURE__ */ jsx(ToastWrapper, { children: /* @__PURE__ */ jsx(Toast, {
+			...toast.props,
+			onClose: () => hideToast(toast.id)
+		}) }, toast.id)) })
+	}, key)) });
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value: {
+			showToast,
+			hideToast
+		},
+		children: [children, typeof document !== "undefined" && createPortal(toastContent, document.body)]
+	});
+};
+//#endregion
+export { ToastContext, ToastProvider, ToastVariant };

package/dist/toast/ToastWrapper.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+interface ToastWrapperProps {
+    children: ReactNode;
+}
+declare const ToastWrapper: ({ children }: ToastWrapperProps) => import("react").JSX.Element;
+export default ToastWrapper;

package/dist/toast/ToastWrapper.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+//#region src/toast/ToastWrapper.tsx
+var ToastWrapper = ({ children }) => {
+	return /* @__PURE__ */ jsx(motion.div, {
+		initial: {
+			opacity: 0,
+			x: 50
+		},
+		animate: {
+			opacity: 1,
+			x: 0
+		},
+		exit: {
+			opacity: 0,
+			x: 50
+		},
+		transition: {
+			type: "tween",
+			duration: .15,
+			ease: "easeOut"
+		},
+		children
+	});
+};
+//#endregion
+export { ToastWrapper as default };

package/dist/toast/useToast.d.ts

@@ -0,0 +1 @@
+export declare const useToast: () => import("./ToastProvider").ToastContextProps;

package/dist/toast/useToast.js

@@ -0,0 +1,10 @@
+import { ToastContext } from "./ToastProvider.js";
+import { useContext } from "react";
+//#region src/toast/useToast.ts
+var useToast = () => {
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("useToast must be used within a ToastProvider");
+	return context;
+};
+//#endregion
+export { useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",
@@ -143,6 +143,10 @@
       "types": "./dist/theme/*.d.ts",
       "import": "./dist/theme/*.js"
     },
+    "./toast/*": {
+      "types": "./dist/toast/*.d.ts",
+      "import": "./dist/toast/*.js"
+    },
     "./tooltip/*": {
       "types": "./dist/tooltip/*.d.ts",
       "import": "./dist/tooltip/*.js"