uibee 3.3.0 → 3.3.2

package/dist/utils/auth/callback.d.ts

@@ -0,0 +1,14 @@
+import { AuthCallbackProps } from "uibee/utils";
+
+//#region src/utils/auth/callback.d.ts
+declare function authCallback({
+  req,
+  tokenURL,
+  clientID,
+  clientSecret,
+  redirectPath,
+  userInfoURL,
+  tokenRedirectPath
+}: AuthCallbackProps): Promise<Response>;
+//#endregion
+export { authCallback as default };

package/dist/utils/auth/callback.js

@@ -0,0 +1,53 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/callback.ts
+async function authCallback({ req, tokenURL, clientID, clientSecret, redirectPath, userInfoURL, tokenRedirectPath }) {
+	const domain = getDomain(req);
+	const searchParams = new URL(req.url).searchParams;
+	if (!searchParams) return NextResponse.json({ error: "No search parameters found." }, { status: 400 });
+	const code = searchParams.get("code");
+	if (!code) return NextResponse.json({ error: "No authorization code found." }, { status: 400 });
+	try {
+		const tokenResponse = await fetch(tokenURL, {
+			method: "POST",
+			headers: { "Content-Type": "application/x-www-form-urlencoded" },
+			body: new URLSearchParams({
+				client_id: clientID,
+				client_secret: clientSecret,
+				code,
+				redirect_uri: `${domain}${redirectPath}`,
+				grant_type: "authorization_code"
+			}).toString()
+		});
+		const tokenResponseBody = await tokenResponse.text();
+		if (!tokenResponse.ok) return new Response(JSON.stringify(`Failed to obtain token: ${tokenResponseBody}`), {
+			status: 500,
+			headers: { "Content-Type": "application/json" }
+		});
+		const token = JSON.parse(tokenResponseBody);
+		const userInfoResponse = await fetch(userInfoURL, { headers: { Authorization: `Bearer ${token.access_token}` } });
+		if (!userInfoResponse.ok) {
+			const userInfoError = await userInfoResponse.text();
+			return new Response(`No user info found: ${userInfoError}`, {
+				status: 500,
+				headers: { "Content-Type": "application/json" }
+			});
+		}
+		const userInfo = await userInfoResponse.json();
+		const redirectUrl = new URL(`${domain}${tokenRedirectPath}`);
+		redirectUrl.search = new URLSearchParams({
+			id: userInfo.sub,
+			name: userInfo.name,
+			username: userInfo.nickname,
+			email: userInfo.email,
+			groups: userInfo.groups.join(","),
+			access_token: token.access_token
+		}).toString();
+		return NextResponse.redirect(redirectUrl.toString());
+	} catch (err) {
+		console.error("Error during OAuth flow:", err.message);
+		return NextResponse.json({ error: "Authentication failed" }, { status: 500 });
+	}
+}
+//#endregion
+export { authCallback as default };

package/dist/utils/auth/getDomain.js

@@ -0,0 +1,6 @@
+//#region src/utils/auth/getDomain.ts
+function getDomain(req) {
+	return `${req.headers.get("x-forwarded-proto") ?? new URL(req.url).protocol.replace(":", "")}://${req.headers.get("host") ?? req.headers.get("x-forwarded-host") ?? new URL(req.url).host}`;
+}
+//#endregion
+export { getDomain };

package/dist/utils/auth/login.d.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server.js";
+import { AuthLoginProps } from "uibee/utils";
+
+//#region src/utils/auth/login.d.ts
+declare function AuthLogin({
+  req,
+  clientID,
+  redirectPath,
+  authURL
+}: AuthLoginProps): Promise<NextResponse<unknown>>;
+//#endregion
+export { AuthLogin as default };

package/dist/utils/auth/login.js

@@ -0,0 +1,17 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/login.ts
+async function AuthLogin({ req, clientID, redirectPath, authURL }) {
+	const domain = getDomain(req);
+	const state = Math.random().toString(36).substring(5);
+	const authQueryParams = new URLSearchParams({
+		client_id: clientID,
+		redirect_uri: `${domain}${redirectPath}`,
+		response_type: "code",
+		scope: "openid profile email",
+		state
+	}).toString();
+	return NextResponse.redirect(`${authURL}?${authQueryParams}`);
+}
+//#endregion
+export { AuthLogin as default };

