@oussemasahbeni/keycloakify-login-shadcn 250004.0.8 → 250004.0.10

package/keycloak-theme/components/ui/field.tsx

@@ -1,9 +1,9 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority"
+import { useMemo } from "react"
 
-import { cn } from "@/components/lib/utils";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { cn } from '../lib/utils'
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
     return (
@@ -16,7 +16,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
             )}
             {...props}
         />
-    );
+    )
 }
 
 function FieldLegend({
@@ -36,7 +36,7 @@ function FieldLegend({
             )}
             {...props}
         />
-    );
+    )
 }
 
 function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -49,11 +49,11 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
             )}
             {...props}
         />
-    );
+    )
 }
 
 const fieldVariants = cva(
-    "group/field data-[invalid=true]:text-destructive flex w-full gap-2",
+    "group/field flex w-full gap-2 ",
     {
         variants: {
             orientation: {
@@ -61,20 +61,20 @@ const fieldVariants = cva(
                 horizontal: [
                     "flex-row items-center",
                     "[&>[data-slot=field-label]]:flex-auto",
-                    "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start"
+                    "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
                 ],
                 responsive: [
-                    "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+                    "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
                     "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-                    "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
-                ]
-            }
+                    "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+                ],
+            },
         },
         defaultVariants: {
-            orientation: "vertical"
-        }
+            orientation: "vertical",
+        },
     }
-);
+)
 
 function Field({
     className,
@@ -89,7 +89,7 @@ function Field({
             className={cn(fieldVariants({ orientation }), className)}
             {...props}
         />
-    );
+    )
 }
 
 function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -102,10 +102,13 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
             )}
             {...props}
         />
-    );
+    )
 }
 
-function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+function FieldLabel({
+    className,
+    ...props
+}: React.ComponentProps<typeof Label>) {
     return (
         <Label
             data-slot="field-label"
@@ -117,7 +120,7 @@ function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>)
             )}
             {...props}
         />
-    );
+    )
 }
 
 function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -125,12 +128,12 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
         <div
             data-slot="field-label"
             className={cn(
-                "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+                "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
                 className
             )}
             {...props}
         />
-    );
+    )
 }
 
 function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -138,14 +141,14 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
         <p
             data-slot="field-description"
             className={cn(
-                "text-muted-foreground text-sm font-normal leading-normal group-has-data-[orientation=horizontal]/field:text-balance",
-                "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
+                "text-muted-foreground text-sm leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance",
+                "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
                 "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
                 className
             )}
             {...props}
         />
-    );
+    )
 }
 
 function FieldSeparator({
@@ -153,7 +156,7 @@ function FieldSeparator({
     className,
     ...props
 }: React.ComponentProps<"div"> & {
-    children?: React.ReactNode;
+    children?: React.ReactNode
 }) {
     return (
         <div
@@ -175,7 +178,7 @@ function FieldSeparator({
                 </span>
             )}
         </div>
-    );
+    )
 }
 
 function FieldError({
@@ -184,33 +187,37 @@ function FieldError({
     errors,
     ...props
 }: React.ComponentProps<"div"> & {
-    errors?: Array<{ message?: string } | undefined>;
+    errors?: Array<{ message?: string } | undefined>
 }) {
     const content = useMemo(() => {
         if (children) {
-            return children;
+            return children
         }
 
-        if (!errors) {
-            return null;
+        if (!errors?.length) {
+            return null
         }
 
-        if (errors?.length === 1 && errors[0]?.message) {
-            return errors[0].message;
+        const uniqueErrors = [
+            ...new Map(errors.map((error) => [error?.message, error])).values(),
+        ]
+
+        if (uniqueErrors?.length == 1) {
+            return uniqueErrors[0]?.message
         }
 
         return (
             <ul className="ml-4 flex list-disc flex-col gap-1">
-                {errors.map(
+                {uniqueErrors.map(
                     (error, index) =>
                         error?.message && <li key={index}>{error.message}</li>
                 )}
             </ul>
-        );
-    }, [children, errors]);
+        )
+    }, [children, errors])
 
     if (!content) {
-        return null;
+        return null
     }
 
     return (
@@ -222,18 +229,14 @@ function FieldError({
         >
             {content}
         </div>
-    );
+    )
 }
 
 export {
-    Field,
-    FieldContent,
-    FieldDescription,
+    Field, FieldContent, FieldDescription,
     FieldError,
-    FieldGroup,
-    FieldLabel,
-    FieldLegend,
+    FieldGroup, FieldLabel, FieldLegend,
     FieldSeparator,
-    FieldSet,
-    FieldTitle
-};
+    FieldSet, FieldTitle
+}
+

package/keycloak-theme/components/ui/input-otp.tsx

@@ -1,46 +1,55 @@
-import { OTPInput, OTPInputContext } from "input-otp";
-import { Minus } from "lucide-react";
-import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+import * as React from "react"
 
-import { cn } from "@/components/lib/utils";
+import { cn } from '../lib/utils'
 
-const InputOTP = React.forwardRef<
-    React.ElementRef<typeof OTPInput>,
-    React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-    <OTPInput
-        ref={ref}
-        containerClassName={cn(
-            "flex items-center gap-2 has-[:disabled]:opacity-50",
-            containerClassName
-        )}
-        className={cn("disabled:cursor-not-allowed", className)}
-        {...props}
-    />
-));
-InputOTP.displayName = "InputOTP";
+function InputOTP({
+    className,
+    containerClassName,
+    ...props
+}: React.ComponentProps<typeof OTPInput> & {
+    containerClassName?: string
+}) {
+    return (
+        <OTPInput
+            data-slot="input-otp"
+            containerClassName={cn(
+                "flex items-center gap-2 has-disabled:opacity-50",
+                containerClassName
+            )}
+            className={cn("disabled:cursor-not-allowed", className)}
+            {...props}
+        />
+    )
+}
 
-const InputOTPGroup = React.forwardRef<
-    React.ElementRef<"div">,
-    React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center", className)} {...props} />
-));
-InputOTPGroup.displayName = "InputOTPGroup";
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="input-otp-group"
+            className={cn("flex items-center", className)}
+            {...props}
+        />
+    )
+}
 
