@dilipod/ui 0.4.25 → 0.4.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.4.25",
+  "version": "0.4.26",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",

package/src/components/button.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer',
   {
     variants: {
       variant: {

package/src/components/date-range-picker.tsx

@@ -124,7 +124,7 @@ const DateRangeSelect = React.forwardRef<HTMLSelectElement, DateRangeSelectProps
         value={value}
         onChange={(e) => onChange(e.target.value as DateRangePreset)}
         className={cn(
-          'h-9 rounded-sm border border-input bg-background px-3 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'h-9 rounded-sm border border-input bg-background px-3 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
       >

package/src/components/dialog.tsx

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-gray-100">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

package/src/components/form-field.tsx

@@ -39,7 +39,7 @@ const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
           'aria-describedby': error ? errorId : helperText ? helperId : undefined,
           className: cn(
             childProps.className,
-            error && 'border-red-500 focus-visible:ring-red-500'
+            error && 'border-red-500'
           ),
         })
       }

package/src/components/impact-metrics-form.tsx

@@ -205,7 +205,7 @@ export function ImpactMetricsForm({
                     ...prev, 
                     time_saved_minutes_per_run: parseInt(e.target.value) || 0 
                   }))}
-                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background"
+                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none bg-background"
                   min="0"
                 />
                 <span className="text-sm text-muted-foreground">min</span>
@@ -230,7 +230,7 @@ export function ImpactMetricsForm({
                     ...prev, 
                     hourly_rate_euros: parseFloat(e.target.value) || 0 
                   }))}
-                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background"
+                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none bg-background"
                   min="0"
                   step="0.5"
                 />
@@ -255,7 +255,7 @@ export function ImpactMetricsForm({
                     ...prev, 
                     fte_equivalent: (parseFloat(e.target.value) || 0) / 100
                   }))}
-                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] bg-background"
+                  className="w-16 px-2 py-1 text-2xl font-bold border border-border rounded-sm focus:outline-none bg-background"
                   min="0"
                   max="1000"
                   step="5"

package/src/components/input.tsx

@@ -15,10 +15,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
+          'flex h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
           error
-            ? 'border-red-500 focus-visible:ring-red-500'
-            : 'border-gray-300 focus-visible:ring-[var(--cyan)]',
+            ? 'border-red-500'
+            : 'border-gray-300',
           className
         )}
         ref={ref}

package/src/components/radio-group.tsx

@@ -27,7 +27,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
@@ -91,7 +91,7 @@ const RadioGroupCard = React.forwardRef<
       ref={ref}
       id={cardId}
       className={cn(
-        'relative flex cursor-pointer rounded-lg border bg-background p-4 transition-all hover:border-[var(--cyan)]/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=checked]:border-[var(--cyan)] data-[state=checked]:ring-1 data-[state=checked]:ring-[var(--cyan)] disabled:cursor-not-allowed disabled:opacity-50',
+        'relative flex cursor-pointer rounded-lg border bg-background p-4 transition-all hover:border-[var(--cyan)]/50 focus:outline-none focus-visible:outline-none data-[state=checked]:border-[var(--cyan)] data-[state=checked]:ring-1 data-[state=checked]:ring-[var(--cyan)] disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}

package/src/components/select.tsx

@@ -15,14 +15,14 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         <select
           ref={ref}
           className={cn(
-            'h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background',
+            'h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)]',
             'placeholder:text-gray-500',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+            'focus-visible:outline-none',
             'disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
             'appearance-none pr-10',
             error
-              ? 'border-red-500 focus-visible:ring-red-500'
-              : 'border-gray-300 focus-visible:ring-[var(--cyan)]',
+              ? 'border-red-500'
+              : 'border-gray-300',
             className
           )}
           aria-invalid={error ? 'true' : undefined}

package/src/components/sheet.tsx

@@ -68,7 +68,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       {/* @ts-expect-error - Radix Dialog Close accepts className and children at runtime */}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[var(--cyan)] focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-gray-100">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>

package/src/components/slider.tsx

@@ -56,8 +56,8 @@ const Slider = React.forwardRef<
         </SliderPrimitive.Track>
         <SliderPrimitive.Thumb
           className={cn(
-            'block rounded-full border-2 border-[var(--cyan)] bg-white shadow-md ring-offset-background transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cyan)] focus-visible:ring-offset-2',
+            'block rounded-full border-2 border-[var(--cyan)] bg-white shadow-md transition-colors',
+            'focus-visible:outline-none',
             'disabled:pointer-events-none disabled:opacity-50',
             'hover:border-[var(--cyan-dark,#00bfaa)] cursor-pointer',
             sizeStyles[size].thumb

package/src/components/switch.tsx

@@ -32,7 +32,7 @@ const Switch = React.forwardRef<
   return (
     <SwitchPrimitive.Root
       className={cn(
-        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--cyan)] data-[state=unchecked]:bg-input',
+        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--cyan)] data-[state=unchecked]:bg-input',
         sizeStyles[size].root,
         className
       )}

package/src/components/tabs.tsx

@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
       className
     )}
     {...props}
@@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'mt-2 focus-visible:outline-none',
       className
     )}
     {...props}

package/src/components/textarea.tsx

@@ -14,10 +14,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors resize-none',
+          'flex min-h-[80px] w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors resize-none',
           error
-            ? 'border-red-500 focus-visible:ring-red-500'
-            : 'border-gray-300 focus-visible:ring-[var(--cyan)]',
+            ? 'border-red-500'
+            : 'border-gray-300',
           className
         )}
         ref={ref}

package/src/components/toast.tsx

@@ -63,7 +63,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-sm border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      'inline-flex h-8 shrink-0 items-center justify-center rounded-sm border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-gray-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50',
       className
     )}
     {...props}

package/src/styles/globals.css

@@ -241,10 +241,9 @@ a:not([disabled]), button:not([disabled]) {
   cursor: pointer;
 }
 
-/* Better focus styles */
+/* Remove default focus outline */
 *:focus-visible {
-  outline: 2px solid hsl(var(--ring));
-  outline-offset: 2px;
+  outline: none;
 }
 
 /* Smooth scroll */