uibee 3.2.0 → 3.3.1

package/dist/components/container/pulseDot.d.ts

@@ -0,0 +1,12 @@
+//#region src/components/container/pulseDot.d.ts
+type PulseDotVariant = 'online' | 'offline' | 'warning' | 'unknown';
+type PulseDotProps = {
+  variant?: PulseDotVariant;
+  size?: 'sm' | 'md' | 'lg';
+};
+declare function PulseDot({
+  variant,
+  size
+}: PulseDotProps): import("react").JSX.Element;
+//#endregion
+export { PulseDot as default };

package/dist/components/container/pulseDot.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/container/pulseDot.tsx
+const variantColor = {
+	online: "bg-green-500",
+	offline: "bg-red-500",
+	warning: "bg-login",
+	unknown: "bg-login-400"
+};
+const sizeClass = {
+	sm: "w-1.5 h-1.5",
+	md: "w-2 h-2",
+	lg: "w-3 h-3"
+};
+function PulseDot({ variant = "online", size = "md" }) {
+	const color = variantColor[variant];
+	const dotSize = sizeClass[size];
+	return /* @__PURE__ */ jsxs("div", {
+		className: `relative grid place-items-center ${dotSize}`,
+		children: [/* @__PURE__ */ jsx("span", { className: `absolute inline-flex h-full w-full rounded-full ${color} opacity-50 animate-ping` }), /* @__PURE__ */ jsx("span", { className: `relative inline-flex rounded-full ${dotSize} ${color}` })]
+	});
+}
+//#endregion
+export { PulseDot as default };

package/dist/components/container/statCard.d.ts

@@ -0,0 +1,18 @@
+import { IconBubbleTone } from "./iconBubble.js";
+import { ElementType } from "react";
+
+//#region src/components/container/statCard.d.ts
+type StatCardProps = {
+  label: string;
+  value: string;
+  icon: ElementType;
+  tone?: IconBubbleTone;
+};
+declare function StatCard({
+  label,
+  value,
+  icon,
+  tone
+}: StatCardProps): import("react").JSX.Element;
+//#endregion
+export { StatCard as default };

package/dist/components/container/statCard.js

@@ -0,0 +1,25 @@
+import Card from "./card.js";
+import IconBubble from "./iconBubble.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/container/statCard.tsx
+function StatCard({ label, value, icon, tone = "slate" }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "p-4",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-3 flex items-center gap-3",
+			children: [/* @__PURE__ */ jsx(IconBubble, {
+				icon,
+				tone
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-login-200",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "truncate text-lg font-semibold text-login-50",
+			title: value,
+			children: value
+		})]
+	});
+}
+//#endregion
+export { StatCard as default };

package/dist/components/container/tabs.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+
+//#region src/components/container/tabs.d.ts
+type Tab = {
+  id: string;
+  label: ReactNode;
+};
+type TabsProps = {
+  tabs: Tab[];
+  defaultTab?: string;
+  activeTab?: string;
+  onTabChange?: (id: string) => void;
+  children: ReactNode;
+  className?: string;
+};
+type TabPanelProps = {
+  id: string;
+  activeTab: string;
+  children: ReactNode;
+};
+declare function Tabs({
+  tabs,
+  defaultTab,
+  activeTab: controlledTab,
+  onTabChange,
+  children,
+  className
+}: TabsProps): import("react").JSX.Element;
+declare function TabPanel({
+  id,
+  activeTab,
+  children
+}: TabPanelProps): import("react").JSX.Element | null;
+//#endregion
+export { TabPanel, Tabs };

package/dist/components/container/tabs.js

