@oussemasahbeni/keycloakify-login-shadcn 250004.0.8 → 250004.0.10

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

@@ -1,140 +1,178 @@
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from "react"
 
-import { cn } from "@/components/lib/utils";
+import { cn } from '../lib/utils'
 
-const Select = SelectPrimitive.Root;
+function Select({
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+    return <SelectPrimitive.Root data-slot="select" {...props} />
+}
 
-const SelectGroup = SelectPrimitive.Group;
+function SelectGroup({
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+    return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
 
-const SelectValue = SelectPrimitive.Value;
+function SelectValue({
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+    return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
 
-const SelectTrigger = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-    <SelectPrimitive.Trigger
-        ref={ref}
-        className={cn(
-            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-            className
-        )}
-        {...props}
-    >
-        {children}
-        <SelectPrimitive.Icon asChild>
-            <ChevronDown className="h-4 w-4 opacity-50" />
-        </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.ScrollUpButton
-        ref={ref}
-        className={cn("flex cursor-default items-center justify-center py-1", className)}
-        {...props}
-    >
-        <ChevronUp className="h-4 w-4" />
-    </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.ScrollDownButton
-        ref={ref}
-        className={cn("flex cursor-default items-center justify-center py-1", className)}
-        {...props}
-    >
-        <ChevronDown className="h-4 w-4" />
-    </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-    <SelectPrimitive.Portal>
-        <SelectPrimitive.Content
-            ref={ref}
+function SelectTrigger({
+    className,
+    size = "default",
+    children,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default"
+}) {
+    return (
+        <SelectPrimitive.Trigger
+            data-slot="select-trigger"
+            data-size={size}
             className={cn(
-                "relative z-50 max-h-[--radix-select-content-available-height] min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
-                position === "popper" &&
-                    "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+                "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground 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 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
                 className
             )}
-            position={position}
             {...props}
         >
-            <SelectScrollUpButton />
-            <SelectPrimitive.Viewport
+            {children}
+            <SelectPrimitive.Icon asChild>
+                <ChevronDownIcon className="size-4 opacity-50" />
+            </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+    )
+}
+
+function SelectContent({
+    className,
+    children,
+    position = "popper",
+    align = "center",
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+    return (
+        <SelectPrimitive.Portal>
+            <SelectPrimitive.Content
+                data-slot="select-content"
                 className={cn(
-                    "p-1",
+                    "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
                     position === "popper" &&
-                        "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
+                    "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+                    className
                 )}
+                position={position}
+                align={align}
+                {...props}
             >
-                {children}
-            </SelectPrimitive.Viewport>
-            <SelectScrollDownButton />
-        </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+                <SelectScrollUpButton />
+                <SelectPrimitive.Viewport
+                    className={cn(
+                        "p-1",
+                        position === "popper" &&
+                        "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
+                    )}
+                >
+                    {children}
+                </SelectPrimitive.Viewport>
+                <SelectScrollDownButton />
+            </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+    )
+}
 
-const SelectLabel = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Label>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.Label
-        ref={ref}
-        className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-        {...props}
-    />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
+function SelectLabel({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+    return (
+        <SelectPrimitive.Label
+            data-slot="select-label"
+            className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+            {...props}
+        />
+    )
+}
 
-const SelectItem = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-    <SelectPrimitive.Item
-        ref={ref}
-        className={cn(
-            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-            className
-        )}
-        {...props}
-    >
-        <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-            <SelectPrimitive.ItemIndicator>
-                <Check className="h-4 w-4" />
-            </SelectPrimitive.ItemIndicator>
-        </span>
-        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+function SelectItem({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+    return (
+        <SelectPrimitive.Item
+            data-slot="select-item"
+            className={cn(
+                "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+                className
+            )}
+            {...props}
+        >
+            <span
+                data-slot="select-item-indicator"
+                className="absolute right-2 flex size-3.5 items-center justify-center"
+            >
+                <SelectPrimitive.ItemIndicator>
+                    <CheckIcon className="size-4" />
+                </SelectPrimitive.ItemIndicator>
+            </span>
+            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        </SelectPrimitive.Item>
+    )
+}
 
-const SelectSeparator = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.Separator
-        ref={ref}
-        className={cn("-mx-1 my-1 h-px bg-muted", className)}
-        {...props}
-    />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+function SelectSeparator({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+    return (
+        <SelectPrimitive.Separator
+            data-slot="select-separator"
+            className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+            {...props}
+        />
+    )
+}
+
+function SelectScrollUpButton({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+    return (
+        <SelectPrimitive.ScrollUpButton
+            data-slot="select-scroll-up-button"
+            className={cn(
+                "flex cursor-default items-center justify-center py-1",
+                className
+            )}
+            {...props}
+        >
+            <ChevronUpIcon className="size-4" />
+        </SelectPrimitive.ScrollUpButton>
+    )
+}
+
+function SelectScrollDownButton({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+    return (
+        <SelectPrimitive.ScrollDownButton
+            data-slot="select-scroll-down-button"
+            className={cn(
+                "flex cursor-default items-center justify-center py-1",
+                className
+            )}
+            {...props}
+        >
+            <ChevronDownIcon className="size-4" />
+        </SelectPrimitive.ScrollDownButton>
+    )
+}
 
 export {
     Select,
@@ -147,4 +185,5 @@ export {
     SelectSeparator,
     SelectTrigger,
     SelectValue
-};
+}
+

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

@@ -1,26 +1,26 @@
-"use client";
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react"
 
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react";
+import { cn } from '../lib/utils'
 
-import { cn } from "@/components/lib/utils";
+function Separator({
+    className,
+    orientation = "horizontal",
+    decorative = true,
+    ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+    return (
+        <SeparatorPrimitive.Root
+            data-slot="separator"
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+                className
+            )}
+            {...props}
+        />
+    )
+}
 
-const Separator = React.forwardRef<
-    React.ElementRef<typeof SeparatorPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
-    <SeparatorPrimitive.Root
-        ref={ref}
-        decorative={decorative}
-        orientation={orientation}
-        className={cn(
-            "shrink-0 bg-border",
-            orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-            className
-        )}
-        {...props}
-    />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
+export { Separator }

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

@@ -1,30 +1,60 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react"
 
-import { cn } from "@/components/lib/utils";
+import { cn } from '../lib/utils'
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function TooltipProvider({
+    delayDuration = 0,
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+    return (
+        <TooltipPrimitive.Provider
+            data-slot="tooltip-provider"
+            delayDuration={delayDuration}
+            {...props}
+        />
+    )
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function Tooltip({
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+    return (
+        <TooltipProvider>
+            <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+        </TooltipProvider>
+    )
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipTrigger({
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
 
-const TooltipContent = React.forwardRef<
-    React.ElementRef<typeof TooltipPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-    <TooltipPrimitive.Portal>
-        <TooltipPrimitive.Content
-            ref={ref}
-            sideOffset={sideOffset}
-            className={cn(
-                "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
-                className
-            )}
-            {...props}
-        />
-    </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+    className,
+    sideOffset = 0,
+    children,
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+    return (
+        <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+                data-slot="tooltip-content"
+                sideOffset={sideOffset}
+                className={cn(
+                    "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+            </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+    )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/keycloak-theme/login/KcPage.tsx

@@ -4,7 +4,6 @@ import type { ReactNode } from "react";
 import { assert } from "tsafe/assert";
 import { type KcContext, KcContextProvider } from "./KcContext";
 import { I18nProvider } from "./i18n";
-import "./index.css";
 import { PageIndex } from "./pages/PageIndex";
 import { useStyleLevelCustomization } from "./styleLevelCustomization";
 

package/keycloak-theme/login/components/Template/Template.tsx

@@ -108,7 +108,7 @@ export function Template(props: {
                 <div className="flex flex-1 items-start lg:items-center justify-center lg:mt-0 ">
                     <div className="w-full max-w-xl ">
                         <Card className=" shadow-none bg-transparent lg:bg-card border-0 lg:rounded-lg lg:border lg:shadow-sm rounded-t-2xl">
-                            <CardHeader className="text-center mb-3 px-6 pt-8 pb-4 lg:pt-6">
+                            <CardHeader className="text-center">
                                 <CardTitle>
                                     {(() => {
                                         const node = !(
@@ -182,7 +182,7 @@ export function Template(props: {
                                     })()}
                                 </CardTitle>
                             </CardHeader>
-                            <CardContent className="px-6 pb-8">
+                            <CardContent >
                                 <div id="kc-content">
                                     <div id="kc-content-wrapper">
                                         {displayMessage &&

package/keycloak-theme/login/components/Template/useInitializeTemplate.ts

@@ -1,36 +1,20 @@
-import { useEffect } from "react";
-import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
 import { useInsertLinkTags } from "@keycloakify/login-ui/tools/useInsertLinkTags";
-import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
+import { useEffect } from "react";
 import { BASE_URL } from "../../../kc.gen";
 import { useKcContext } from "../../KcContext";
 
 export function useInitializeTemplate() {
     const { kcContext } = useKcContext();
 
-    const { doUseDefaultCss } = useKcClsx();
-
     const { areAllStyleSheetsLoaded } = useInsertLinkTags({
         effectId: "Template",
-        hrefs: !doUseDefaultCss
-            ? []
-            : [
-                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/@patternfly/patternfly/patternfly.min.css`,
-                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/patternfly/dist/css/patternfly.min.css`,
-                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
-                  `${BASE_URL}keycloak-theme/login/resources-common/lib/pficon/pficon.css`,
-                  `${BASE_URL}keycloak-theme/login/css/login.css`
-              ]
+        hrefs: []
     });
 
     const { insertScriptTags } = useInsertScriptTags({
         effectId: "Template",
         scriptTags: [
-            // NOTE: The importmap is added in by the FTL script because it's too late to add it here.
-            {
-                type: "module",
-                src: `${BASE_URL}keycloak-theme/login/js/menu-button-links.js`
-            },
             ...(kcContext.scripts === undefined
                 ? []
                 : kcContext.scripts.map(src => ({

package/keycloak-theme/login/index.css

@@ -2,15 +2,13 @@
 
 @import "tailwindcss";
 
+@source "../**/*.{ts,tsx}";
+
 @custom-variant dark (&:is(.dark *));
 
 @theme {
     --font-geist: Geist, sans-serif;
 
-    --radius-lg: var(--radius);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-sm: calc(var(--radius) - 4px);
-
     --color-background: var(--background);
     --color-foreground: var(--foreground);
     --color-card: var(--card);
@@ -70,21 +68,6 @@
         @apply text-right;
     }
 
-    /* .kcHeaderWrapperClass {
-        @apply text-3xl font-bold underline;
-    } */
-    /* input[type="checkbox"],
-    input[type="radio"] {
-        margin: 2px;
-        vertical-align: middle;
-        line-height: normal;
-    }
-
-    input[type="checkbox"]:checked,
-    input[type="radio"]:checked {
-        @apply accent-primary;
-    } */
-
     .required {
         @apply text-red-600;
     }
@@ -141,7 +124,7 @@
     --muted-foreground: oklch(0.708 0 0);
     --accent: oklch(0.269 0 0);
     --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(55% 0.16 24);
+    --destructive: oklch(0.704 0.191 22.216);
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
     --ring: oklch(0.556 0 0);