@rovula/ui 0.0.39 → 0.0.41

package/dist/esm/types/components/Dropdown/Dropdown.d.ts

@@ -35,7 +35,7 @@ export type DropdownProps = {
         selectedOption: Options | null | undefined;
         onClick: (option: Options) => void;
     }) => ReactNode;
-} & Omit<InputProps, "value">;
+} & Omit<InputProps, "value" | "onSelect">;
 declare const Dropdown: React.ForwardRefExoticComponent<{
     id?: string | undefined;
     label?: string | undefined;
@@ -60,5 +60,5 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
         selectedOption: Options | null | undefined;
         onClick: (option: Options) => void;
     }) => ReactNode) | undefined;
-} & Omit<InputProps, "value"> & React.RefAttributes<HTMLInputElement>>;
+} & Omit<InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
 export default Dropdown;

package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts

@@ -26,7 +26,7 @@ declare const meta: {
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
         }) => React.ReactNode) | undefined;
-    } & Omit<import("../..").InputProps, "value"> & React.RefAttributes<HTMLInputElement>>;
+    } & Omit<import("../..").InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
         layout: string;
@@ -49,7 +49,7 @@ declare const meta: {
         options: Options[];
         value?: Options | undefined;
         onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
-        onSelect?: (((value: Options) => void) & React.ReactEventHandler<HTMLInputElement>) | undefined;
+        onSelect?: ((value: Options) => void) | undefined;
         renderOptions?: ((value: {
             optionsFiltered: Options[];
             selectedOption: Options | null | undefined;

package/dist/esm/types/components/Search/Search.stories.d.ts

@@ -200,7 +200,7 @@ declare const meta: {
         onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
         onMouseUp?: React.MouseEventHandler<HTMLInputElement> | undefined;
         onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
-        onSelect?: (((value: Options) => void) & React.ReactEventHandler<HTMLInputElement>) | undefined;
+        onSelect?: ((value: Options) => void) | undefined;
         onSelectCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
         onTouchCancel?: React.TouchEventHandler<HTMLInputElement> | undefined;
         onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;

package/dist/esm/types/components/Toast/Toaster.d.ts

@@ -1 +1,10 @@
-export declare function Toaster(): import("react/jsx-runtime").JSX.Element;
+type ToasterProps = {
+    viewportClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    contentClassName?: string;
+    iconWrapperClassName?: string;
+    actionWrapperClassName?: string;
+};
+export declare function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -160,7 +160,7 @@ type DropdownProps = {
         selectedOption: Options$1 | null | undefined;
         onClick: (option: Options$1) => void;
     }) => ReactNode;
-} & Omit<InputProps, "value">;
+} & Omit<InputProps, "value" | "onSelect">;
 declare const Dropdown: React__default.ForwardRefExoticComponent<{
     id?: string | undefined;
     label?: string | undefined;
@@ -185,7 +185,7 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
         selectedOption: Options$1 | null | undefined;
         onClick: (option: Options$1) => void;
     }) => ReactNode) | undefined;
-} & Omit<InputProps, "value"> & React__default.RefAttributes<HTMLInputElement>>;
+} & Omit<InputProps, "onSelect" | "value"> & React__default.RefAttributes<HTMLInputElement>>;
 
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
@@ -530,7 +530,15 @@ declare const ToastDescription: React.ForwardRefExoticComponent<Omit<ToastPrimit
 type ToastProps = React.ComponentPropsWithoutRef<typeof Toast$1>;
 type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
-declare function Toaster(): react_jsx_runtime.JSX.Element;
+type ToasterProps = {
+    viewportClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    contentClassName?: string;
+    iconWrapperClassName?: string;
+    actionWrapperClassName?: string;
+};
+declare function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, }: ToasterProps): react_jsx_runtime.JSX.Element;
 
 type ToasterToast = ToastProps & {
     id: string;

package/dist/src/theme/global.css

@@ -8485,10 +8485,6 @@ body {
   .md\:right-\[40px\] {
     right: 40px;
   }
-
-  .md\:w-auto {
-    width: auto;
-  }
 }
 
 .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Dropdown/Dropdown.tsx

@@ -56,7 +56,7 @@ export type DropdownProps = {
     selectedOption: Options | null | undefined;
     onClick: (option: Options) => void;
   }) => ReactNode;
-} & Omit<InputProps, "value">;
+} & Omit<InputProps, "value" | "onSelect">;
 
 const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
   (

package/src/components/Toast/Toast.styles.tsx

@@ -24,7 +24,7 @@ export const toastVariants = cva(
 );
 
 export const toastViewportVariants = cva(
-  ["fixed z-[100] flex w-full md:w-auto flex-col-reverse px-4"],
+  ["fixed z-[100] flex w-auto flex-col-reverse px-4"],
   {
     variants: {
       position: {

package/src/components/Toast/Toaster.tsx

@@ -12,8 +12,25 @@ import {
 import { useToast } from "./useToast";
 import Icon from "../Icon/Icon";
 import { toastContentVariants, toastIconVariants } from "./Toast.styles";
+import { cn } from "@/utils/cn";
 
-export function Toaster() {
+type ToasterProps = {
+  viewportClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  contentClassName?: string;
+  iconWrapperClassName?: string;
+  actionWrapperClassName?: string;
+};
+
+export function Toaster({
+  viewportClassName,
+  titleClassName,
+  descriptionClassName,
+  contentClassName,
+  iconWrapperClassName,
+  actionWrapperClassName,
+}: ToasterProps) {
   const { toasts, position } = useToast();
 
   return (
@@ -23,28 +40,47 @@ export function Toaster() {
         title,
         description,
         action,
-        contentMode,
+        contentMode = "horizontal",
         ...props
       }) {
         return (
           <Toast key={id} {...props}>
-            <div className={toastIconVariants({ variant: props.variant })}>
+            <div
+              className={cn(
+                toastIconVariants({ variant: props.variant }),
+                iconWrapperClassName
+              )}
+            >
               <Icon type="heroicons" name="check-circle" className="size-6" />
             </div>
-            <div className={toastContentVariants({ contentMode })}>
-              {title && <ToastTitle>{title}</ToastTitle>}
+            <div
+              className={cn(
+                toastContentVariants({ contentMode }),
+                contentClassName
+              )}
+            >
+              {title && (
+                <ToastTitle className={titleClassName}>{title}</ToastTitle>
+              )}
               {description && (
-                <ToastDescription>{description}</ToastDescription>
+                <ToastDescription className={descriptionClassName}>
+                  {description}
+                </ToastDescription>
               )}
             </div>
-            <div className="self-center ml-[var(--spacing-spacing-xl)]">
+            <div
+              className={cn(
+                "self-center ml-[var(--spacing-spacing-xl)]",
+                actionWrapperClassName
+              )}
+            >
               {action}
             </div>
             <ToastClose />
           </Toast>
         );
       })}
-      <ToastViewport position={position} />
+      <ToastViewport position={position} className={viewportClassName} />
     </ToastProvider>
   );
 }