@rovula/ui 0.0.26 → 0.0.28

package/dist/cjs/types/components/Tooltip/TooltipSimple.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+interface TooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    className?: string;
+}
+export declare function TooltipSimple({ children, content, open, defaultOpen, onOpenChange, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/types/icons/material-icon/outline/AllOutIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const AllOutIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default AllOutIcon;

package/dist/cjs/types/icons/material-icon/outline/FormatAlignCenterIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatAlignCenterIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatAlignCenterIcon;

package/dist/cjs/types/icons/material-icon/outline/FormatAlignJustifyIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatAlignJustifyIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatAlignJustifyIcon;

package/dist/cjs/types/icons/material-icon/outline/FormatAlignLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatAlignLeftIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatAlignLeftIcon;

package/dist/cjs/types/icons/material-icon/outline/FormatAlignRightIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatAlignRightIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatAlignRightIcon;

package/dist/cjs/types/icons/material-icon/outline/FormatBoldIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatBoldIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatBoldIcon;

package/dist/cjs/types/icons/material-icon/outline/FormatItalicIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatItalicIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatItalicIcon;

package/dist/cjs/types/icons/material-icon/outline/FormatListBulletedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatListBulletedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatListBulletedIcon;

package/dist/cjs/types/icons/material-icon/outline/FormatListNumberedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatListNumberedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatListNumberedIcon;

package/dist/cjs/types/icons/material-icon/outline/FormatUnderlinedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatUnderlinedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatUnderlinedIcon;

package/dist/cjs/types/icons/material-icon/outline/index.d.ts

@@ -10,3 +10,13 @@ export { default as ExpandCircleUpIcon } from "./ExpandCircleUpIcon";
 export { default as ContentCopyIcon } from "./ContentCopyIcon";
 export { default as ContentPasteIcon } from "./ContentPasteIcon";
 export { default as ChevronDownIcon } from "./ChevronDownIcon";
+export { default as FormatBoldIcon } from "./FormatBoldIcon";
+export { default as FormatItalicIcon } from "./FormatItalicIcon";
+export { default as FormatUnderlinedIcon } from "./FormatUnderlinedIcon";
+export { default as FormatAlignLeftIcon } from "./FormatAlignLeftIcon";
+export { default as FormatAlignCenterIcon } from "./FormatAlignCenterIcon";
+export { default as FormatAlignRightIcon } from "./FormatAlignRightIcon";
+export { default as FormatAlignJustifyIcon } from "./FormatAlignJustifyIcon";
+export { default as FormatListBulletedIcon } from "./FormatListBulletedIcon";
+export { default as FormatListNumberedIcon } from "./FormatListNumberedIcon";
+export { default as AllOutIcon } from "./AllOutIcon";

package/dist/cjs/types/icons/material-icon/solid/AllOutIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const AllOutIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default AllOutIcon;

package/dist/cjs/types/icons/material-icon/solid/FormatAlignCenterIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatAlignCenterIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatAlignCenterIcon;

package/dist/cjs/types/icons/material-icon/solid/FormatAlignJustifyIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatAlignJustifyIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatAlignJustifyIcon;

package/dist/cjs/types/icons/material-icon/solid/FormatAlignLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatAlignLeftIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatAlignLeftIcon;

package/dist/cjs/types/icons/material-icon/solid/FormatAlignRightIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatAlignRightIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatAlignRightIcon;

package/dist/cjs/types/icons/material-icon/solid/FormatBoldIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatBoldIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatBoldIcon;

package/dist/cjs/types/icons/material-icon/solid/FormatItalicIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatItalicIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatItalicIcon;

package/dist/cjs/types/icons/material-icon/solid/FormatListBulletedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatListBulletedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatListBulletedIcon;

package/dist/cjs/types/icons/material-icon/solid/FormatListNumberedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatListNumberedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatListNumberedIcon;

package/dist/cjs/types/icons/material-icon/solid/FormatUnderlinedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const FormatUnderlinedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default FormatUnderlinedIcon;

package/dist/cjs/types/icons/material-icon/solid/index.d.ts

@@ -10,3 +10,13 @@ export { default as ExpandCircleUpIcon } from "./ExpandCircleUpIcon";
 export { default as ContentCopyIcon } from "./ContentCopyIcon";
 export { default as ContentPasteIcon } from "./ContentPasteIcon";
 export { default as ChevronDownIcon } from "./ChevronDownIcon";
+export { default as FormatBoldIcon } from "./FormatBoldIcon";
+export { default as FormatItalicIcon } from "./FormatItalicIcon";
+export { default as FormatUnderlinedIcon } from "./FormatUnderlinedIcon";
+export { default as FormatAlignLeftIcon } from "./FormatAlignLeftIcon";
+export { default as FormatAlignCenterIcon } from "./FormatAlignCenterIcon";
+export { default as FormatAlignRightIcon } from "./FormatAlignRightIcon";
+export { default as FormatAlignJustifyIcon } from "./FormatAlignJustifyIcon";
+export { default as FormatListBulletedIcon } from "./FormatListBulletedIcon";
+export { default as FormatListNumberedIcon } from "./FormatListNumberedIcon";
+export { default as AllOutIcon } from "./AllOutIcon";

package/dist/cjs/types/index.d.ts

@@ -26,6 +26,11 @@ export * from "./components/Search/Search";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
 export * from "./components/DropdownMenu/DropdownMenu";
+export * from "./components/Tooltip/Tooltip";
+export * from "./components/Tooltip/TooltipSimple";
+export * from "./components/Toast/Toast";
+export * from "./components/Toast/Toaster";
+export * from "./components/Toast/useToast";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

package/dist/components/AlertDialog/{Alert.stories.js → AlertDialog.stories.js}

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./AlertDialog";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
-    title: "Components/Alert",
+    title: "Components/AlertDialog",
     component: AlertDialog,
     tags: ["autodocs"],
     parameters: {
@@ -26,3 +26,15 @@ export const Default = {
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { children: "Open" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Are you absolutely sure?" }), _jsx(AlertDialogDescription, { children: "This action cannot be undone. This will permanently delete your account and remove your data from our servers." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { children: "Continue" })] })] })] }) }));
     },
 };
+export const CustomStyle = {
+    args: {
+    // label: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { children: "Open" }), _jsxs(AlertDialogContent, { className: "justify-center text-center", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { className: "text-center", children: "Are you absolutely sure?" }), _jsx(AlertDialogDescription, { className: "text-center", children: "This action cannot be undone. This will permanently delete your account and remove your data from our servers." })] }), _jsxs(AlertDialogFooter, { className: "flex sm:justify-stretch", children: [_jsx(AlertDialogCancel, { className: "flex-1 justify-center", children: "Cancel" }), _jsx(AlertDialogAction, { className: "flex-1 justify-center", children: "Continue" })] })] })] }) }));
+    },
+};

package/dist/components/Checkbox/Checkbox.js

@@ -17,10 +17,11 @@ import { CheckIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 const Checkbox = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary-30 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-state-disable-solid", {
-            "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground": !props.disabled,
-            "bg-grey2-300": props.checked && props.disabled,
-        }, className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) })));
+    return (_jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer size-4 shrink-0 rounded-[var(--spacing-spacing-xxs,2px)] border border-primary ring-offset-background", "hover:border-primary-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline", {
+            "data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground": !props.disabled,
+            "hover:data-[state=checked]:border-secondary-hover hover:data-[state=checked]:bg-secondary-hover": !props.disabled,
+            "bg-state-disable-solid": props.checked && props.disabled,
+        }, className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "size-4" }) }) })));
 });
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export { Checkbox };

