lecom-ui 5.2.12 → 5.2.13

package/dist/sidebar.js

@@ -0,0 +1,188 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, forwardRef, useState, useEffect, Children, isValidElement, cloneElement, useContext } from 'react';
+import { ReactSVG } from 'react-svg';
+import { cn } from './lib/utils.js';
+import { Skeleton } from './skeleton.js';
+import { Tooltip, TooltipTrigger } from './tooltip.js';
+
+const SideBarContext = createContext({
+  isCollapsed: false,
+  isLoading: false
+});
+function useSideBarContext() {
+  const context = useContext(SideBarContext);
+  if (!context) {
+    throw new Error("Erro ao renderizar SideBar.");
+  }
+  return context;
+}
+const SideBarProvider = ({
+  isCollapsed,
+  isLoading,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(SideBarContext.Provider, { value: { isCollapsed, isLoading }, children });
+};
+const Sidebar = forwardRef(
+  ({
+    isCollapsed,
+    isLoading = false,
+    children,
+    className,
+    shouldHideOnResize = true
+  }, ref) => {
+    const [isHidden, setIsHidden] = useState(false);
+    useEffect(() => {
+      const handleResize = () => {
+        if (shouldHideOnResize && window.innerWidth <= 768 && isCollapsed) {
+          setIsHidden(true);
+        } else {
+          setIsHidden(false);
+        }
+      };
+      window.addEventListener("resize", handleResize);
+      handleResize();
+      return () => {
+        window.removeEventListener("resize", handleResize);
+      };
+    }, [shouldHideOnResize, isCollapsed]);
+    return /* @__PURE__ */ jsx(SideBarProvider, { isCollapsed, isLoading, children: /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref,
+        className: cn(
+          `bg-white h-screen fixed left-0 top-[50px] z-[9998] shadow border-r-1 transition-all duration-200 ease-in-out`,
+          {
+            "w-[50px]": isCollapsed,
+            "w-[300px]": !isCollapsed,
+            hidden: isHidden
+          },
+          className
+        ),
+        id: "sidebar",
+        children: /* @__PURE__ */ jsx(
+          "nav",
+          {
+            className: `flex h-auto pt-6 w-full items-center overflow-hidden`,
+            children: Children.map(children, (child) => {
+              if (isValidElement(child)) {
+                return cloneElement(child, {
+                  isCollapsed,
+                  isLoading
+                });
+              } else {
+                return child;
+              }
+            })
+          }
+        )
+      }
+    ) });
+  }
+);
+Sidebar.displayName = "Sidebar";
+const SidebarItem = forwardRef(
+  ({ currentPath, menuItems = [], className, target, side }, ref) => {
+    const { isCollapsed, isLoading } = useSideBarContext();
+    const [selectedItem, setSelectedItem] = useState(() => currentPath);
+    return /* @__PURE__ */ jsx("ul", { className: cn(`flex flex-col w-full gap-2 items-center`), children: isLoading ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2 w-full"), children: Array.from({ length: menuItems.length }, (_, index) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        className: "flex items-center justify-center h-10 rounded-sm w-full",
+        children: /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: cn(
+              "relative flex justify-center items-center w-full h-10 overflow-hidden",
+              {
+                "m-2": !isCollapsed,
+                "m-1": isCollapsed
+              }
+            ),
+            children: /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                className: cn(
+                  "absolut h-6 rounded-sm w-11/12 animate-loading drop-shadow-2xl",
+                  {
+                    "m-2": !isCollapsed,
+                    "m-1": isCollapsed
+                  }
+                )
+              }
+            )
+          }
+        )
+      },
+      index
+    )) }) : menuItems.map((item, index) => {
+      const IconComponent = item.icon;
+      return /* @__PURE__ */ jsx(
+        "li",
+        {
+          ref,
+          className: cn(
+            `flex items-center justify-center text-gray-500 rounded-sm transition-colors duration-200 h-10 leading-8 px-2`,
+            {
+              "bg-dodgerblue hover:bg-electricblue": selectedItem === item.href,
+              "hover:bg-gray-scale12": selectedItem !== item.href
+            },
+            className
+          ),
+          onClick: () => setSelectedItem(item.href),
+          style: { width: "calc(100% - 10px)" },
+          children: isCollapsed ? /* @__PURE__ */ jsx(Tooltip, { title: item.label, side, className: "ml-3", children: /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: cn(
+                `flex items-center w-full font-semibold leading-4`,
+                {
+                  "text-letterblue": selectedItem === item.href,
+                  "text-gray-scale60 hover:text-black": selectedItem !== item.href
+                }
+              ),
+              href: item.href,
+              "aria-label": item.label,
+              target,
+              children: /* @__PURE__ */ jsx("div", { className: "flex items-center w-6 justify-center", children: typeof item.icon === "string" ? /* @__PURE__ */ jsx(ReactSVG, { src: item.icon, className: "w-6 h-6" }) : /* @__PURE__ */ jsx(IconComponent, { className: "w-6 h-6" }) })
+            }
+          ) }) }) : /* @__PURE__ */ jsxs(
+            "a",
+            {
+              className: cn(
+                `flex items-center w-full font-semibold leading-4`,
+                {
+                  "text-letterblue": selectedItem === item.href,
+                  "text-gray-scale60 hover:text-black": selectedItem !== item.href
+                }
+              ),
+              href: item.href,
+              "aria-label": item.label,
+              target,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "flex items-center w-6 justify-center", children: typeof item.icon === "string" ? /* @__PURE__ */ jsx(ReactSVG, { src: item.icon, className: "w-6 h-6" }) : /* @__PURE__ */ jsx(IconComponent, { className: "w-6 h-6" }) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "ml-6 transition-opacity duration-1 ease-in-out text-[#7A7A7A]",
+                      {
+                        "opacity-0 duration-75": isCollapsed,
+                        "opacity-100 duration-500": !isCollapsed
+                      }
+                    ),
+                    children: item.label
+                  }
+                )
+              ]
+            }
+          )
+        },
+        index
+      );
+    }) });
+  }
+);
+SidebarItem.displayName = "SidebarItem";
+
+export { SideBarProvider, Sidebar, SidebarItem };

