@rovula/ui 0.1.3 → 0.1.5

package/dist/components/TextInput/TextInput.styles.js

@@ -37,6 +37,9 @@ export const inputVariant = cva([
         error: {
             true: "ring-input-error hover:ring-input-error focus:ring-input-error",
         },
+        warning: {
+            true: "ring-warning-stroke hover:ring-warning-stroke focus:ring-warning-stroke",
+        },
         hasClearIcon: {
             true: "",
         },
@@ -343,19 +346,23 @@ export const helperTextVariant = cva(["typography-small1 flex flex-row items-cen
             true: "text-input-error",
             false: "text-input-filled-text",
         },
+        warning: {
+            true: "text-warning",
+        },
     },
     defaultVariants: {
         size: "md",
         disabled: false,
         error: false,
+        warning: false,
     },
 });
 const iconInteractiveColorStateClasses = [
     "fill-input-default-text",
-    "peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-active:fill-input-filled-text",
+    "hover:fill-input-filled-text peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-active:fill-input-filled-text",
     "peer-disabled:fill-input-disable-stroke",
     "[&_svg]:text-input-default-text",
-    "peer-hover:[&_svg]:text-input-filled-text peer-focus:[&_svg]:text-input-filled-text peer-active:[&_svg]:text-input-filled-text",
+    "hover:[&_svg]:text-input-filled-text peer-hover:[&_svg]:text-input-filled-text peer-focus:[&_svg]:text-input-filled-text peer-active:[&_svg]:text-input-filled-text",
     "peer-disabled:[&_svg]:text-input-disable-stroke",
 ];
 export const inlineEndIconWrapperVariant = cva([
@@ -419,14 +426,17 @@ export const segmentedIconWrapperVariant = cva([
         error: {
             false: "",
         },
+        warning: {
+            false: "",
+        },
         position: {
             start: [
                 "inset-y-0 left-0 ",
-                "border-r border-r-input-default-stroke peer-hover:border-r-input-active-stroke peer-focus:border-r-input-active-stroke peer-disabled:border-r-input-disable-stroke",
+                "border-r border-r-input-default-stroke hover:border-r-input-active-stroke peer-hover:border-r-input-active-stroke peer-focus:border-r-input-active-stroke peer-disabled:border-r-input-disable-stroke",
             ],
             end: [
                 "inset-y-0 right-0 ",
-                "border-l border-l-input-default-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
+                "border-l border-l-input-default-stroke hover:border-l-input-active-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
             ],
         },
     },
@@ -473,11 +483,23 @@ export const segmentedIconWrapperVariant = cva([
             error: true,
             className: "border-l-input-error",
         },
+        // --- Warning start ---
+        {
+            position: "start",
+            warning: true,
+            className: "border-r-warning-stroke",
+        },
+        {
+            position: "end",
+            warning: true,
+            className: "border-l-warning-stroke",
+        },
     ],
     defaultVariants: {
         size: "md",
         rounded: "normal",
         error: false,
+        warning: false,
         position: "end",
     },
 });

package/dist/components/Toast/Toast.js

@@ -25,18 +25,18 @@ const ToastViewport = React.forwardRef((_a, ref) => {
 });
 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)));