package/dist/components/Icon/Icon.stories.js

@@ -350,6 +350,16 @@ export const PreviewMaterialIcon = {
             "expand-circle-up",
             "content-copy",
             "content-paste",
+            "format-bold",
+            "format-italic",
+            "format-underlined",
+            "format-align-left",
+            "format-align-center",
+            "format-align-right",
+            "format-align-justify",
+            "format-list-bulleted",
+            "format-list-numbered",
+            "all-out",
         ];
         return (_jsx("div", { className: "grid grid-cols-1 gap-4 w-full h-full", children: _jsxs("div", { className: "flex flex-col justify-start gap-4 w-full h-full", children: [_jsx("h4", { children: "Material icons" }), materialIcon.map((iconName) => (_jsxs("div", { className: "flex flex-row gap-6 items-center", children: [_jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "solid", size: "sm" })), _jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "outline", size: "sm" })), _jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "outline", size: "md" })), _jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "solid", size: "md" })), _jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "outline", size: "lg" })), _jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "solid", size: "lg" })), _jsx("p", { className: "ml-4", children: iconName })] }, iconName)))] }) }));
     },

package/dist/components/Popover/Popover.js

@@ -18,7 +18,7 @@ const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef((_a, ref) => {
     var { className, align = "center", sideOffset = 4 } = _a, props = __rest(_a, ["className", "align", "sideOffset"]);
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-base-popup-highlight border-none overflow-hidden p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-surface border-none overflow-hidden p-0 text-surface-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/RadioGroup/RadioGroup.js

@@ -21,10 +21,7 @@ const RadioGroup = React.forwardRef((_a, ref) => {
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: cn("aspect-square h-4 w-4 rounded-full border text-primary disabled:fill-state-disable-solid ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:state-disable-solid", {
-            "border-primary-30 data-[state=checked]:border-primary": !props.disabled,
-            "border-state-disable-solid data-disabled:border-state-disable-solid text-state-disable-solid fill-state-disable-solid": props.disabled,
-        }, className) }, props, { children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "fill-current text-current", children: _jsx("circle", { cx: "5", cy: "5", r: "5", fill: "current" }) }) }) })));
+    return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: cn("aspect-square box-border  size-4 rounded-full border border-primary text-primary", "hover:border-primary-hover", "focus:outline-none", "data-[state=checked]:border-secondary data-[state=checked]:text-secondary", "hover:data-[state=checked]:border-secondary-hover hover:data-[state=checked]:text-secondary-hover", "data-[disabled]:border-state-disable-solid data-[disabled]:fill-state-disable-solid data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:text-state-disable-solid", className) }, props, { children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "fill-current text-current", children: _jsx("circle", { cx: "5", cy: "5", r: "5", fill: "current" }) }) }) })));
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 export { RadioGroup, RadioGroupItem };