-const InputOTPSlot = React.forwardRef<
-    React.ElementRef<"div">,
-    React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-    const inputOTPContext = React.useContext(OTPInputContext);
-    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+function InputOTPSlot({
+    index,
+    className,
+    ...props
+}: React.ComponentProps<"div"> & {
+    index: number
+}) {
+    const inputOTPContext = React.useContext(OTPInputContext)
+    const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
 
     return (
         <div
-            ref={ref}
+            data-slot="input-otp-slot"
+            data-active={isActive}
             className={cn(
-                "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-                isActive && "z-10 ring-1 ring-ring",
+                "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
                 className
             )}
             {...props}
@@ -48,22 +57,20 @@ const InputOTPSlot = React.forwardRef<
             {char}
             {hasFakeCaret && (
                 <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                    <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+                    <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
                 </div>
             )}
         </div>
-    );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
+    )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+    return (
+        <div data-slot="input-otp-separator" role="separator" {...props}>
+            <MinusIcon />
+        </div>
+    )
+}
 
-const InputOTPSeparator = React.forwardRef<
-    React.ElementRef<"div">,
-    React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-    <div ref={ref} role="separator" {...props}>
-        <Minus />
-    </div>
-));
-InputOTPSeparator.displayName = "InputOTPSeparator";
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }
 
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/keycloak-theme/components/ui/input.tsx

@@ -1,24 +1,21 @@
-import * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/components/lib/utils";
+import { cn } from '../lib/utils'
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-    ({ className, type, ...props }, ref) => {
-        return (
-            <input
-                type={type}
-                className={cn(
-                    "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-                    "group-data-[invalid=true]/field:border-destructive group-data-[invalid=true]/field:focus-visible:ring-destructive",
-                    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-                    className
-                )}
-                ref={ref}
-                {...props}
-            />
-        );
-    }
-);
-Input.displayName = "Input";
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+    return (
+        <input
+            type={type}
+            data-slot="input"
+            className={cn(
+                "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+                "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+                className
+            )}
+            {...props}
+        />
+    )
+}
 
-export { Input };
+export { Input }

package/keycloak-theme/components/ui/label.tsx

@@ -1,24 +1,23 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react"
 
-import { cn } from "@/components/lib/utils";
+import { cn } from '../lib/utils'
 
-const labelVariants = cva(
-    "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
 
-const Label = React.forwardRef<
-    React.ElementRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-        VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-    <LabelPrimitive.Root
-        ref={ref}
-        className={cn(labelVariants(), className)}
-        {...props}
-    />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+function Label({
+    className,
+    ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+    return (
+        <LabelPrimitive.Root
+            data-slot="label"
+            className={cn(
+                "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+                className
+            )}
+            {...props}
+        />
+    )
+}
 
-export { Label };
+export { Label }

package/keycloak-theme/components/ui/radio-group.tsx

@@ -1,42 +1,44 @@
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { Circle } from "lucide-react";
-import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+import * as React from "react"
 
-import { cn } from "@/components/lib/utils";
+import { cn } from '../lib/utils'
 
-const RadioGroup = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+
+function RadioGroup({
+    className,
+    ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
     return (
         <RadioGroupPrimitive.Root
-            className={cn("grid gap-2", className)}
+            data-slot="radio-group"
+            className={cn("grid gap-3", className)}
             {...props}
-            ref={ref}
         />
-    );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+    )
+}
 
-const RadioGroupItem = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+function RadioGroupItem({
+    className,
+    ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
     return (
         <RadioGroupPrimitive.Item
-            ref={ref}
+            data-slot="radio-group-item"
             className={cn(
-                "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+                "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
                 className
             )}
             {...props}
         >
-            <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-                <Circle className="h-3.5 w-3.5 fill-primary" />
+            <RadioGroupPrimitive.Indicator
+                data-slot="radio-group-indicator"
+                className="relative flex items-center justify-center"
+            >
+                <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
             </RadioGroupPrimitive.Indicator>
         </RadioGroupPrimitive.Item>
-    );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+    )
+}
 
-export { RadioGroup, RadioGroupItem };
+export { RadioGroup, RadioGroupItem }