@@ -0,0 +1,36 @@
+"use client";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/container/tabs.tsx
+function Tabs({ tabs, defaultTab, activeTab: controlledTab, onTabChange, children, className = "" }) {
+	const [internalTab, setInternalTab] = useState(defaultTab ?? tabs[0]?.id ?? "");
+	const activeTab = controlledTab ?? internalTab;
+	function handleTabChange(id) {
+		if (!controlledTab) setInternalTab(id);
+		onTabChange?.(id);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex gap-1 rounded-md bg-login-500/50 border border-login-500/40 p-1 w-fit",
+			children: tabs.map((tab) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => handleTabChange(tab.id),
+				className: `
+                            px-3 py-1.5 rounded text-sm font-medium transition-all duration-150 cursor-pointer select-none
+                            ${activeTab === tab.id ? "bg-login text-white shadow-sm" : "text-login-200 hover:text-login-50 hover:bg-login-600"}
+                        `,
+				children: tab.label
+			}, tab.id))
+		}), /* @__PURE__ */ jsx("div", {
+			className: "mt-3",
+			children
+		})]
+	});
+}
+function TabPanel({ id, activeTab, children }) {
+	if (activeTab !== id) return null;
+	return /* @__PURE__ */ jsx("div", { children });
+}
+//#endregion
+export { TabPanel, Tabs };

package/dist/components/empty/emptyState.d.ts

@@ -0,0 +1,19 @@
+import { ElementType, ReactNode } from "react";
+
+//#region src/components/empty/emptyState.d.ts
+type EmptyStateProps = {
+  icon?: ElementType;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+};
+declare function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className
+}: EmptyStateProps): import("react").JSX.Element;
+//#endregion
+export { EmptyState as default };