package/dist/components/Switch/Switch.js

@@ -16,7 +16,7 @@ import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "@/utils/cn";
 const Switch = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn("peer inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-secondary-active/[0.32] data-[state=unchecked]:bg-tertiary-active/[0.32]", className) }, props, { ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block size-4 rounded-full bg-secondary-active shadow-lg ring-0", "transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:-translate-x-[2px] data-[state=unchecked]:bg-tertiary-active") }) })));
+    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn("group inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors", "data-[state=checked]:bg-secondary-active/[0.32] data-[state=unchecked]:bg-tertiary-active/[0.32]", "hover:data-[state=checked]:bg-secondary-active/[0.48] hover:data-[state=unchecked]:bg-tertiary-active/[0.48]", "data-[disabled]:cursor-not-allowed data-[disabled]:bg-state-disable-solid/[0.32] data-[disabled]:pointer-events-none ", className) }, props, { ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn(" block size-4 rounded-full bg-secondary-active shadow-lg transition-transform", "data-[state=checked]:translate-x-4 data-[state=unchecked]:-translate-x-[2px] data-[state=unchecked]:bg-tertiary-active", "group-hover:ring group-hover:data-[state=checked]:ring-secondary-hover-bg group-hover:data-[state=unchecked]:ring-tertiary-hover-bg", "group-disabled:bg-state-disable-solid") }) })));
 });
 Switch.displayName = SwitchPrimitives.Root.displayName;
 export { Switch };