package/dist/utils/auth/logout.d.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server.js";
+import { AuthLogoutProps } from "uibee/utils";
+
+//#region src/utils/auth/logout.d.ts
+declare function AuthLogout({
+  req,
+  path
+}: AuthLogoutProps): Promise<NextResponse<unknown>>;
+//#endregion
+export { AuthLogout as default };

package/dist/utils/auth/logout.js

@@ -0,0 +1,20 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/logout.ts
+async function AuthLogout({ req, path }) {
+	const domain = getDomain(req);
+	const response = NextResponse.redirect(new URL(path || "/", domain));
+	[
+		"access_token",
+		"user_id",
+		"user_name",
+		"user_nickname",
+		"user_email",
+		"user_groups"
+	].forEach((cookieName) => {
+		response.cookies.delete(cookieName);
+	});
+	return response;
+}
+//#endregion
+export { AuthLogout as default };

package/dist/utils/auth/token.d.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server.js";
+import { AuthTokenProps } from "uibee/utils";
+
+//#region src/utils/auth/token.d.ts
+declare function AuthToken({
+  req,
+  redirectPath
+}: AuthTokenProps): Promise<NextResponse<unknown>>;
+//#endregion
+export { AuthToken as default };

package/dist/utils/auth/token.js

@@ -0,0 +1,30 @@
+import { getDomain } from "./getDomain.js";
+import { NextResponse } from "next/server.js";
+//#region src/utils/auth/token.ts
+async function AuthToken({ req, redirectPath }) {
+	const domain = getDomain(req);
+	const url = new URL(req.url);
+	const token = url.searchParams.get("access_token");
+	const btg = url.searchParams.get("btg");
+	const redirectCookie = req.cookies.get("redirect_after_login");
+	const redirect = redirectCookie ? redirectCookie.value : redirectPath || "/";
+	if (!token) return NextResponse.json({ error: "No access token provided" }, { status: 400 });
+	if (btg) return NextResponse.redirect(new URL(redirect, domain));
+	const accessToken = url.searchParams.get("access_token");
+	const userID = url.searchParams.get("id");
+	const username = url.searchParams.get("name");
+	const userNickname = url.searchParams.get("username");
+	const userEmail = url.searchParams.get("email");
+	const userGroups = url.searchParams.get("groups");
+	const response = NextResponse.redirect(new URL(redirect, domain));
+	response.cookies.set("access_token", accessToken);
+	response.cookies.set("user_id", userID);
+	response.cookies.set("user_name", username);
+	response.cookies.set("user_nickname", userNickname);
+	response.cookies.set("user_email", userEmail);
+	response.cookies.set("user_groups", userGroups);
+	if (redirectCookie) response.cookies.delete("redirect_after_login");
+	return response;
+}
+//#endregion
+export { AuthToken as default };

package/dist/utils/logoConsoleOutput/logoConsoleOutput.d.ts

@@ -0,0 +1,4 @@
+//#region src/utils/logoConsoleOutput/logoConsoleOutput.d.ts
+declare function LogoConsoleOutput(): void;
+//#endregion
+export { LogoConsoleOutput };

package/dist/utils/logoConsoleOutput/logoConsoleOutput.js

