@oussemasahbeni/keycloakify-login-shadcn 250004.0.2 → 250004.0.3

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

@@ -38,13 +38,13 @@ const Alert = React.forwardRef<
         <div className="flex items-start gap-3">
             {showIcon && (
                 <>
-                    {variant === "info" && <Info className="h-5 w-5 flex-shrink-0" />}
-                    {variant === "error" && <XCircle className="h-5 w-5 flex-shrink-0" />}
+                    {variant === "info" && <Info className="h-5 w-5 shrink-0" />}
+                    {variant === "error" && <XCircle className="h-5 w-5 shrink-0" />}
                     {variant === "warning" && (
-                        <AlertTriangle className="h-5 w-5 flex-shrink-0" />
+                        <AlertTriangle className="h-5 w-5 shrink-0" />
                     )}
                     {variant === "success" && (
-                        <MdCheckCircle className="h-5 w-5 flex-shrink-0" />
+                        <MdCheckCircle className="h-5 w-5 shrink-0" />
                     )}
                 </>
             )}

package/keycloak-theme/components/ui/dropdown-menu.tsx

@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
     <DropdownMenuPrimitive.SubContent
         ref={ref}
         className={cn(
-            "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-dropdown-menu-content-transform-origin]",
+            "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-dropdown-menu-content-transform-origin]",
             className
         )}
         {...props}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             className={cn(
-                "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+                "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 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-dropdown-menu-content-transform-origin]",
                 className
             )}
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
     <DropdownMenuPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+            "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
             inset && "pl-8",
             className
         )}
@@ -96,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     <DropdownMenuPrimitive.CheckboxItem
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
             className
         )}
         checked={checked}
@@ -119,7 +119,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     <DropdownMenuPrimitive.RadioItem
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
             className
         )}
         {...props}

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

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"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",
+                    "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
                 )}

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

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
     <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",