package/dist/components/Text/Text.js

@@ -29,10 +29,8 @@ const textVariants = cva(["text-foreground"], {
 // montserrat: ["Montserrat", "sans-serif"],
 // poppins: ["Poppins", "sans-serif"],  font-montserrat, font-poppins
 // TODO font, fontBold, elipt
-const Text = (_a, ref) => {
+const Text = forwardRef((_a, ref) => {
     var { variant = "body1", tag: Tag = "p", children, className = "", color, style } = _a, props = __rest(_a, ["variant", "tag", "children", "className", "color", "style"]);
     return (_jsx(Tag, Object.assign({ ref: ref, className: cn(`typography-${variant}`, textVariants({ color }), className), style: style }, props, { children: children })));
-};
-const ForwardedText = forwardRef(Text);
-ForwardedText.displayName = "Text";
-export default ForwardedText;
+});
+export default Text;

package/dist/components/Toast/Toast.js

@@ -0,0 +1,52 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cn } from "@/utils/cn";
+import Icon from "../Icon/Icon";
+import { toastVariants, toastViewportVariants } from "./Toast.styles";
+import ActionButton from "../ActionButton/ActionButton";
+import Button from "../Button/Button";
+const ToastProvider = ToastPrimitives.Provider;
+const ToastViewport = React.forwardRef((_a, ref) => {
+    var { className, position } = _a, props = __rest(_a, ["className", "position"]);
+    return (_jsx(ToastPrimitives.Viewport, Object.assign({ ref: ref, className: cn(toastViewportVariants({ position }), className) }, props)));
+});
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+const Toast = React.forwardRef((_a, ref) => {
+    var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
+    return (_jsx(ToastPrimitives.Root, Object.assign({ ref: ref, className: cn(toastVariants({ variant }), className) }, props)));
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+const ToastAction = React.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsx(ToastPrimitives.Action, Object.assign({ ref: ref, className: cn("", className) }, props, { asChild: true, children: _jsx(Button, { variant: "outline", size: "sm", children: children }) })));
+});
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+const ToastClose = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(ToastPrimitives.Close, Object.assign({ ref: ref, className: cn("-mr-2 self-center text-input-default-text", className), "toast-close": "" }, props, { asChild: true, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(Icon, { type: "heroicons", name: "xmark" }) }) })));
+});
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+const ToastTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(ToastPrimitives.Title, Object.assign({ ref: ref, className: cn("typography-subtitile6", className) }, props)));
+});
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+const ToastDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitile5 text-text-grey-dark", className) }, props)));
+});
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };

package/dist/components/Toast/Toast.stories.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Toast, ToastAction } from "./Toast";
+import { Toaster } from "./Toaster";
+import { useToast } from "./useToast";
+import Button from "../Button/Button";
+const meta = {
+    title: "Components/Toast",
+    component: Toast,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "flex  max-h-screen w-full", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Simple = {
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["default", "success", "info", "warning", "error"],
+        },
+        contentMode: {
+            control: "select",
+            options: ["horizontal", "vertical"],
+        },
+        position: {
+            control: "select",
+            options: [
+                "top-center",
+                "top-left",
+                "top-right",
+                "bottom-center",
+                "bottom-left",
+                "bottom-right",
+            ],
+        },
+    },
+    args: {
+        variant: "default",
+        contentMode: "horizontal",
+        position: "top-center",
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        const { toast } = useToast({
+            position: props.position,
+        });
+        useEffect(() => {
+            toast({
+                variant: props.variant,
+                title: "Success",
+                description: "This is an Info alert — check it out!",
+                contentMode: props.contentMode,
+            });
+        }, [props.variant, props.contentMode]);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(Toaster, {}), _jsx(Button, { onClick: () => {
+                        toast({
+                            title: "Scheduled: Catch up",
+                            description: "Friday, February 10, 2023 at 5:57 PM",
+                        });
+                    }, children: "Show Toast" })] }));
+    },
+};
+export const WithAction = {
+    args: {},
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        const { toast } = useToast();
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(Toaster, {}), _jsx(Button, { onClick: () => {
+                        toast({
+                            title: "Uh oh! Something went wrong.",
+                            description: "There was a problem with your request.",
+                            action: (_jsx(ToastAction, { altText: "Try again", onClick: () => alert("My action"), children: "Try again" })),
+                        });
+                    }, children: "Show Toast" })] }));
+    },
+};

