Barata-Ribeiro · Aug 9, 2026 · Aug 8, 2026 · Aug 8, 2026 · Aug 9, 2026 · Aug 9, 2026
diff --git a/README.md b/README.md
@@ -27,13 +27,13 @@ Demo: https://utilities-webapp.vercel.app/
 
 - **Converters**: bytes, length, mass, speed, temperature, time
 - **Calculators**: General, BMI, Dates, GCF/LCM, Percentage, Rule of Three
-- **Utilities**: Character Counter, Lorem Ipsum, Meme Generator, Password Generator(random, memorable, pin), QR Code Generator,
+- **Utilities**: Character Counter, Dice Roller (including Vampire: The Masquerade v5), Lorem Ipsum, Meme Generator, Password Generator(random, memorable, pin), QR Code Generator,
   Roman Converter, Text to Speech, URL Slug Generator
 - **Programming Utilities**: Image to Base64
-- Light/dark theme switching (`next-themes`)
+- Light/dark theme switching (through cookies and `useTheme` hook)
 - Responsive layout with accessible UI primitives (Base UI + custom shadcn/ui components)
 - Project built with modern tooling: Vite.js, React, TypeScript, Tailwind and ESLint/Prettier
-- Service Worker for offline support (experimental) and PWA features (workbox)
+- Service Worker for offline support (experimental) and PWA features (Serwist)
 
 MORE TO COME...
 
@@ -91,4 +91,4 @@ Feel free to contact me with any questions or if you are interested in collabora
 
 ## 📜 License
 
-This project is free software available under the [GPLv3](LICENSE) license.
+This project is free software available under the [GPLv3](LICENSE) license.
diff --git a/app/components/pages/utilities/dice-roller/generic-dice-roller.tsx b/app/components/pages/utilities/dice-roller/generic-dice-roller.tsx
@@ -1,4 +1,4 @@
-import { InfoIcon, PlayIcon, RefreshCwIcon } from 'lucide-react';
+import { PlayIcon, RefreshCwIcon } from 'lucide-react';
 import type { MouseEvent } from 'react';
 import { Fragment, useState, useTransition } from 'react';
 import DiceRollCounterBadge from '~/components/pages/utilities/dice-roller/helpers/dice-roll-counter.badge';
@@ -15,8 +15,7 @@ import { Button } from '~/components/ui/button';
 import { ButtonGroup } from '~/components/ui/button-group';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card';
 import { Dialog, DialogContent, DialogHeader } from '~/components/ui/dialog';
-import { InputGroupAddon, InputGroupButton } from '~/components/ui/input-group';
-import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover';
+import { InputGroup, InputGroupAddon } from '~/components/ui/input-group';
 import { Separator } from '~/components/ui/separator';
 import { Tooltip, TooltipContent, TooltipTrigger } from '~/components/ui/tooltip';
 import useIsMobile from '~/hooks/use-mobile';
@@ -145,46 +144,24 @@ export default function GenericDiceRoller() {
                             id="modifier-input"
                             name="modifier-input"
                             aria-label="Modifier input"
-                            className="flex-1 md:max-w-44"
-                            value={modifier}
+                            className="flex-1 focus-within:rounded-md focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0 focus-within:has-aria-invalid:border-destructive focus-within:has-aria-invalid:ring-destructive/20 md:max-w-44"
                             min={-100}
                             max={100}
-                            step={1}
+                            smallStep={1}
+                            largeStep={5}
+                            value={modifier}
                             onValueChange={(value) => setModifier(Number(value))}
                         >
-                            <NumberFieldGroup>
-                                <Popover>
-                                    <PopoverTrigger
-                                        nativeButton={false}
-                                        render={
-                                            <InputGroupAddon>
-                                                <InputGroupButton
-                                                    variant="secondary"
-                                                    size="icon-xs"
-                                                    className="rounded-full p-1!"
-                                                >
-                                                    <InfoIcon aria-hidden />
-                                                </InputGroupButton>
-                                            </InputGroupAddon>
-                                        }
-                                    />
-                                    <PopoverContent align="start" className="flex flex-col gap-1 rounded-xl text-sm">
-                                        <p className="font-medium">Modifiers</p>
-                                        <p>
-                                            Use these modifiers to adjust your dice rolls. You can add or subtract
-                                            values as needed. Check your game rules for more details.
-                                        </p>
-                                    </PopoverContent>
-                                </Popover>
-                                <NumberFieldScrubArea
-                                    className="pl-1.5 text-muted-foreground"
-                                    labelClassName="font-sans"
-                                    label="Mod."
-                                />
-                                <NumberFieldInput className="md:text-left" />
-                                <NumberFieldDecrement className="rounded-none!" />
-                                <NumberFieldIncrement />
-                            </NumberFieldGroup>
+                            <InputGroup className="w-full flex-1">
+                                <InputGroupAddon>
+                                    <NumberFieldScrubArea label="Mod." labelClassName="font-sans" />
+                                </InputGroupAddon>
+                                <NumberFieldGroup className="ml-2 border-none focus-within:ring-0 focus-within:ring-offset-0">
+                                    <NumberFieldInput className="min-w-12 md:text-left" />
+                                    <NumberFieldDecrement aria-label="Decrement" className="rounded-none!" />
+                                    <NumberFieldIncrement aria-label="Increment" />
+                                </NumberFieldGroup>
+                            </InputGroup>
                         </NumberField>
 
                         <Separator orientation={isMobile ? 'horizontal' : 'vertical'} />

diff --git a/app/components/reui/number-field.tsx b/app/components/reui/number-field.tsx
@@ -4,6 +4,7 @@ import { cva } from 'class-variance-authority';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useId, useMemo } from 'react';
 
