@rovula/ui 0.0.40 → 0.0.42

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

@@ -1,11 +1,13 @@
-import React, { FC } from "react";
+import React, { ComponentPropsWithoutRef, FC } from "react";
 import { Calendar } from "../Calendar";
+import { PopoverContent } from "../Popover/Popover";
 import { Modifiers } from "react-day-picker";
 import { InputProps } from "../TextInput/TextInput";
 type DatePickerProps = {
     date: Date | undefined;
     onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;
     textInputProps?: Partial<InputProps>;
+    popoverContentProps?: ComponentPropsWithoutRef<typeof PopoverContent>;
 } & React.ComponentPropsWithoutRef<typeof Calendar>;
 declare const DatePicker: FC<DatePickerProps>;
 export default DatePicker;

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

@@ -5,6 +5,7 @@ declare const meta: {
         date: Date | undefined;
         onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined;
         textInputProps?: Partial<import("../..").InputProps> | undefined;
+        popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
     } & import("react-day-picker").DayPickerProps>;
     tags: string[];
     parameters: {
@@ -14,6 +15,7 @@ declare const meta: {
         date: Date | undefined;
         onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void);
         textInputProps?: Partial<import("../..").InputProps> | undefined;
+        popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
         mode: "single";
         required?: false | undefined;
         className?: string | undefined;
@@ -116,6 +118,7 @@ declare const meta: {
         date: Date | undefined;
         onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: Date, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined);
         textInputProps?: Partial<import("../..").InputProps> | undefined;
+        popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
         mode: "single";
         required: true;
         className?: string | undefined;
@@ -218,6 +221,7 @@ declare const meta: {
         date: Date | undefined;
         onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: Date[] | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void);
         textInputProps?: Partial<import("../..").InputProps> | undefined;
+        popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
         mode: "multiple";
         required?: false | undefined;
         className?: string | undefined;
@@ -322,6 +326,7 @@ declare const meta: {
         date: Date | undefined;
         onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: Date[], triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void);
         textInputProps?: Partial<import("../..").InputProps> | undefined;
+        popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
         mode: "multiple";
         required: true;
         className?: string | undefined;
@@ -426,6 +431,7 @@ declare const meta: {
         date: Date | undefined;
         onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: import("react-day-picker").DateRange | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined);
         textInputProps?: Partial<import("../..").InputProps> | undefined;
+        popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
         mode: "range";
         required?: false | undefined;
         className?: string | undefined;
@@ -531,6 +537,7 @@ declare const meta: {
         date: Date | undefined;
         onSelect: ((selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined) & ((selected: import("react-day-picker").DateRange, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void);
         textInputProps?: Partial<import("../..").InputProps> | undefined;
+        popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
         mode: "range";
         required: true;
         className?: string | undefined;
@@ -636,6 +643,7 @@ declare const meta: {
         date: Date | undefined;
         onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined;
         textInputProps?: Partial<import("../..").InputProps> | undefined;
+        popoverContentProps?: Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | undefined;
         mode?: undefined;
         required?: undefined;
         className?: string | 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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactElement, ReactNode, FC } from 'react';
+import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -299,17 +299,18 @@ declare namespace Calendar {
     var displayName: string;
 }
 
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
 type DatePickerProps = {
     date: Date | undefined;
     onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React__default.MouseEvent | React__default.KeyboardEvent) => void | undefined;
     textInputProps?: Partial<InputProps>;
+    popoverContentProps?: ComponentPropsWithoutRef<typeof PopoverContent>;
 } & React__default.ComponentPropsWithoutRef<typeof Calendar>;
 declare const DatePicker: FC<DatePickerProps>;
 
-declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
-declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-
 type LoadingProps = {
     size?: number;
     color?: string;
@@ -530,7 +531,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.40",
+  "version": "0.0.42",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/DatePicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { FC, useState } from "react";
+import React, { ComponentPropsWithoutRef, FC, useState } from "react";
 import { CalendarIcon } from "@heroicons/react/16/solid";
 
 import { Calendar } from "../Calendar";
@@ -18,12 +18,14 @@ type DatePickerProps = {
     e: React.MouseEvent | React.KeyboardEvent
   ) => void | undefined;
   textInputProps?: Partial<InputProps>;
+  popoverContentProps?: ComponentPropsWithoutRef<typeof PopoverContent>;
 } & React.ComponentPropsWithoutRef<typeof Calendar>;
 
 const DatePicker: FC<DatePickerProps> = ({
   date,
   onSelect,
   textInputProps,
+  popoverContentProps,
   ...props
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -48,7 +50,7 @@ const DatePicker: FC<DatePickerProps> = ({
             />
           </div>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0">
+        <PopoverContent className="w-auto p-0 z-[100]" {...popoverContentProps}>
           <Calendar
             defaultMonth={date}
             {...props}

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>
   );
 }