package/dist/components/Toast/Toast.styles.js

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+export const toastVariants = cva([
+    "group pointer-events-auto relative flex w-full",
+    "rounded-md shadow-lg px-4 py-3 gap-1",
+    "transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+    "bg-base-popup text-base-popup-foreground",
+], {
+    variants: {
+        variant: {
+            default: "border",
+            success: "border border-success-stroke",
+            info: "border border-info-stroke",
+            warning: "border border-warning-stroke",
+            error: "border border-error-stroke",
+        },
+    },
+    defaultVariants: {
+        variant: "success",
+    },
+});
+export const toastViewportVariants = cva(["fixed z-[100] flex w-full md:w-auto flex-col-reverse px-4"], {
+    variants: {
+        position: {
+            "top-center": "top-[40px] left-0 right-0 justify-self-center",
+            "top-left": "top-[40px] left-0 md:left-[40px]",
+            "top-right": "top-[40px] right-0 md:right-[40px]",
+            "bottom-center": "bottom-[40px] left-0 right-0 justify-self-center",
+            "bottom-left": "bottom-[40px] left-0 md:left-[40px]",
+            "bottom-right": "bottom-[40px] right-0 md:right-[40px]",
+        },
+    },
+    defaultVariants: {
+        position: "top-center",
+    },
+});
+export const toastIconVariants = cva(["flex items-center justify-center mr-2 rounded-full size-7"], {
+    variants: {
+        variant: {
+            default: "",
+            success: "bg-success-transparent-8 text-success",
+            info: "bg-info-transparent-8 text-info",
+            warning: "bg-warning-transparent-8 text-warning",
+            error: "bg-error-transparent-8 text-error",
+        },
+    },
+    defaultVariants: {
+        variant: "success",
+    },
+});
+export const toastContentVariants = cva(["flex flex-1"], {
+    variants: {
+        contentMode: {
+            horizontal: "items-center flex-row gap-2",
+            vertical: "flex-col gap-[2px]",
+        },
+    },
+    defaultVariants: {
+        contentMode: "vertical",
+    },
+});

package/dist/components/Toast/Toaster.js

@@ -0,0 +1,24 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, } from "./Toast";
+import { useToast } from "./useToast";
+import Icon from "../Icon/Icon";
+import { toastContentVariants, toastIconVariants } from "./Toast.styles";
+export function Toaster() {
+    const { toasts, position } = useToast();
+    return (_jsxs(ToastProvider, { children: [toasts.map(function (_a) {
+                var { id, title, description, action, contentMode } = _a, props = __rest(_a, ["id", "title", "description", "action", "contentMode"]);
+                return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: toastIconVariants({ variant: props.variant }), children: _jsx(Icon, { type: "heroicons", name: "check-circle", className: "size-6" }) }), _jsxs("div", { className: toastContentVariants({ contentMode }), children: [title && _jsx(ToastTitle, { children: title }), description && (_jsx(ToastDescription, { children: description }))] }), _jsx("div", { className: "self-center ml-[var(--spacing-spacing-xl)]", children: action }), _jsx(ToastClose, {})] }), id));
+            }), _jsx(ToastViewport, { position: position })] }));
+}