+import { ClassValue } from 'clsx';
 import { MinusIcon, PlusIcon } from 'lucide-react';
 import { Label } from '~/components/ui/label';
 import { cn } from '~/lib/utils';
@@ -125,7 +126,7 @@ function NumberFieldDecrement({
             data-slot="number-field-decrement"
             {...props}
         >
-            {children ?? <MinusIcon />}
+            {children ?? <MinusIcon aria-hidden />}
         </NumberFieldPrimitive.Decrement>
     );
 }
@@ -151,7 +152,7 @@ function NumberFieldIncrement({
             data-slot="number-field-increment"
             {...props}
         >
-            {children ?? <PlusIcon />}
+            {children ?? <PlusIcon aria-hidden />}
         </NumberFieldPrimitive.Increment>
     );
 }
@@ -183,7 +184,7 @@ function NumberFieldScrubArea({
     ...props
 }: NumberFieldPrimitive.ScrubArea.Props & {
     label: string;
-    labelClassName?: string;
+    labelClassName?: ClassValue;
 }) {
     const context = useContext(NumberFieldContext);
     if (!context) {
@@ -200,7 +201,7 @@ function NumberFieldScrubArea({
                 {label}
             </Label>
             <NumberFieldPrimitive.ScrubAreaCursor className="drop-shadow-[0_1px_1px_#0008] filter">
-                <CursorGrowIcon />
+                <CursorGrowIcon aria-hidden />
             </NumberFieldPrimitive.ScrubAreaCursor>
         </NumberFieldPrimitive.ScrubArea>
     );

diff --git a/package.json b/package.json
@@ -39,19 +39,19 @@
         "isbot": "^5.2.1",
         "konva": "^10.3.0",
         "lodash": "^4.18.1",
-        "lucide-react": "^1.28.0",
+        "lucide-react": "^1.30.0",
         "mathjs": "^15.2.0",
         "optional": "^0.1.4",
         "qrcode": "^1.5.4",
         "react": "^19.2.8",
         "react-colorful": "^5.8.0",
         "react-day-picker": "^10.0.1",
         "react-dom": "^19.2.8",
-        "react-dropzone": "^20.0.0",
-        "react-hook-form": "^7.84.0",
+        "react-dropzone": "^20.1.0",
+        "react-hook-form": "^7.85.0",
         "react-konva": "^19.2.5",
         "react-router": "8.3.0",
-        "shadcn": "^4.16.1",
+        "shadcn": "^4.16.2",
         "tailwind-merge": "^3.6.0",
         "tw-animate-css": "^1.4.0",
         "zod": "^4.4.3"
@@ -63,7 +63,7 @@
         "@tailwindcss/vite": "^4.3.3",
         "@types/convert-source-map": "^2.0.3",
         "@types/lodash": "^4.17.25",
-        "@types/node": "^26.1.2",
+        "@types/node": "^26.2.0",
         "@types/qrcode": "^1.5.6",
         "@types/react": "^19.2.18",
         "@types/react-dom": "^19.2.4",
@@ -75,7 +75,7 @@
         "serwist": "^9.5.12",
         "tailwindcss": "^4.3.3",
         "typescript": "^6.0.3",
-        "vite": "^8.2.0",
+        "vite": "^8.2.1",
         "vite-plugin-devtools-json": "^1.1.0",
         "vitest": "^4.1.10",
         "vitest-browser-react": "^2.2.0"