package/dist/skeleton.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from './lib/utils.js';
+
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("animate-pulse rounded-md bg-primary/10", className),
+      ...props
+    }
+  );
+}
+
+export { Skeleton };

package/dist/slider.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cn } from './lib/utils.js';
+
+const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

package/dist/status-screen.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LogOutIcon } from 'lucide-react';
+import { AccessDenied } from './ilustrations/access_denied.js';
+import { PageNotFound } from './ilustrations/page_not_found.js';
+import { cn } from './lib/utils.js';
+import { Button } from './button.js';
+import { IconHandler } from './icon-handler.js';
+
+const StatusScreen = ({
+  imageUrl = "",
+  title,
+  paragraf_one,
+  paragraf_two,
+  type,
+  buttonText = "",
+  buttonIcon,
+  onActionClick,
+  className,
+  children
+}) => {
+  const defaultImage = {
+    "403": {
+      imageUrl: AccessDenied
+    },
+    "404": {
+      imageUrl: PageNotFound
+    }
+  };
+  const errorMessage = type ? defaultImage[type] : void 0;
+  const buttonBack = () => /* @__PURE__ */ jsxs(
+    Button,
+    {
+      className: "flex gap-2 mt-8 p-6 bg-buttonblue text-white rounded transition duration-300 ease-in-out hover:brightness-150 hover:delay-150",
+      onClick: onActionClick,
+      children: [
+        buttonIcon ? buttonIcon : /* @__PURE__ */ jsx(LogOutIcon, { className: "transform rotate-180 w-5 h-5" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[18px]", children: buttonText })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col justify-center items-center gap-10 bg-white pt-[calc(75px+59px)] max-h-full max-w-full",
+        className
+      ),
+      children: [
+        !imageUrl && errorMessage && errorMessage.imageUrl ? /* @__PURE__ */ jsx(
+          IconHandler,
+          {
+            icon: errorMessage.imageUrl,
+            className: "w-auto h-full",
+            width: "600px",
+            height: "550px"
+          }
+        ) : imageUrl,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center w-full max-w-8xl text-gray-scale29 font-normal", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-4 text-[20px] flex flex-wrap", children: paragraf_one }),
+          paragraf_two !== "" && /* @__PURE__ */ jsx("p", { className: "text-[20px] flex flex-wrap", children: paragraf_two }),
+          type && (type === "403" || type === "404") && buttonBack(),
+          children
+        ] })
+      ]
+    }
+  );
+};
+StatusScreen.displayName = "StatusScreen";
+
+export { StatusScreen };

package/dist/switch.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { cn } from './lib/utils.js';
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm 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-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/dist/table.js