package/dist/components/Toast/useToast.js

@@ -0,0 +1,121 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Inspired by react-hot-toast library
+import * as React from "react";
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 6000;
+const actionTypes = {
+    ADD_TOAST: "ADD_TOAST",
+    UPDATE_TOAST: "UPDATE_TOAST",
+    DISMISS_TOAST: "DISMISS_TOAST",
+    REMOVE_TOAST: "REMOVE_TOAST",
+    ADD_POSITION: "ADD_POSITION",
+};
+let count = 0;
+function genId() {
+    count = (count + 1) % Number.MAX_SAFE_INTEGER;
+    return count.toString();
+}
+const toastTimeouts = new Map();
+const addToRemoveQueue = (toastId) => {
+    if (toastTimeouts.has(toastId)) {
+        return;
+    }
+    const timeout = setTimeout(() => {
+        toastTimeouts.delete(toastId);
+        dispatch({
+            type: "REMOVE_TOAST",
+            toastId: toastId,
+        });
+    }, TOAST_REMOVE_DELAY);
+    toastTimeouts.set(toastId, timeout);
+};
+export const reducer = (state, action) => {
+    switch (action.type) {
+        case "ADD_TOAST":
+            return Object.assign(Object.assign({}, state), { toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT) });
+        case "UPDATE_TOAST":
+            return Object.assign(Object.assign({}, state), { toasts: state.toasts.map((t) => t.id === action.toast.id ? Object.assign(Object.assign({}, t), action.toast) : t) });
+        case "DISMISS_TOAST": {
+            const { toastId } = action;
+            // ! Side effects ! - This could be extracted into a dismissToast() action,
+            // but I'll keep it here for simplicity
+            if (toastId) {
+                addToRemoveQueue(toastId);
+            }
+            else {
+                state.toasts.forEach((toast) => {
+                    addToRemoveQueue(toast.id);
+                });
+            }
+            return Object.assign(Object.assign({}, state), { toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined
+                    ? Object.assign(Object.assign({}, t), { open: false }) : t) });
+        }
+        case "REMOVE_TOAST":
+            if (action.toastId === undefined) {
+                return Object.assign(Object.assign({}, state), { toasts: [] });
+            }
+            return Object.assign(Object.assign({}, state), { toasts: state.toasts.filter((t) => t.id !== action.toastId) });
+        case "ADD_POSITION":
+            return Object.assign(Object.assign({}, state), { position: action.position });
+    }
+};
+const listeners = [];
+let memoryState = { toasts: [], position: undefined };
+function dispatch(action) {
+    memoryState = reducer(memoryState, action);
+    listeners.forEach((listener) => {
+        listener(memoryState);
+    });
+}
+function toast(_a) {
+    var props = __rest(_a, []);
+    const id = genId();
+    const update = (props) => dispatch({
+        type: "UPDATE_TOAST",
+        toast: Object.assign(Object.assign({}, props), { id }),
+    });
+    const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+    dispatch({
+        type: "ADD_TOAST",
+        toast: Object.assign(Object.assign({}, props), { id, open: true, onOpenChange: (open) => {
+                if (!open)
+                    dismiss();
+            } }),
+    });
+    return {
+        id: id,
+        dismiss,
+        update,
+    };
+}
+function useToast(options) {
+    const [state, setState] = React.useState(memoryState);
+    React.useEffect(() => {
+        listeners.push(setState);
+        return () => {
+            const index = listeners.indexOf(setState);
+            if (index > -1) {
+                listeners.splice(index, 1);
+            }
+        };
+    }, [state]);
+    React.useEffect(() => {
+        dispatch({
+            type: "ADD_POSITION",
+            position: options === null || options === void 0 ? void 0 : options.position,
+        });
+    }, [options === null || options === void 0 ? void 0 : options.position]);
+    return Object.assign(Object.assign({}, state), { toast, dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId }) });
+}
+export { useToast, toast };