+    var { className, variant, showBorder } = _a, props = __rest(_a, ["className", "variant", "showBorder"]);
+    return (_jsx(ToastPrimitives.Root, Object.assign({ ref: ref, className: cn(toastVariants({ variant, showBorder }), 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 }) })));
+    return (_jsx(ToastPrimitives.Action, Object.assign({ ref: ref, className: cn("", className) }, props, { asChild: true, children: _jsx(Button, { variant: "outline", color: "secondary", 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" }) }) })));
+    return (_jsx(ToastPrimitives.Close, Object.assign({ ref: ref, className: cn("-mr-2 self-center text-grey-light", 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) => {
@@ -46,7 +46,7 @@ const ToastTitle = React.forwardRef((_a, ref) => {
 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-input-default-text", className) }, props)));
+    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitile4 text-grey-light", className) }, props)));
 });
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };

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

@@ -11,9 +11,13 @@ const meta = {
     tags: ["autodocs"],
     parameters: {
         layout: "fullscreen",
+        backgrounds: {
+            default: "white",
+            values: [{ name: "white", value: "#ffffff" }],
+        },
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "flex  max-h-screen w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "flex max-h-screen w-full bg-white p-4", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -38,11 +42,15 @@ export const Simple = {
                 "bottom-right",
             ],
         },
+        showBorder: {
+            control: "boolean",
+        },
     },
     args: {
         variant: "default",
         contentMode: "horizontal",
         position: "top-center",
+        showBorder: false,
     },
     render: (args) => {
         console.log("args ", args);
@@ -53,11 +61,12 @@ export const Simple = {
         useEffect(() => {
             toast({
                 variant: props.variant,
+                showBorder: props.showBorder,
                 title: "Success",
                 description: "This is an Info alert — check it out!",
                 contentMode: props.contentMode,
             });
-        }, [props.variant, props.contentMode]);
+        }, [props.variant, props.contentMode, props.showBorder]);
         return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(Toaster, {}), _jsx(Button, { onClick: () => {
                         toast({
                             title: "Scheduled: Catch up",

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

@@ -1,21 +1,53 @@
 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",
+    "rounded-lg shadow-[0px_8px_16px_0px_rgba(0,0,0,0.12)] 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",
+            default: "",
+            success: "",
+            info: "",
+            warning: "",
+            error: "",
+        },
+        showBorder: {
+            true: "",
+            false: "border-transparent",
         },
     },
+    compoundVariants: [
+        {
+            variant: "default",
+            showBorder: true,
+            className: "border",
+        },
+        {
+            variant: "success",
+            showBorder: true,
+            className: "border border-success-stroke",
+        },
+        {
+            variant: "info",
+            showBorder: true,
+            className: "border border-info-stroke",
+        },
+        {
+            variant: "warning",
+            showBorder: true,
+            className: "border border-warning-stroke",
+        },
+        {
+            variant: "error",
+            showBorder: true,
+            className: "border border-error-stroke",
+        },
+    ],
     defaultVariants: {
         variant: "success",
+        showBorder: false,
     },
 });
 export const toastViewportVariants = cva(["fixed z-[1000] flex w-auto flex-col-reverse px-4"], {

package/dist/components/Toast/Toaster.js

@@ -21,6 +21,22 @@ export function Toaster(_a) {
     const { toasts, position } = useToast();
     return (_jsxs(ToastProvider, Object.assign({}, toastProviderProps, { children: [toasts.map(function (_a) {
                 var { id, title, description, action, contentMode = "horizontal", iconProps, renderIcon } = _a, props = __rest(_a, ["id", "title", "description", "action", "contentMode", "iconProps", "renderIcon"]);
-                return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: renderIcon ? (renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon()) : (_jsx(Icon, Object.assign({ type: "heroicons", name: "check-circle", className: "size-6" }, iconProps))) }), _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));
+                const defaultIconName = props.variant === "error"
+                    ? "circle-x"
+                    : props.variant === "warning"
+                        ? "circle-alert"
+                        : props.variant === "info"
+                            ? "info"
+                            : "circle-check";
+                const titleToneClass = props.variant === "error"
+                    ? "text-error"
+                    : props.variant === "warning"
+                        ? "text-warning"
+                        : props.variant === "info"
+                            ? "text-info"
+                            : props.variant === "success"
+                                ? "text-success"
+                                : "text-base-popup-foreground";
+                return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: renderIcon ? (renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon()) : (_jsx(Icon, Object.assign({ type: "lucide", name: defaultIconName, className: "size-[22px]" }, iconProps))) }), _jsxs("div", { className: cn(toastContentVariants({ contentMode }), contentClassName), children: [title && (_jsx(ToastTitle, { className: cn(titleToneClass, 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 })] })));
 }