@@ -0,0 +1,83 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from './lib/utils.js';
+
+const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto scrollbar-thin", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/tabs.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from './lib/utils.js';
+
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/tag.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { cn } from './lib/utils.js';
+
+const tagVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-default/30 bg-default/10 text-default",
+        magenta: "border-magenta/30 bg-magenta/10 text-magenta",
+        red: "border-red/30 bg-red/10 text-red",
+        volcano: "border-volcano/30 bg-volcano/10 text-volcano",
+        orange: "border-orange/30 bg-orange/10 text-orange",
+        gold: "border-gold/30 bg-gold/10 text-gold",
+        lime: "border-lime/30 bg-lime/10 text-lime",
+        green: "border-green/30 bg-green/10 text-green",
+        cyan: "border-cyan/30 bg-cyan/10 text-cyan",
+        blue: "border-blue/30 bg-blue/10 text-blue",
+        geekblue: "border-geekblue/30 bg-geekblue/10 text-geekblue",
+        purple: "border-purple/30 bg-purple/10 text-purple"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Tag({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(tagVariants({ variant }), className), ...props });
+}
+
+export { Tag, tagVariants };

package/dist/textarea.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from './lib/utils.js';
+
+const Textarea = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/dist/toast.js

@@ -0,0 +1,105 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva } from 'class-variance-authority';
+import { XIcon } from 'lucide-react';
+import { cn } from './lib/utils.js';
+
+const ToastProvider = ({ ...props }) => {
+  return /* @__PURE__ */ jsx(ToastPrimitives.Provider, { ...props });
+};
+ToastProvider.displayName = ToastPrimitives.Provider.displayName;
+const ToastViewport = React.forwardRef(({ className, swipeDirectionY = "bottom", swipeDirectionX = "left", ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed top-0 z-[9998] flex max-h-screen w-full flex-col-reverse p-4 sm:flex-col md:max-w-[420px]",
+      {
+        "sm:bottom-4 sm:left-2 sm:top-auto": swipeDirectionX === "left" && swipeDirectionY === "bottom",
+        "sm:top-2 sm:left-2 sm:bottom-auto": swipeDirectionX === "left" && swipeDirectionY === "top",
+        "sm:bottom-4 sm:right-2 sm:top-auto": swipeDirectionX === "right" && swipeDirectionY === "bottom",
+        "sm:top-2 sm:right-2 sm:bottom-auto": swipeDirectionX === "right" && swipeDirectionY === "top"
+      },
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg 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",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive: "destructive group border-red-dark bg-red-dark text-destructive-foreground",
+        success: "success group border-brand-green-foreground bg-brand-green text-neutral-50",
+        info: "info group border-blue-dark bg-blue-dark text-neutral-50",
+        alert: "alert group border-yellow-dark bg-yellow-dark text-neutral-50"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitives.Root,
+    {
+      ref,
+      className: cn(toastVariants({ variant }), className),
+      ...props
+    }
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Action,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Close,
+  {
+    "aria-label": "Close",
+    ref,
+    className: cn(
+      "absolute right-1 top-1 rounded-md p-1 text-white opacity-80 transition-opacity focus:outline-none focus:ring-transparent hover:opacity-100",
+      className
+    ),
+    "toast-close": "T",
+    ...props,
+    children: /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4", strokeWidth: "3" })
+  }
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Title,
+  {
+    ref,
+    className: cn("text-base font-semibold [&+div]:text-xs", className),
+    ...props
+  }
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+const ToastDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Description,
+  {
+    ref,
+    style: { fontSize: "14px" },
+    className: cn("opacity-90", className),
+    ...props
+  }
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport };

package/dist/toaster.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from './lib/utils.js';
+import { ToastProvider, Toast, ToastTitle, ToastDescription, ToastClose, ToastViewport } from './toast.js';
+import { useToast } from './use-toast.js';
+
+function Toaster({ swipeDirectionY = "bottom", swipeDirectionX = "left" }) {
+  const { toasts } = useToast();
+  return /* @__PURE__ */ jsxs(ToastProvider, { children: [
+    toasts.map(function({ id, title, description, action, ...props }) {
+      return /* @__PURE__ */ jsxs(Toast, { ...props, children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+          title && /* @__PURE__ */ jsx(ToastTitle, { children: title }),
+          description && /* @__PURE__ */ jsx(ToastDescription, { className: cn({ "px-1 py-1 min-w-full": !title }), children: description })
+        ] }),
+        action,
+        /* @__PURE__ */ jsx(ToastClose, {})
+      ] }, id);
+    }),
+    /* @__PURE__ */ jsx(ToastViewport, { swipeDirectionX, swipeDirectionY })
+  ] });
+}
+
+export { Toaster };