@rovula/ui 0.0.40 → 0.0.42

package/dist/cjs/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/cjs/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/cjs/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/components/DatePicker/DatePicker.js

@@ -18,12 +18,12 @@ import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
 import { TextInput } from "../TextInput/TextInput";
 import { format } from "date-fns/format";
 const DatePicker = (_a) => {
-    var { date, onSelect, textInputProps } = _a, props = __rest(_a, ["date", "onSelect", "textInputProps"]);
+    var { date, onSelect, textInputProps, popoverContentProps } = _a, props = __rest(_a, ["date", "onSelect", "textInputProps", "popoverContentProps"]);
     const [isOpen, setIsOpen] = useState(false);
     return (_jsx("div", { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, Object.assign({ fullwidth: true, id: "2" // TODO
-                            , readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit", className: "cursor-pointer" }) }, textInputProps)) }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, Object.assign({ defaultMonth: date }, props, { mode: "single", selected: date, onSelect: (...value) => {
+                            , readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit", className: "cursor-pointer" }) }, textInputProps)) }) }), _jsx(PopoverContent, Object.assign({ className: "w-auto p-0 z-[100]" }, popoverContentProps, { children: _jsx(Calendar, Object.assign({ defaultMonth: date }, props, { mode: "single", selected: date, onSelect: (...value) => {
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(...value);
                             setIsOpen(false);
-                        } })) })] }) }));
+                        } })) }))] }) }));
 };
 export default DatePicker;

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

@@ -18,7 +18,7 @@ export const toastVariants = cva([
         variant: "success",
     },
 });
-export const toastViewportVariants = cva(["fixed z-[100] flex w-full md:w-auto flex-col-reverse px-4"], {
+export const toastViewportVariants = cva(["fixed z-[100] flex w-auto flex-col-reverse px-4"], {
     variants: {
         position: {
             "top-center": "top-[40px] left-0 right-0 justify-self-center",

package/dist/components/Toast/Toaster.js

@@ -15,10 +15,11 @@ import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastVi
 import { useToast } from "./useToast";
 import Icon from "../Icon/Icon";
 import { toastContentVariants, toastIconVariants } from "./Toast.styles";
-export function Toaster() {
+import { cn } from "@/utils/cn";
+export function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, }) {
     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 })] }));
+                var { id, title, description, action, contentMode = "horizontal" } = _a, props = __rest(_a, ["id", "title", "description", "action", "contentMode"]);
+                return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: _jsx(Icon, { type: "heroicons", name: "check-circle", className: "size-6" }) }), _jsxs("div", { className: cn(toastContentVariants({ contentMode }), contentClassName), children: [title && (_jsx(ToastTitle, { className: titleClassName, children: title })), description && (_jsx(ToastDescription, { className: descriptionClassName, children: description }))] }), _jsx("div", { className: cn("self-center ml-[var(--spacing-spacing-xl)]", actionWrapperClassName), children: action }), _jsx(ToastClose, {})] }), id));
+            }), _jsx(ToastViewport, { position: position, className: viewportClassName })] }));
 }

package/dist/esm/bundle.css

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