+            "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}
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.Content
             ref={ref}
             className={cn(
-                "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] 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]",
+                "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",
                 className
@@ -79,7 +79,7 @@ const SelectContent = React.forwardRef<
                 className={cn(
                     "p-1",
                     position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+                    "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
                 )}
             >
                 {children}
@@ -109,7 +109,7 @@ const SelectItem = React.forwardRef<
     <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",
+            "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}

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

@@ -15,7 +15,7 @@ const Separator = React.forwardRef<
         orientation={orientation}
         className={cn(
             "shrink-0 bg-border",
-            orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+            orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
             className
         )}
         {...props}

package/keycloak-theme/login/KcContext.ts

@@ -9,6 +9,10 @@ export type KcContextExtension = {
     properties: Record<KcEnvName, string> & {};
     // NOTE: Here you can declare more properties to extend the KcContext
     // See: https://docs.keycloakify.dev/faq-and-help/some-values-you-need-are-missing-from-in-kccontext
+    client: {
+        baseUrl?: string;
+    };
+    darkMode?: boolean;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type

package/keycloak-theme/login/KcPage.tsx

@@ -1,4 +1,3 @@
-import { ThemeProvider } from '@/components/theme-provider';
 import { useExclusiveAppInstanceEffect } from "@keycloakify/login-ui/tools/useExclusiveAppInstanceEffect";
 import { KcClsxProvider } from "@keycloakify/login-ui/useKcClsx";
 import type { ReactNode } from "react";
@@ -10,28 +9,16 @@ import { PageIndex } from "./pages/PageIndex";
 import { useStyleLevelCustomization } from "./styleLevelCustomization";
 
 
+
+
 export default function KcPage(props: { kcContext: KcContext }) {
     const { kcContext } = props;
 
-    const defaultTheme = (): "light" | "dark" | "system" => {
-        if (kcContext.properties.ENABLE_THEME_TOGGLE !== "true") {
-            // If theme toggle is disabled, use the default os theme setting
-            return window.matchMedia &&
-                window.matchMedia("(prefers-color-scheme: dark)").matches
-                ? "dark"
-                : "light";
-        }
-        return "system";
-    };
-
     return (
         <KcContextProvider kcContext={kcContext}>
             <I18nProvider kcContext={kcContext}>
                 <StyleLevelCustomization>
-                    <ThemeProvider defaultTheme={defaultTheme()} storageKey="theme">
-                        <PageIndex />
-                    </ThemeProvider>
-
+                    <PageIndex />
                 </StyleLevelCustomization>
             </I18nProvider>
         </KcContextProvider>

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

@@ -3,6 +3,7 @@ import { ModeToggle } from '@/components/theme-toggle';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { redirectUrlOrigin } from '@/login/shared/redirectUrlOrigin';
 import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
 import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
@@ -10,6 +11,7 @@ import { useSetClassName } from "keycloakify/tools/useSetClassName";
 import { RotateCcw } from 'lucide-react';
 import type { ReactNode } from "react";
 import { useEffect } from "react";
+import { FiHome } from 'react-icons/fi';
 import { useI18n } from "../../i18n";
 import { useKcContext } from "../../KcContext";
 import companylogo from "./../../assets/img/auth-logo.svg";
@@ -77,20 +79,19 @@ export function Template(props: {
             <div className="flex flex-col gap-4 px-0 py-0 pb-6 lg:p-6 lg:md:p-10 lg:pt-10 min-h-screen lg:min-h-0">
                 {/*  navigation */}
                 <div className="absolute top-4 right-4 lg:left-4  z-20 flex gap-2">
-                    {/* <Button variant="outline" size="sm" className="border-gray-400 self-center font-medium text-base">
-                            <a className="flex items-center gap-1" href={kcContext.client.baseUrl ?? redirectUrlOrigin}>
-                                <FiArrowLeft /> {msg("home")}
-                            </a>
-                        </Button> */}
+                    <Button variant="outline" size="icon" >
+                        <a href={kcContext.client.baseUrl ?? redirectUrlOrigin}>
+                            <FiHome />
+                        </a>
+                    </Button>
+
                     {enabledLanguages.length > 1 && (
-                        <div className="bg-white/10 dark:bg-white/10 backdrop-blur-sm rounded-md">
-                            <Languages />
-                        </div>
+                        <Languages />
                     )}
-                    {kcContext.properties.ENABLE_THEME_TOGGLE == "true" && (
-                        <div className="bg-white/10 dark:bg-white/10 backdrop-blur-sm rounded-md">
-                            <ModeToggle />
-                        </div>
+
+
+                    {kcContext.darkMode !== false && (
+                        <ModeToggle />
                     )}
                 </div>
 

package/keycloak-theme/login/i18n.ts

@@ -14,7 +14,6 @@ const { I18nProvider, useI18n } = i18nBuilder
             enterCredentials: "Enter your credentials below to login",
             noAccount: "Don't have an account?",
             doRegister: "Sign up",
-            home: "Home",
             "organization.selectTitle": "Choose Your Organization",
             "organization.pickPlaceholder": "Pick an organization to continue"
         },
@@ -26,8 +25,6 @@ const { I18nProvider, useI18n } = i18nBuilder
             enterCredentials: "أدخل بيانات الاعتماد الخاصة بك أدناه لتسجيل الدخول",
             doRegister: "إنشاء حساب",
             noAccount: "ليس لديك حساب؟",
-            home: "الصفحة الرئيسية",
-
             "organization.selectTitle": "اختر مؤسستك",
             "organization.pickPlaceholder": "اختر مؤسسة للمتابعة"
         },
@@ -41,7 +38,6 @@ const { I18nProvider, useI18n } = i18nBuilder
                 "Entrez vos informations d'identification ci-dessous pour vous connecter",
             doRegister: "S'inscrire",
             noAccount: "Vous n'avez pas de compte?",
-            home: "Accueil",
             "organization.selectTitle": "Choisissez Votre Organisation",
             "organization.pickPlaceholder": "Sélectionnez une organisation pour continuer"
         }

package/keycloak-theme/login/mocks/getKcContextMock.ts

@@ -1,9 +1,13 @@
 import { createGetKcContextMock } from "@keycloakify/login-ui/KcContext/getKcContextMock";
+import { kcEnvDefaults, themeNames } from "../../kc.gen";
 import type { KcContextExtension, KcContextExtensionPerPage } from "../KcContext";
-import { themeNames, kcEnvDefaults } from "../../kc.gen";
 
 const kcContextExtension: KcContextExtension = {
     themeName: themeNames[0],
+    client: {
+        baseUrl: "https://my-theme.keycloakify.dev"
+    },
+    darkMode: true,
     properties: {
         ...kcEnvDefaults
     }

package/keycloak-theme/login/pages/code/Page.stories.tsx

@@ -15,30 +15,26 @@ export const Default: Story = {
     render: () => <KcPageStory />
 };
 
-export const WithDarkModeDisabled: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                properties: {
-                    ENABLE_THEME_TOGGLE: "false"
-                }
-            }}
-        />
-    )
-};
 
-export const WithDarkModeEnabled: Story = {
+/**
+ * This reflects the state when "Dark Theme" is set to "Disabled" in the realm settings 
+ * (Theme configuration tab of the Keycloak Admin UI).
+ * 
+ * You should enable this configuration if you want to hide the "dark mode switch" 
+ * and ensure that the theme always renders in light mode, even if the user's system 
+ * preference is set to dark.
+ */
+export const WithDarkModeForbidden: Story = {
     render: () => (
         <KcPageStory
             kcContext={{
-                properties: {
-                    ENABLE_THEME_TOGGLE: "true"
-                }
+                darkMode: false
             }}
         />
     )
 };
 
+
 export const WithErrorCode: Story = {
     render: () => (
         <KcPageStory

package/keycloak-theme/login/shared/getColorScheme.ts

@@ -0,0 +1,45 @@
+const SESSION_STORAGE_KEY = "kc-color-scheme";
+
+export function getTheme(
+    kcContextDarkMode: boolean | undefined
+): "dark" | "light" | "system" {
+    from_admin_policy: {
+        if (kcContextDarkMode === undefined || kcContextDarkMode === true) {
+            break from_admin_policy;
+        }
+        return "light";
+    }
+
+    from_url: {
+        const url = new URL(window.location.href);
+
+        const value = url.searchParams.get("dark");
+
+        if (value === null) {
+            break from_url;
+        }
+
+        {
+            url.searchParams.delete("dark");
+            window.history.replaceState({}, "", url.toString());
+        }
+
+        const isDark = value === "true";
+
+        sessionStorage.setItem(SESSION_STORAGE_KEY, `${isDark}`);
+
+        return isDark ? "dark" : "light";
+    }
+
+    from_session_storage: {
+        const value = sessionStorage.getItem(SESSION_STORAGE_KEY);
+
+        if (value === null) {
+            break from_session_storage;
+        }
+
+        return value === "true" ? "dark" : "light";
+    }
+
+    return "system";
+}

package/keycloak-theme/login/styleLevelCustomization.tsx

@@ -1,5 +1,8 @@
+import { ThemeProvider } from '@/components/theme-provider';
 import type { ClassKey } from "@keycloakify/login-ui/useKcClsx";
 import type { ReactNode } from "react";
+import { useKcContext } from './KcContext';
+import { getTheme } from './shared/getColorScheme';
 
 type Classes = { [key in ClassKey]?: string };
 
@@ -10,8 +13,24 @@ type StyleLevelCustomization = {
     Provider?: (props: { children: ReactNode }) => ReactNode;
 };
 
+// eslint-disable-next-line react-refresh/only-export-components
+function Provider(props: { children: ReactNode }) {
+    const { children } = props;
+
+    const { kcContext } = useKcContext();
+
+
+    return (
+        <ThemeProvider defaultTheme={getTheme(kcContext.darkMode)}>
+            {children}
+        </ThemeProvider>
+    );
+}
+
+
 export function useStyleLevelCustomization(): StyleLevelCustomization {
     return {
-        doUseDefaultCss: false
+        doUseDefaultCss: false,
+        Provider
     };
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oussemasahbeni/keycloakify-login-shadcn",
-  "version": "250004.0.2",
+  "version": "250004.0.3",
   "description": "Keycloakify Shadcn Theme extensions",
   "license": "MIT",
   "type": "module",
@@ -8,9 +8,6 @@
   "files": [
     "keycloak-theme"
   ],
-  "dependencies": {
-    "@keycloakify/login-ui": "~250004.6.5"
-  },
   "peerDependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -22,12 +19,12 @@
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "input-otp": "^1.4.2",
+    "@keycloakify/login-ui": "~250004.6.5",
     "lucide-react": "^0.473.0",
     "react-icons": "^5.5.0",
     "tailwind-merge": "^2.6.0",