package/dist/components/empty/emptyState.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/empty/emptyState.tsx
+function EmptyState({ icon: Icon, title, description, action, className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col items-center justify-center gap-3 py-12 text-center ${className}`,
+		children: [
+			Icon && /* @__PURE__ */ jsx("div", {
+				className: "mb-1 rounded-xl bg-login-600/30 p-3 text-login-400",
+				children: /* @__PURE__ */ jsx(Icon, { className: "h-7 w-7" })
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-semibold text-login-100",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "max-w-xs text-xs leading-relaxed text-login-400",
+				children: description
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "mt-2",
+				children: action
+			})
+		]
+	});
+}
+//#endregion
+export { EmptyState as default };

package/dist/components/footer/footer.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+
+//#region src/components/footer/footer.d.ts
+type Lang = 'no' | 'en';
+type BilingualString = string | {
+  no: string;
+  en: string;
+};
+type FooterColumn = {
+  heading: BilingualString;
+  items: {
+    label: BilingualString;
+    href?: string;
+  }[];
+};
+type FooterSocialLink = {
+  title: string;
+  href: string;
+  icon: ReactNode;
+  hoverClass?: string;
+};
+type FooterProps = {
+  logo: ReactNode;
+  sponsor?: {
+    node: ReactNode;
+    label?: BilingualString;
+  };
+  columns?: FooterColumn[];
+  socialLinks?: FooterSocialLink[];
+  copyright: BilingualString;
+  version?: {
+    tag: string;
+    href: string;
+  };
+  lang?: Lang;
+  className?: string;
+};
+declare function Footer({
+  logo,
+  sponsor,
+  columns,
+  socialLinks,
+  copyright,
+  version,
+  lang,
+  className
+}: FooterProps): import("react").JSX.Element;
+//#endregion
+export { BilingualString, FooterColumn, FooterProps, FooterSocialLink, Lang, Footer as default };

package/dist/components/footer/footer.js

@@ -0,0 +1,109 @@
+import VersionTag from "../version/version.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link.js";
+//#region src/components/footer/footer.tsx
+function t(s, lang) {
+	return typeof s === "string" ? s : s[lang];
+}
+function Column({ col, lang }) {
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
+		className: "pb-2 text-sm font-medium tracking-widest text-login-100",
+		children: t(col.heading, lang)
+	}), col.items.map((item, j) => item.href ? item.href.startsWith("/") ? /* @__PURE__ */ jsx(Link, {
+		className: "link--underscore-hover block text-login-50",
+		href: item.href,
+		children: t(item.label, lang)
+	}, j) : /* @__PURE__ */ jsx("a", {
+		className: "link--underscore-hover block text-login-50",
+		href: item.href,
+		children: t(item.label, lang)
+	}, j) : /* @__PURE__ */ jsx("p", {
+		className: "text-login-50",
+		children: t(item.label, lang)
+	}, j))] });
+}
+function Footer({ logo, sponsor, columns, socialLinks, copyright, version, lang = "no", className }) {
+	const year = (/* @__PURE__ */ new Date()).getFullYear();
+	const [firstColumn, ...restColumns] = columns ?? [];
+	const hasRight = columns && columns.length > 0 || socialLinks && socialLinks.length > 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: `max-md:mt-24 bg-login-950 md:mt-40 ${className || ""}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `
+                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" : ""}
+            `,
+			children: [
+				/* @__PURE__ */ jsxs("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",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "block w-full",
+						children: logo
+					}), sponsor && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+						className: "block w-full",
+						children: sponsor.node
+					}), sponsor.label && /* @__PURE__ */ jsx("p", {
+						className: "pt-8 text-center text-login-100",
+						children: t(sponsor.label, lang)
+					})] })]
+				}),
+				firstColumn && /* @__PURE__ */ jsx("div", {
+					className: "\n                        grid w-full self-start max-md:mt-16\n                        max-sm:max-w-60 sm:max-md:max-w-88\n                        md:col-start-2 md:row-start-1 md:max-w-136 md:justify-self-center\n                    ",
+					children: /* @__PURE__ */ jsx(Column, {
+						col: firstColumn,
+						lang
+					})
+				}),
+				restColumns.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: `
+                        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" : ""}
+                    `,
+					children: restColumns.map((col, i) => /* @__PURE__ */ jsx("div", {
+						className: "sm:justify-self-center md:justify-self-end",
+						children: /* @__PURE__ */ jsx(Column, {
+							col,
+							lang
+						})
+					}, i))
+				}),
+				socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "md:col-start-2 md:row-start-2 md:justify-self-end",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "mx-auto mt-20 mb-12 grid w-fit gap-6 max-sm:grid-cols-3 sm:grid-flow-col",
+						children: socialLinks.map((link, i) => /* @__PURE__ */ jsx("a", {
+							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,
+							target: "_blank",
+							rel: "noreferrer",
+							children: link.icon
+						}, i))
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-24 grid grid-cols-[auto_min-content] items-end gap-8 md:col-span-2 md:row-start-3",
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: "text-xs wrap-break-word text-login-100",
+						children: [
+							lang === "no" ? "Opphavsrett" : "Copyright",
+							" © ",
+							year,
+							" ",
+							t(copyright, lang)
+						]
+					}), version && /* @__PURE__ */ jsx(VersionTag, {
+						version: version.tag,
+						url: version.href
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { Footer as default };

package/dist/components/footer/loginContent.d.ts

@@ -0,0 +1,18 @@
+import { FooterColumn, FooterSocialLink } from "./footer.js";
+
+//#region src/components/footer/loginContent.d.ts
+declare const loginAddress: FooterColumn;
+declare const loginEmail: (email: string) => FooterColumn;
+declare const loginCopyright: {
+  readonly no: "Login - Linjeforeningen for IT, NO 811 940 372";
+  readonly en: "Login - Association for IT, NO 811 940 372";
+};
+declare const loginSponsor: {
+  readonly label: {
+    readonly no: "Hovedsamarbeidspartner";
+    readonly en: "Main partner";
+  };
+};
+declare const loginSocialLinks: FooterSocialLink[];
+//#endregion
+export { type FooterSocialLink as LoginSocialLinkData, loginAddress, loginCopyright, loginEmail, loginSocialLinks, loginSponsor };

package/dist/components/footer/loginContent.js

@@ -0,0 +1,138 @@
+import { Discord, Facebook, Github, Linkedin, Wikijs } from "../../icons/icons.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/footer/loginContent.tsx
+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";
+function InstagramIcon({ size = 24 }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative block",
+		style: {
+			width: size,
+			height: size
+		},
+		children: [/* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 1024 1024",
+			width: size,
+			height: size,
+			"aria-hidden": "true",
+			className: "absolute inset-0 transition-opacity duration-200 opacity-100 group-hover:opacity-0",
+			children: /* @__PURE__ */ jsx("g", {
+				transform: "translate(0 960) scale(1 -1)",
+				children: /* @__PURE__ */ jsx("path", {
+					fill: "currentColor",
+					d: INSTAGRAM_PATH
+				})
+			})
+		}), /* @__PURE__ */ jsxs("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 1024 1024",
+			width: size,
+			height: size,
+			"aria-hidden": "true",
+			className: "absolute inset-0 transition-opacity duration-200 opacity-0 group-hover:opacity-100",
+			children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+				id: "ig-grad",
+				x1: "0%",
+				y1: "100%",
+				x2: "100%",
+				y2: "0%",
+				children: [
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: "#fff695"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "45%",
+						stopColor: "#ff5445"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "60%",
+						stopColor: "#ff37c0"
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "90%",
+						stopColor: "#3d6dff"
+					})
+				]
+			}) }), /* @__PURE__ */ jsx("g", {
+				transform: "translate(0 960) scale(1 -1)",
+				children: /* @__PURE__ */ jsx("path", {
+					fill: "url(#ig-grad)",
+					d: INSTAGRAM_PATH
+				})
+			})]
+		})]
+	});
+}
+const loginAddress = {
+	heading: {
+		no: "Adresse",
+		en: "Address"
+	},
+	items: [
+		{ label: "Teknologivegen 22" },
+		{ label: {
+			no: "Bygg A, rom 155",
+			en: "Building A, room 155"
+		} },
+		{ label: "2815 GJØVIK" }
+	]
+};
+const loginEmail = (email) => ({
+	heading: {
+		no: "E-post",
+		en: "Email"
+	},
+	items: [{
+		label: email,
+		href: `mailto:${email}`
+	}]
+});
+const loginCopyright = {
+	no: "Login - Linjeforeningen for IT, NO 811 940 372",
+	en: "Login - Association for IT, NO 811 940 372"
+};
+const loginSponsor = { label: {
+	no: "Hovedsamarbeidspartner",
+	en: "Main partner"
+} };
+const loginSocialLinks = [
+	{
+		title: "Discord",
+		href: "https://discord.gg/login-ntnu",
+		icon: /* @__PURE__ */ jsx(Discord, { size: 24 }),
+		hoverClass: "hover:text-[#6571fd]"
+	},
+	{
+		title: "Instagram",
+		href: "https://www.instagram.com/login_linjeforening/",
+		icon: /* @__PURE__ */ jsx(InstagramIcon, { size: 24 })
+	},
+	{
+		title: "Facebook",
+		href: "https://facebook.com/LogNTNU",
+		icon: /* @__PURE__ */ jsx(Facebook, { size: 24 }),
+		hoverClass: "hover:text-[#2c87ff]"
+	},
+	{
+		title: "LinkedIn",
+		href: "https://www.linkedin.com/company/linjeforeningen-login/about",
+		icon: /* @__PURE__ */ jsx(Linkedin, { size: 24 }),
+		hoverClass: "hover:text-[#1a7bdd]"
+	},
+	{
+		title: "GitHub",
+		href: "https://github.com/login-linjeforeningen-for-it",
+		icon: /* @__PURE__ */ jsx(Github, { size: 24 }),
+		hoverClass: "hover:text-white"
+	},
+	{
+		title: "Wiki",
+		href: "https://outline.login.no/s/doc",
+		icon: /* @__PURE__ */ jsx(Wikijs, { size: 24 }),
+		hoverClass: "hover:text-login-50"
+	}
+];
+//#endregion
+export { loginAddress, loginCopyright, loginEmail, loginSocialLinks, loginSponsor };