@@ -0,0 +1,11 @@
+//#region src/utils/logoConsoleOutput/logoConsoleOutput.ts
+function LogoConsoleOutput() {
+	const ua = navigator.userAgent;
+	if (!ua.includes("Chrome") && !ua.includes("Firefox") && !ua.includes("Safari")) {
+		console.log("Login - Linjeforeningen for IT");
+		return;
+	}
+	console.log("%c███████╗                              ███████╗\n██╔════╝                              ╚════██║\n██║%c ██╗     ██████╗  ██████╗ ██╗███╗   ██╗ %c██║\n╚═╝%c ██║    ██╔═══██╗██╔════╝ ██║████╗  ██║ %c╚═╝%c\n    ██║    ██║   ██║██║  ███╗██║██╔██╗ ██║\n    ██║    ██║   ██║██║   ██║██║██║╚██╗██║\n%c██╗%c ██████╗╚██████╔╝╚██████╔╝██║██║ ╚████║ %c██╗\n██║%c ╚═════╝ ╚═════╝  ╚═════╝ ╚═╝╚═╝  ╚═══╝ %c██║\n███████╗%c                              %c███████║\n╚══════╝                              ╚══════╝%c\n\n       - Laget av TekKom med 🍕 og ❤️", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "", "color: #fd8738", "");
+}
+//#endregion
+export { LogoConsoleOutput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/buttons/button.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Link from 'next/link'
 import type { JSX } from 'react'
 

package/src/components/footer/footer.tsx

@@ -32,6 +32,41 @@ function t(s: BilingualString, lang: Lang): string {
     return typeof s === 'string' ? s : s[lang]
 }
 
+function Column({ col, lang }: { col: FooterColumn; lang: Lang }) {
+    return (
+        <div>
+            <h4 className='pb-2 text-sm font-medium tracking-widest text-login-100'>
+                {t(col.heading, lang)}
+            </h4>
+            {col.items.map((item, j) =>
+                item.href ? (
+                    item.href.startsWith('/') ? (
+                        <Link
+                            key={j}
+                            className='link--underscore-hover block text-login-50'
+                            href={item.href}
+                        >
+                            {t(item.label, lang)}
+                        </Link>
+                    ) : (
+                        <a
+                            key={j}
+                            className='link--underscore-hover block text-login-50'
+                            href={item.href}
+                        >
+                            {t(item.label, lang)}
+                        </a>
+                    )
+                ) : (
+                    <p key={j} className='text-login-50'>
+                        {t(item.label, lang)}
+                    </p>
+                )
+            )}
+        </div>
+    )
+}
+
 export default function Footer({
     logo,
     sponsor,
@@ -43,15 +78,16 @@ export default function Footer({
     className,
 }: FooterProps) {
     const year = new Date().getFullYear()
+    const [firstColumn, ...restColumns] = columns ?? []
     const hasRight = (columns && columns.length > 0) || (socialLinks && socialLinks.length > 0)
 
     return (
-        <div className={`mt-24 bg-login-950 md:mt-40 ${className || ''}`}>
+        <div className={`max-md:mt-24 bg-login-950 md:mt-40 ${className || ''}`}>
             <div className={`
-                mx-auto w-full px-4 pt-16 pb-24 md:max-w-304 md:px-12 md:pt-20 md:pb-4
+                mx-auto w-full pb-4 max-md:px-4 max-md:pt-16 md:max-w-304 md:px-12 md:pt-20
                 ${hasRight ? 'md:grid md:grid-cols-[18rem_1fr] md:gap-x-12' : ''}
             `}>
-                <div className='mx-auto grid w-full max-w-60 gap-16 md:row-span-2 md:max-w-72 md:gap-20'>
+                <div className='mx-auto grid w-full max-md:max-w-60 max-md:gap-16 md:row-span-2 md:max-w-72 md:gap-20'>
                     <div className='block w-full'>{logo}</div>
                     {sponsor && (
                         <div>
@@ -65,43 +101,26 @@ export default function Footer({
                     )}
                 </div>
 
-                {columns && columns.length > 0 && (
+                {firstColumn && (
+                    <div className='
+                        grid w-full self-start max-md:mt-16
+                        max-sm:max-w-60 sm:max-md:max-w-88
+                        md:col-start-2 md:row-start-1 md:max-w-136 md:justify-self-center
+                    '>
+                        <Column col={firstColumn} lang={lang} />
+                    </div>
+                )}
+
+                {restColumns.length > 0 && (
                     <div className={`
-                        mt-12 grid w-full max-w-60 gap-8
-                        sm:max-w-88 sm:justify-items-end sm:justify-self-end
-                        md:col-start-2 md:row-start-1 md:mt-0 md:max-w-136 md:gap-0 md:justify-self-end
-                        ${columns.length > 1 ? 'sm:grid-cols-2' : ''}
+                        grid w-full self-start max-md:mt-16 max-md:gap-8
+                        max-sm:max-w-60 sm:max-md:max-w-88 sm:justify-items-end sm:justify-self-end
+                        md:col-start-2 md:row-start-1 md:max-w-136 md:justify-self-end
+                        ${restColumns.length > 1 ? 'sm:grid-cols-2' : ''}
                     `}>
-                        {columns.map((col, i) => (
+                        {restColumns.map((col, i) => (
                             <div key={i} className='sm:justify-self-center md:justify-self-end'>
-                                <h4 className='pb-2 text-sm font-medium tracking-widest text-login-100'>
-                                    {t(col.heading, lang)}
-                                </h4>
-                                {col.items.map((item, j) =>
-                                    item.href ? (
-                                        item.href.startsWith('/') ? (
-                                            <Link
-                                                key={j}
-                                                className='link--underscore-hover block text-login-100'
-                                                href={item.href}
-                                            >
-                                                {t(item.label, lang)}
-                                            </Link>
-                                        ) : (
-                                            <a
-                                                key={j}
-                                                className='link--underscore-hover block text-login-100'
-                                                href={item.href}
-                                            >
-                                                {t(item.label, lang)}
-                                            </a>
-                                        )
-                                    ) : (
-                                        <p key={j} className='text-login-100'>
-                                            {t(item.label, lang)}
-                                        </p>
-                                    )
-                                )}
+                                <Column col={col} lang={lang} />
                             </div>
                         ))}
                     </div>
@@ -109,11 +128,12 @@ export default function Footer({
 
                 {socialLinks && socialLinks.length > 0 && (
                     <div className='md:col-start-2 md:row-start-2 md:justify-self-end'>
-                        <div className='mx-auto mt-20 mb-12 flex w-fit flex-wrap justify-center gap-6'>
+                        <div className='mx-auto mt-20 mb-12 grid w-fit gap-6 max-sm:grid-cols-3 sm:grid-flow-col'>
                             {socialLinks.map((link, i) => (
                                 <a
                                     key={i}
-                                    className={`block size-8 text-login-100 transition-all duration-200 group
+                                    className={`group mx-auto flex h-8 w-8 items-center justify-center
+                                        text-login-100 transition-all duration-200
                                         ${link.hoverClass ?? 'hover:text-login-50'}`}
                                     title={link.title}
                                     href={link.href}
@@ -127,9 +147,7 @@ export default function Footer({
                     </div>
                 )}
 
-                <div className='mt-16 flex flex-col items-start gap-4 md:col-span-2 md:row-start-3 md:mt-24 md:grid
-                    md:grid-cols-[auto_min-content] md:items-end md:gap-8'
-                >
+                <div className='mt-24 grid grid-cols-[auto_min-content] items-end gap-8 md:col-span-2 md:row-start-3'>
                     <p className='text-xs wrap-break-word text-login-100'>
                         {lang === 'no' ? 'Opphavsrett' : 'Copyright'} © {year} {t(copyright, lang)}
                     </p>

package/src/components/footer/loginContent.tsx

@@ -8,6 +8,41 @@ export type { FooterSocialLink as LoginSocialLinkData }
 // eslint-disable-next-line @stylistic/max-len
 const INSTAGRAM_PATH = 'M512 960Q408 960 375.0 959.5Q342 959 301 957Q260 955 230.5 949.0Q201 943 177 933Q151 923 129.0 909.0Q107 895 86 874Q65 853 51.0 831.0Q37 809 27 783Q17 759 11.0 729.5Q5 700 3 659Q1 618 0.5 585.0Q0 552 0 448Q0 344 0.5 311.0Q1 278 3 237Q5 196 11.0 166.5Q17 137 27 113Q37 87 51.0 65.0Q65 43 86 22Q107 1 129.0 -13.0Q151 -27 177 -37Q201 -47 230.5 -53.0Q260 -59 301 -61Q342 -63 375.0 -63.5Q408 -64 512 -64Q616 -64 649.0 -63.5Q682 -63 723 -61Q764 -59 793.5 -53.0Q823 -47 847 -37Q873 -27 895.0 -13.0Q917 1 938 22Q959 43 973.0 65.0Q987 87 997 113Q1007 137 1013.0 166.5Q1019 196 1021 237Q1023 278 1023.5 311.0Q1024 344 1024 448Q1024 552 1023.5 585.0Q1023 618 1021 659Q1019 700 1013.0 729.5Q1007 759 997 783Q987 809 973.0 831.0Q959 853 938 874Q917 895 895.0 909.0Q873 923 847 933Q823 943 793.5 949.0Q764 955 723 957Q682 959 649.0 959.5Q616 960 512 960ZM512 868Q614 868 646.0 867.5Q678 867 719 865Q756 863 778.0 857.5Q800 852 814 847Q832 840 845.5 831.0Q859 822 873 809Q886 795 895.0 781.5Q904 768 911 750Q916 736 921.5 714.0Q927 692 929 655Q931 614 931.5 582.5Q932 551 932 448Q932 345 931.0 313.5Q930 282 929 241Q927 204 921.5 182.0Q916 160 911 146Q903 128 894.5 114.5Q886 101 872 87Q859 74 845.0 65.0Q831 56 813 49Q800 44 777.5 38.5Q755 33 718 31Q677 29 645.0 28.5Q613 28 511 28Q408 28 376.0 29.0Q344 30 303 31Q266 33 243.5 38.5Q221 44 208 49Q190 57 176.5 65.5Q163 74 149 88Q136 101 126.5 115.0Q117 129 111 147Q105 160 100.0 182.5Q95 205 93 242Q91 282 90.5 314.0Q90 346 90 449Q90 551 90.5 583.0Q91 615 93 656Q95 693 100.0 715.5Q105 738 111 751Q117 770 126.5 783.5Q136 797 149 810Q163 824 176.5 833.0Q190 842 208 849Q221 854 243.0 859.5Q265 865 303 867Q344 868 375.5 868.5Q407 869 510 869ZM512 711Q458 711 410 690Q362 670 326.0 634.0Q290 598 270 550Q249 502 249 448Q249 394 270 346Q290 298 326.0 262.0Q362 226 410 206Q458 185 512 185Q566 185 614 206Q662 226 698.0 262.0Q734 298 754 346Q775 394 775 448Q775 502 754 550Q734 598 698.0 634.0Q662 670 614 690Q566 711 512 711ZM512 277Q441 277 391.0 327.0Q341 377 341 448Q341 519 391.0 569.0Q441 619 512 619Q583 619 633.0 569.0Q683 519 683 448Q683 377 633.0 327.0Q583 277 512 277ZM847 721Q847 696 829.0 678.0Q811 660 785 660Q760 660 742.0 678.0Q724 696 724 721Q724 747 742.0 765.0Q760 783 785 783Q811 783 829.0 765.0Q847 747 847 721Z'
 
+// Norsk Tipping (Grasrotandelen) — Login's grassroots funding mark. Muted to
+// greyscale by default, revealing its brand colours on hover of the parent link.
+function NorskTippingIcon({ size = 24 }: LogfontIconProps) {
+    return (
+        <span
+            aria-hidden='true'
+            className='flex items-center justify-center transition-all duration-200
+                brightness-0 invert-[.69] group-hover:brightness-100 group-hover:invert-0'
+            style={{ width: size, height: size }}
+        >
+            <svg xmlns='http://www.w3.org/2000/svg' viewBox='294.1897 0 466.6665 466.6665'
+                width={size} height={size} className='block'>
+                <g transform='matrix(1.3333333,0,0,-1.3333333,0,743.83867)'>
+                    <path transform='translate(292.1823,557.8794)' fill='#ffc000'
+                        d='M 0,0 -71.54,-71.539 31.939,-175 -71.54,-278.461 0,-350 175,-175 Z' />
+                    <path transform='translate(220.6427,486.3399)' fill='#96d94e'
+                        d='M 0,0 246.539,-103.461 H 103.479 Z' />
+                    <path transform='translate(292.1823,557.8794)' fill='#00a332'
+                        d='M 0,0 -71.54,-71.539 175,-175 Z' />
+                    <path transform='translate(324.1212,382.8785)' fill='#ff7337'
+                        d='m 0,0 -31.939,-175 175,175 z' />
+                    <path transform='translate(499.104,557.8794)' fill='#ff7ea9'
+                        d='m 0,0 -87.243,-87.243 71.539,-71.54 87.242,87.244 z' />
+                    <path transform='translate(499.104,557.8794)' fill='#ef2500'
+                        d='m 0,0 -15.704,-158.783 87.242,87.244 z' />
+                    <path transform='translate(570.6422,279.4181)' fill='#00c1ff'
+                        d='m 0,0 -87.243,87.243 -71.54,-71.539 87.244,-87.243 z' />
+                    <path transform='translate(499.1031,207.879)' fill='#0058ff'
+                        d='M 0,0 -87.244,87.243 71.539,71.539 Z' />
+                </g>
+            </svg>
+        </span>
+    )
+}
+
 function InstagramIcon({ size = 24 }: LogfontIconProps) {
     return (
         <span className='relative block' style={{ width: size, height: size }}>
@@ -65,6 +100,7 @@ export const loginSocialLinks: FooterSocialLink[] = [
     { title: 'Instagram', href: 'https://www.instagram.com/login_linjeforening/',                       icon: <InstagramIcon size={24} />,                                                           },
     { title: 'Facebook',  href: 'https://facebook.com/LogNTNU',                                         icon: <Facebook size={24} />,          hoverClass: 'hover:text-[#2c87ff]'                  },
     { title: 'LinkedIn',  href: 'https://www.linkedin.com/company/linjeforeningen-login/about',         icon: <Linkedin size={24} />,          hoverClass: 'hover:text-[#1a7bdd]'                  },
-    { title: 'GitHub',    href: 'https://github.com/login-linjeforeningen-for-it',                     icon: <Github size={24} />,            hoverClass: 'hover:text-white'                       },
-    { title: 'Wiki',      href: 'https://outline.login.no/s/doc',                                      icon: <Wikijs size={24} />,            hoverClass: 'hover:text-login-50'                   },
+    { title: 'GitHub',        href: 'https://github.com/login-linjeforeningen-for-it',                                   icon: <Github size={24} />,          hoverClass: 'hover:text-white'     },
+    { title: 'Wiki',          href: 'https://outline.login.no/s/doc',                                                    icon: <Wikijs size={24} />,          hoverClass: 'hover:text-login-50'  },
+    { title: 'Norsk Tipping', href: 'https://www.norsk-tipping.no/grasrotandelen/din-mottaker/811940372',                icon: <NorskTippingIcon size={24} /> },
 ]

package/src/components/index.ts

@@ -1,4 +1,3 @@
-'use client'
 export { default as Input } from './inputs/input'
 export { default as SearchInput } from './inputs/searchInput'
 export { default as Textarea } from './inputs/textarea'

package/src/components/inputs/checkbox.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Check } from 'lucide-react'
 import { FieldWrapper, InputLabel } from './shared'
 

package/src/components/inputs/input.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { type ChangeEvent, type JSX, useRef, useState, useId } from 'react'
 import { Calendar, Clock } from 'lucide-react'
 import { FieldWrapper } from './shared'

package/src/components/inputs/radio.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { FieldWrapper, InputLabel } from './shared'
 
 export type RadioOption = {

package/src/components/inputs/range.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { FieldWrapper } from './shared'
 
 export type RangeProps = Omit<React.ComponentProps<'input'>, 'name'> & {

package/src/components/inputs/shared/colorPickerPopup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { type JSX, useState, useEffect, useRef } from 'react'
 
 export type ColorPickerPopupProps = {

package/src/components/inputs/shared/dateTimePickerPopup.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState, useEffect } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 

package/src/components/inputs/textarea.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useState } from 'react'
 import { Eye, Pencil } from 'lucide-react'
 import { FieldWrapper } from './shared'

package/src/components/inputs/toggle.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 type ToggleOption<T> = {
     value: T
     label?: string

package/src/components/toast/toastItem.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { ToastType, ToastProps } from 'uibee/components'

package/src/globals.css

@@ -2,6 +2,11 @@
 
 @config '../tailwind.config.ts';
 
+/* Apply hover styles on :hover directly instead of gating them behind
+   @media (hover: hover), which never matches on devices reporting hover: none. */
+@custom-variant hover (&:hover);
+@custom-variant group-hover (&:is(:where(.group):hover *));
+
 @theme {
     --breakpoint-100px: 100px;
 	--breakpoint-200px: 200px;

package/tsdown.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
     outExtensions: () => ({ js: '.js', dts: '.d.ts' }),
     dts: true,
     clean: true,
+    unbundle: true,
     deps: {
         onlyBundle: false,
     },