@agentero/design-system 0.5.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.5.1",
+	"version": "0.7.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -37,6 +37,10 @@
 			"types": "./src/divider/index.d.ts",
 			"import": "./src/divider/index.js"
 		},
+		"./dropdown-menu": {
+			"types": "./src/dropdown-menu/index.d.ts",
+			"import": "./src/dropdown-menu/index.js"
+		},
 		"./loading": {
 			"types": "./src/loading/index.d.ts",
 			"import": "./src/loading/index.js"
@@ -45,6 +49,10 @@
 			"types": "./src/status-ball/index.d.ts",
 			"import": "./src/status-ball/index.js"
 		},
+		"./toast": {
+			"types": "./src/toast/index.d.ts",
+			"import": "./src/toast/index.js"
+		},
 		"./lib": {
 			"types": "./lib/index.d.ts",
 			"import": "./lib/index.js"
@@ -63,9 +71,11 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-avatar": "^1.1.11",
+		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",
 		"clsx": "^2.1.1",
+		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.5.0",
 		"tailwind-variants": "^3.2.2"
 	}

package/src/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,276 @@
+import { ComponentProps } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+/**
+ * Props for the DropdownMenu Root component.
+ *
+ * @property {boolean} [defaultOpen] - The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
+ * @property {boolean} [open] - The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
+ * @property {(open: boolean) => void} [onOpenChange] - Event handler called when the open state of the dropdown menu changes.
+ * @property {boolean} [modal=true] - The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+ * @property {'ltr' | 'rtl'} [dir] - The reading direction of the dropdown menu when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
+ */
+type RootProps = ComponentProps<typeof DropdownMenuPrimitive.Root>;
+/**
+ * Props for the DropdownMenu Trigger component.
+ *
+ * @property {boolean} [asChild=false] - Change the default rendered element for the one passed as a child, merging their props and behavior.
+ * @property {string} [className] - Additional CSS classes to apply to the trigger.
+ *
+ * @dataAttribute {string} data-state - "open" | "closed"
+ * @dataAttribute {string} data-disabled - Present when disabled
+ */
+type TriggerProps = ComponentProps<typeof DropdownMenuPrimitive.Trigger>;
+/**
+ * Tailwind variant styles for the dropdown menu content.
+ * Includes animations for slide-in/out based on the side from which the menu appears.
+ */
+declare const contentStyles: import('tailwind-variants').TVReturnType<{
+    hasTriggerWidth: {
+        true: string;
+    };
+}, undefined, string[], {
+    hasTriggerWidth: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    hasTriggerWidth: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * Props for the DropdownMenu Content component.
+ *
+ * @property {boolean} [loop=false] - When true, keyboard navigation will loop from last item to first, and vice versa.
+ * @property {'ltr' | 'rtl'} [dir] - The reading direction. If omitted, inherits from DirectionProvider or assumes LTR.
+ * @property {'top' | 'right' | 'bottom' | 'left'} [side='bottom'] - The preferred side of the trigger to render against when open.
+ * @property {number} [sideOffset=8] - The distance in pixels from the trigger.
+ * @property {'start' | 'center' | 'end'} [align='center'] - The preferred alignment against the trigger.
+ * @property {number} [alignOffset=0] - An offset in pixels from the "start" or "end" alignment options.
+ * @property {boolean} [avoidCollisions=true] - When true, overrides side and align to prevent collisions with boundary edges.
+ * @property {Element | null} [collisionBoundary] - The element used as the collision boundary.
+ * @property {number} [collisionPadding=0] - The distance in pixels from the boundary edges where collision detection should occur.
+ * @property {boolean} [hasTriggerWidth=false] - When true, sets the content width to match the trigger width using CSS variable.
+ * @property {string} [className] - Additional CSS classes to apply.
+ *
+ * @dataAttribute {string} data-state - "open" | "closed"
+ * @dataAttribute {string} data-side - "top" | "right" | "bottom" | "left"
+ * @dataAttribute {string} data-align - "start" | "end" | "center"
+ *
+ * @cssVariable --radix-dropdown-menu-content-transform-origin - The transform origin based on content side
+ * @cssVariable --radix-dropdown-menu-trigger-width - The width of the trigger element
+ * @cssVariable --radix-dropdown-menu-content-available-width - The available width before overflow
+ * @cssVariable --radix-dropdown-menu-content-available-height - The available height before overflow
+ */
+type ContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content> & VariantProps<typeof contentStyles>;
+/**
+ * Props for the DropdownMenu Item component.
+ *
+ * @property {boolean} [disabled] - When true, prevents the user from interacting with the item.
+ * @property {(event: Event) => void} [onSelect] - Event handler called when the user selects an item (via mouse or keyboard).
+ * @property {string} [textValue] - Optional text used for typeahead purposes. By default, the typeahead behavior will use the .textContent of the item.
+ * @property {string} [className] - Additional CSS classes to apply.
+ *
+ * @dataAttribute {string} data-highlighted - Present when highlighted via keyboard navigation or hover
+ * @dataAttribute {string} data-disabled - Present when disabled
+ */
+type ItemProps = ComponentProps<typeof DropdownMenuPrimitive.Item>;
+/**
+ * Props for the DropdownMenu Separator component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ */
+type SeparatorProps = ComponentProps<typeof DropdownMenuPrimitive.Separator>;
+/**
+ * Props for the DropdownMenu Label component.
+ *
+ * @property {string} [className] - Additional CSS classes to apply.
+ */
+type LabelProps = ComponentProps<typeof DropdownMenuPrimitive.Label>;
+/**
+ * Props for the DropdownMenu Sub component.
+ *
+ * @property {boolean} [defaultOpen] - The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
+ * @property {boolean} [open] - The controlled open state of the submenu. Must be used in conjunction with onOpenChange.
+ * @property {(open: boolean) => void} [onOpenChange] - Event handler called when the open state of the submenu changes.
+ */
+type SubProps = ComponentProps<typeof DropdownMenuPrimitive.Sub>;
+/**
+ * Props for the DropdownMenu SubTrigger component.
+ *
+ * @property {boolean} [disabled] - When true, prevents the user from interacting with the item.
+ * @property {string} [textValue] - Optional text used for typeahead purposes. By default, the typeahead behavior will use the .textContent of the item.
+ * @property {string} [className] - Additional CSS classes to apply.
+ *
+ * @dataAttribute {string} data-state - "open" | "closed"
+ * @dataAttribute {string} data-highlighted - Present when highlighted via keyboard navigation or hover
+ * @dataAttribute {string} data-disabled - Present when disabled
+ */
+type SubTriggerProps = ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>;
+/**
+ * Props for the DropdownMenu SubContent component.
+ *
+ * @property {boolean} [loop=false] - When true, keyboard navigation will loop from last item to first, and vice versa.
+ * @property {number} [sideOffset=2] - The distance in pixels from the trigger.
+ * @property {number} [alignOffset=-5] - An offset in pixels from the "start" or "end" alignment options.
+ * @property {boolean} [avoidCollisions=true] - When true, overrides side and align to prevent collisions with boundary edges.
+ * @property {Element | null} [collisionBoundary] - The element used as the collision boundary.
+ * @property {number} [collisionPadding=0] - The distance in pixels from the boundary edges where collision detection should occur.
+ * @property {string} [className] - Additional CSS classes to apply.
+ *
+ * @dataAttribute {string} data-state - "open" | "closed"
+ * @dataAttribute {string} data-side - "top" | "right" | "bottom" | "left"
+ * @dataAttribute {string} data-align - "start" | "end" | "center"
+ *
+ * @cssVariable --radix-dropdown-menu-content-transform-origin - The transform origin based on content side
+ * @cssVariable --radix-dropdown-menu-content-available-width - The available width before overflow
+ * @cssVariable --radix-dropdown-menu-content-available-height - The available height before overflow
+ */
+type SubContentProps = ComponentProps<typeof DropdownMenuPrimitive.SubContent>;
+/**
+ * DropdownMenu is the compound component for attaching a menu of secondary
+ * actions to a button or icon trigger — edit/duplicate/delete rows, account
+ * menus, overflow affordances, and nested submenus. Built on Radix UI's
+ * DropdownMenu primitive, so keyboard navigation, focus trapping, typeahead,
+ * and viewport-collision detection come for free.
+ *
+ * Compose it from `Root` / `Trigger` / `Portal` / `Content` and fill the
+ * menu with `Item`, `Separator`, `Label`, and — for nested flows — `Sub` /
+ * `SubTrigger` / `SubContent`. Wrap content in `Portal` so the menu escapes
+ * ancestor `overflow:hidden` and z-index stacking contexts.
+ *
+ * Do **not** use DropdownMenu for primary navigation (use a real nav menu),
+ * for single-choice form input (use a `Select`), or for command palettes
+ * (use a dedicated command component). For radio/checkbox-style toggles,
+ * use Radix's `CheckboxItem` / `RadioItem` primitives directly — those
+ * parts are not exposed here yet.
+ *
+ * @summary Compound overlay menu for secondary actions, grouped items, and submenus
+ *
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dropdown-menu|Radix UI DropdownMenu}
+ *
+ * @example
+ * ```tsx
+ * import { DropdownMenu } from '@agentero/design-system/dropdown-menu';
+ *
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>
+ *     <IconMoreVert />
+ *   </DropdownMenu.Trigger>
+ *
+ *   <DropdownMenu.Portal>
+ *     <DropdownMenu.Content side="bottom" align="end">
+ *       <DropdownMenu.Label>Actions</DropdownMenu.Label>
+ *
+ *       <DropdownMenu.Item onSelect={() => handleEdit()}>
+ *         <IconEdit />
+ *         Edit
+ *       </DropdownMenu.Item>
+ *
+ *       <DropdownMenu.Sub>
+ *         <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>
+ *         <DropdownMenu.Portal>
+ *           <DropdownMenu.SubContent>
+ *             <DropdownMenu.Item>Email</DropdownMenu.Item>
+ *             <DropdownMenu.Item>Slack</DropdownMenu.Item>
+ *           </DropdownMenu.SubContent>
+ *         </DropdownMenu.Portal>
+ *       </DropdownMenu.Sub>
+ *
+ *       <DropdownMenu.Separator />
+ *
+ *       <DropdownMenu.Item
+ *         onSelect={() => handleDelete()}
+ *         disabled={!canDelete}
+ *       >
+ *         <IconDelete />
+ *         Delete
+ *       </DropdownMenu.Item>
+ *     </DropdownMenu.Content>
+ *   </DropdownMenu.Portal>
+ * </DropdownMenu.Root>
+ * ```
+ *
+ * @component
+ * @namespace DropdownMenu
+ */
+export declare const DropdownMenu: {
+    /**
+     * The root container component for the dropdown menu.
+     * @see {@link Root}
+     */
+    Root: {
+        (props: RootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The button that toggles the dropdown menu.
+     * @see {@link Trigger}
+     */
+    Trigger: {
+        ({ className, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * Portals the content to the body element.
+     * @see {@link Portal}
+     */
+    Portal: import('react').FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+    /**
+     * The popup component containing menu items.
+     * @see {@link Content}
+     */
+    Content: {
+        ({ className, hasTriggerWidth, sideOffset, ...props }: ContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * An individual menu item.
+     * @see {@link Item}
+     */
+    Item: {
+        ({ className, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * A visual divider between menu items.
+     * @see {@link Separator}
+     */
+    Separator: {
+        ({ className, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * A non-interactive label for menu sections.
+     * @see {@link Label}
+     */
+    Label: {
+        ({ className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * Container for submenu parts.
+     * @see {@link Sub}
+     */
+    Sub: {
+        (props: SubProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * An item that opens a submenu.
+     * @see {@link SubTrigger}
+     */
+    SubTrigger: {
+        ({ className, children, ...props }: SubTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The popup component for submenu items.
+     * @see {@link SubContent}
+     */
+    SubContent: {
+        ({ className, sideOffset, alignOffset, ...props }: SubContentProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/src/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,111 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { IconArrowRight as t } from "./icons.js";
+import { tv as n } from "tailwind-variants";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-dropdown-menu";
+//#region src/dropdown-menu/dropdown-menu.tsx
+var o = (e) => /* @__PURE__ */ r(a.Root, {
+	"data-slot": "dropdown-menu-root",
+	...e
+});
+o.displayName = "DropdownMenu.Root";
+var s = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Trigger, {
+	"data-slot": "dropdown-menu-trigger",
+	className: e("cursor-pointer outline-none focus:outline-none", t),
+	...n
+});
+s.displayName = "DropdownMenu.Trigger";
+var c = a.Portal, l = n({
+	base: [
+		"z-[1000] flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
+		"border border-border-default-base-primary",
+		"will-change-[transform,opacity]",
+		"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
+		"data-[state=closed]:animate-[dropdownSlideOut_150ms_ease-in]",
+		"data-[side=bottom]:origin-top",
+		"data-[side=left]:origin-right",
+		"data-[side=right]:origin-left",
+		"data-[side=top]:origin-bottom",
+		"data-[side=bottom]:animate-[dropdownSlideInFromTop_200ms_ease-out]",
+		"data-[side=left]:animate-[dropdownSlideInFromRight_200ms_ease-out]",
+		"data-[side=right]:animate-[dropdownSlideInFromLeft_200ms_ease-out]",
+		"data-[side=top]:animate-[dropdownSlideInFromBottom_200ms_ease-out]"
+	],
+	variants: { hasTriggerWidth: { true: "w-[var(--radix-dropdown-menu-trigger-width)]" } }
+}), u = ({ className: e, hasTriggerWidth: t = !1, sideOffset: n = 8, ...i }) => /* @__PURE__ */ r(a.Content, {
+	"data-slot": "dropdown-menu-content",
+	sideOffset: n,
+	className: l({
+		hasTriggerWidth: t,
+		className: e
+	}),
+	...i
+});
+u.displayName = "DropdownMenu.Content";
+var d = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Item, {
+	"data-slot": "dropdown-menu-item",
+	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline transition-colors outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "data-disabled:active:bg-bg-default-base-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", t),
+	...n
+});
+d.displayName = "DropdownMenu.Item";
+var f = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Separator, {
+	"data-slot": "dropdown-menu-divider",
+	className: e("-mx-1 my-1 w-[calc(100%+0.5rem)] border-t border-border-menu-divider", t),
+	...n
+});
+f.displayName = "DropdownMenu.Separator";
+var p = ({ className: t, ...n }) => /* @__PURE__ */ r(a.Label, {
+	"data-slot": "dropdown-menu-label",
+	className: e("px-3 py-1 text-xs text-text-default-base-tertiary", t),
+	...n
+});
+p.displayName = "DropdownMenu.Label";
+var m = (e) => /* @__PURE__ */ r(a.Sub, {
+	"data-slot": "dropdown-menu-sub",
+	...e
+});
+m.displayName = "DropdownMenu.Sub";
+var h = ({ className: n, children: o, ...s }) => /* @__PURE__ */ i(a.SubTrigger, {
+	"data-slot": "dropdown-menu-sub-trigger",
+	className: e("flex items-center gap-2 bg-bg-default-base-primary px-3 py-1.75 text-sm text-text-default-base-primary", "cursor-pointer rounded-md no-underline transition-colors outline-none", "min-w-40", "data-highlighted:bg-bg-default-base-primary-hover", "data-[state=open]:bg-bg-default-base-primary-hover", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed", "data-disabled:text-text-default-disable-primary", "[&>svg]:h-6", "[&_path]:fill-icon-default-base-tertiary", n),
+	...s,
+	children: [o, /* @__PURE__ */ r(t, { className: "ml-auto h-4 w-4 [&>path]:fill-icon-default-base-tertiary" })]
+});
+h.displayName = "DropdownMenu.SubTrigger";
+var g = n({ base: [
+	"z-[1000] flex flex-col rounded-lg bg-bg-default-base-primary p-1 shadow-xl",
+	"border border-border-default-base-primary",
+	"will-change-[transform,opacity]",
+	"data-[state=open]:animate-[dropdownSlideIn_200ms_ease-out]",
+	"data-[state=closed]:animate-[dropdownSlideOut_150ms_ease-in]",
+	"data-[side=bottom]:origin-top",
+	"data-[side=left]:origin-right",
+	"data-[side=right]:origin-left",
+	"data-[side=top]:origin-bottom",
+	"data-[side=bottom]:animate-[dropdownSlideInFromTop_200ms_ease-out]",
+	"data-[side=left]:animate-[dropdownSlideInFromRight_200ms_ease-out]",
+	"data-[side=right]:animate-[dropdownSlideInFromLeft_200ms_ease-out]",
+	"data-[side=top]:animate-[dropdownSlideInFromBottom_200ms_ease-out]"
+] }), _ = ({ className: e, sideOffset: t = 2, alignOffset: n = -5, ...i }) => /* @__PURE__ */ r(a.SubContent, {
+	"data-slot": "dropdown-menu-sub-content",
+	sideOffset: t,
+	alignOffset: n,
+	className: g({ className: e }),
+	...i
+});
+_.displayName = "DropdownMenu.SubContent";
+var v = {
+	Root: o,
+	Trigger: s,
+	Portal: c,
+	Content: u,
+	Item: d,
+	Separator: f,
+	Label: p,
+	Sub: m,
+	SubTrigger: h,
+	SubContent: _
+};
+//#endregion
+export { v as DropdownMenu };

package/src/dropdown-menu/icons.d.ts

@@ -0,0 +1,9 @@
+import { SVGProps } from 'react';
+/**
+ * Right-arrow indicator rendered inside `DropdownMenu.SubTrigger` to signal
+ * that a submenu will open. Fill color is supplied by the surrounding class
+ * (`[&>path]:fill-...`) so the icon inherits the trigger's color token.
+ *
+ * @summary 24px arrow-right icon used as the submenu affordance
+ */
+export declare const IconArrowRight: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/dropdown-menu/icons.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/dropdown-menu/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M10.25 9.92397C10.25 9.51885 10.4349 9.23841 10.8048 9.08264C11.1747 8.92688 11.5019 8.9913 11.7865 9.27592L14.0211 11.5105C14.1147 11.6041 14.1833 11.7028 14.2269 11.8066C14.2705 11.9105 14.2922 12.0227 14.2922 12.1432C14.2922 12.2637 14.2705 12.3759 14.2269 12.4797C14.1833 12.5836 14.1147 12.6823 14.0211 12.7759L11.7865 15.0105C11.5019 15.2951 11.1747 15.3595 10.8048 15.2037C10.4349 15.048 10.25 14.7675 10.25 14.3624L10.25 9.92397Z" })
+});
+//#endregion
+export { t as IconArrowRight };

package/src/dropdown-menu/index.d.ts

@@ -0,0 +1 @@
+export { DropdownMenu } from './dropdown-menu';

package/src/dropdown-menu/index.js

@@ -0,0 +1,2 @@
+import { DropdownMenu as e } from "./dropdown-menu.js";
+export { e as DropdownMenu };

package/src/toast/icons.d.ts

@@ -0,0 +1,36 @@
+import { SVGProps } from 'react';
+/**
+ * Filled check-circle icon used for success-type toasts. Inherits color
+ * from the surrounding text via `currentColor` when paired with Tailwind's
+ * `fill-current` utility on the `<path>`.
+ *
+ * @summary 24px check-circle icon for success toasts
+ */
+export declare const IconCheckCircle: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Outlined error icon used for error-type toasts.
+ *
+ * @summary 24px error-outline icon for error toasts
+ */
+export declare const IconErrorOutline: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Outlined warning triangle icon used for warning-type toasts.
+ *
+ * @summary 24px warning icon for warning toasts
+ */
+export declare const IconWarning: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Filled info icon used for neutral and info-type toasts. Inherits color
+ * from the surrounding text via `currentColor`.
+ *
+ * @summary 24px info-filled icon for neutral and info toasts
+ */
+export declare const IconInfoFilled: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Smaller close (X) icon used for the Toast dismiss button. The glyph sits
+ * closer to the viewBox edges than Alert's `IconClose`, keeping the visual
+ * weight balanced with the Toast content row.
+ *
+ * @summary 24px close icon sized for the Toast dismiss button
+ */
+export declare const IconCloseSmall: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/toast/icons.js

@@ -0,0 +1,45 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/toast/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M10.5808 14.1462L8.25765 11.8231C8.1192 11.6846 7.94517 11.6138 7.73555 11.6106C7.52593 11.6074 7.34869 11.6782 7.20382 11.8231C7.05896 11.968 6.98653 12.1436 6.98653 12.35C6.98653 12.5564 7.05896 12.732 7.20382 12.8769L9.94805 15.6211C10.1288 15.8019 10.3397 15.8923 10.5808 15.8923C10.8218 15.8923 11.0327 15.8019 11.2134 15.6211L16.7769 10.0577C16.9153 9.91923 16.9862 9.7452 16.9894 9.53558C16.9926 9.32596 16.9218 9.14872 16.7769 9.00386C16.632 8.85899 16.4564 8.78656 16.25 8.78656C16.0436 8.78656 15.8679 8.85899 15.7231 9.00386L10.5808 14.1462ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5766 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45271 3.248 8.29658C3.74667 7.14043 4.42342 6.13475 5.27825 5.27953C6.1331 4.4243 7.13834 3.74724 8.29398 3.24836C9.44959 2.74947 10.6844 2.50003 11.9983 2.50003C13.3122 2.50003 14.5473 2.74936 15.7034 3.24803C16.8596 3.7467 17.8652 4.42345 18.7205 5.27828C19.5757 6.13313 20.2527 7.13837 20.7516 8.29401C21.2505 9.44962 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8653 18.7217 18.7205C17.8669 19.5757 16.8616 20.2528 15.706 20.7517C14.5504 21.2505 13.3156 21.5 12.0016 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.87501 17.675 6.32501C16.125 4.77501 14.2333 4.00001 12 4.00001C9.76664 4.00001 7.87498 4.77501 6.32498 6.32501C4.77498 7.87501 3.99998 9.76667 3.99998 12C3.99998 14.2333 4.77498 16.125 6.32498 17.675C7.87498 19.225 9.76664 20 12 20Z" })
+}), n = (t) => /* @__PURE__ */ e("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
+}), r = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M3.42555 20.4999C3.25605 20.4999 3.10382 20.4585 2.96887 20.3756C2.83392 20.2928 2.72897 20.1836 2.654 20.048C2.57602 19.9134 2.53312 19.7676 2.52532 19.6105C2.51752 19.4535 2.5599 19.2979 2.65245 19.1439L11.2132 4.35609C11.3057 4.20206 11.4216 4.08819 11.5607 4.01447C11.6998 3.94074 11.8462 3.90387 12.0001 3.90387C12.1539 3.90387 12.3004 3.94074 12.4395 4.01447C12.5786 4.08819 12.6944 4.20206 12.787 4.35609L21.3477 19.1439C21.4403 19.2979 21.4827 19.4535 21.4749 19.6105C21.4671 19.7676 21.4242 19.9134 21.3462 20.048C21.2712 20.1836 21.1663 20.2928 21.0313 20.3756C20.8964 20.4585 20.7441 20.4999 20.5746 20.4999H3.42555ZM4.4501 19H19.5501L12.0001 5.99997L4.4501 19ZM12.0001 17.8076C12.2289 17.8076 12.4208 17.7302 12.5756 17.5754C12.7304 17.4206 12.8078 17.2288 12.8078 17C12.8078 16.7711 12.7304 16.5793 12.5756 16.4245C12.4208 16.2697 12.2289 16.1923 12.0001 16.1923C11.7712 16.1923 11.5794 16.2697 11.4246 16.4245C11.2698 16.5793 11.1924 16.7711 11.1924 17C11.1924 17.2288 11.2698 17.4206 11.4246 17.5754C11.5794 17.7302 11.7712 17.8076 12.0001 17.8076ZM12.0004 15.1923C12.213 15.1923 12.3911 15.1204 12.5347 14.9767C12.6783 14.8329 12.7501 14.6548 12.7501 14.4423V10.9423C12.7501 10.7298 12.6782 10.5517 12.5344 10.4079C12.3906 10.2642 12.2124 10.1923 11.9998 10.1923C11.7872 10.1923 11.6091 10.2642 11.4655 10.4079C11.3219 10.5517 11.2501 10.7298 11.2501 10.9423V14.4423C11.2501 14.6548 11.322 14.8329 11.4658 14.9767C11.6096 15.1204 11.7878 15.1923 12.0004 15.1923Z" })
+}), i = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12.0003 16.75C12.2129 16.75 12.391 16.6781 12.5345 16.5343C12.6782 16.3906 12.75 16.2125 12.75 16V11.75C12.75 11.5375 12.6781 11.3593 12.5343 11.2155C12.3904 11.0718 12.2122 11 11.9998 11C11.7871 11 11.609 11.0718 11.4655 11.2155C11.3218 11.3593 11.25 11.5375 11.25 11.75V16C11.25 16.2125 11.3219 16.3906 11.4658 16.5343C11.6096 16.6781 11.7878 16.75 12.0003 16.75ZM12 9.2885C12.2288 9.2885 12.4207 9.21108 12.5755 9.05625C12.7303 8.90142 12.8077 8.70958 12.8077 8.48075C12.8077 8.25192 12.7303 8.06008 12.5755 7.90525C12.4207 7.75058 12.2288 7.67325 12 7.67325C11.7712 7.67325 11.5793 7.75058 11.4245 7.90525C11.2697 8.06008 11.1923 8.25192 11.1923 8.48075C11.1923 8.70958 11.2697 8.90142 11.4245 9.05625C11.5793 9.21108 11.7712 9.2885 12 9.2885ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9983 2.5C13.3123 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z" })
+}), a = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12 13.0634L8.75381 16.3096C8.60895 16.4545 8.4333 16.5253 8.22689 16.5221C8.02049 16.5189 7.84485 16.4449 7.69999 16.3C7.55512 16.1551 7.48269 15.9779 7.48269 15.7683C7.48269 15.5587 7.55512 15.3814 7.69999 15.2366L10.9366 12L7.69036 8.77883C7.5455 8.63396 7.47467 8.45672 7.47789 8.2471C7.48109 8.03749 7.55512 7.86024 7.69999 7.71538C7.84485 7.57051 8.0221 7.49808 8.23171 7.49808C8.44131 7.49808 8.61855 7.57051 8.76341 7.71538L12 10.9616L15.2212 7.71538C15.366 7.57051 15.5417 7.49808 15.7481 7.49808C15.9545 7.49808 16.1301 7.57051 16.275 7.71538C16.4301 7.87051 16.5077 8.05032 16.5077 8.2548C16.5077 8.45929 16.4301 8.63396 16.275 8.77883L13.0384 12L16.2846 15.2462C16.4295 15.391 16.5019 15.5667 16.5019 15.7731C16.5019 15.9795 16.4295 16.1551 16.2846 16.3C16.1295 16.4551 15.9497 16.5327 15.7452 16.5327C15.5407 16.5327 15.366 16.4551 15.2212 16.3L12 13.0634Z" })
+});
+//#endregion
+export { t as IconCheckCircle, a as IconCloseSmall, n as IconErrorOutline, i as IconInfoFilled, r as IconWarning };

package/src/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { Toast, toast, toastRecipe } from './toast';
+export type { ToastProps, ToastOptions, ToastType, ToastAction } from './toast';

package/src/toast/index.js

@@ -0,0 +1,2 @@
+import { Toast as e, toast as t, toastRecipe as n } from "./toast.js";
+export { e as Toast, t as toast, n as toastRecipe };