package/dist/components/inputs/checkbox.d.ts

@@ -0,0 +1,20 @@
+//#region src/components/inputs/checkbox.d.ts
+type CheckboxOption = {
+  label: string;
+  value: string | number;
+};
+type CheckboxProps = Omit<React.ComponentProps<'input'>, 'name' | 'onChange' | 'value'> & {
+  name: string;
+  label?: string;
+  error?: string;
+  info?: string;
+  description?: string;
+  className?: string;
+  options: CheckboxOption[];
+  value?: (string | number)[];
+  onChange?: (value: (string | number)[]) => void;
+  textSize?: 'sm' | 'md';
+};
+declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
+//#endregion
+export { CheckboxOption, CheckboxProps, Checkbox as default };

package/dist/components/inputs/checkbox.js

@@ -0,0 +1,76 @@
+"use client";
+import InputLabel from "./shared/inputLabel.js";
+import FieldWrapper from "./shared/fieldWrapper.js";
+import "./shared/index.js";
+import { Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/checkbox.tsx
+function Checkbox(props) {
+	const { options, onChange, value, label, description, error, info, name, className, textSize = "sm", ...rest } = props;
+	const selectedValues = Array.isArray(value) ? value : [];
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		label,
+		name,
+		required: rest.required,
+		info,
+		description,
+		error,
+		textSize,
+		className,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2",
+			children: options.map((option) => /* @__PURE__ */ jsx(CheckboxItem, {
+				name,
+				value: option.value,
+				label: option.label,
+				checked: selectedValues.includes(option.value),
+				disabled: rest.disabled,
+				onChange: (e) => {
+					if (!onChange) return;
+					const isChecked = e.target.checked;
+					let newValues = [...selectedValues];
+					if (isChecked) newValues.push(option.value);
+					else newValues = newValues.filter((v) => v !== option.value);
+					onChange(newValues);
+				},
+				className: "mb-0"
+			}, option.value))
+		})
+	});
+}
+function CheckboxItem(props) {
+	const { name, label, error, ...inputProps } = props;
+	const id = inputProps.value ? `${name}-${inputProps.value}` : name;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative w-5 h-5 shrink-0",
+			children: [/* @__PURE__ */ jsx("input", {
+				...inputProps,
+				id,
+				name,
+				type: "checkbox",
+				className: `
+                        peer appearance-none rounded border border-login-500 bg-login-500/50
+                        checked:bg-login checked:border-login
+                        focus:outline-none focus:ring-1 focus:ring-login/30
+                        disabled:opacity-40 disabled:cursor-not-allowed
+                        cursor-pointer transition-all duration-150
+                        w-5 h-5 absolute inset-0
+                        ${error ? "border-red-500/70" : ""}
+                    `
+			}), /* @__PURE__ */ jsx(Check, { className: `
+                        absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
+                        w-3.5 h-3.5 pointer-events-none text-white opacity-0
+                        peer-checked:opacity-100 transition-opacity duration-200
+                    ` })]
+		}), label && /* @__PURE__ */ jsx(InputLabel, {
+			label,
+			name,
+			disabled: inputProps.disabled,
+			className: "select-none cursor-pointer"
+		})]
+	});
+}
+//#endregion
+export { Checkbox as default };

package/dist/components/inputs/fileInput.d.ts

@@ -0,0 +1,19 @@
+//#region src/components/inputs/fileInput.d.ts
+type FileInputProps = {
+  name: string;
+  label?: string;
+  accept?: string;
+  multiple?: boolean;
+  onChange: (files: File[]) => void;
+  className?: string;
+};
+declare function FileInput({
+  name,
+  label,
+  accept,
+  multiple,
+  onChange,
+  className
+}: FileInputProps): import("react").JSX.Element;
+//#endregion
+export { FileInput as default };