Big Updated, added some tests, added comments for all functions, I forgot the rest

packages/ui/src/cmp/avatar.tsx

@@ -3,6 +3,19 @@ import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 
 import { cn } from "../lib/utils";
 
+/**
+ * Executes Avatar.
+ * @param {
+  className,
+  size = "default",
+  ...props
+} Parameter {
+  className,
+  size = "default",
+  ...props
+}.
+ * @returns unknown.
+ */
 function Avatar({
   className,
   size = "default",
@@ -23,6 +36,11 @@ function Avatar({
   );
 }
 
+/**
+ * Executes AvatarImage.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
   return (
     <AvatarPrimitive.Image
@@ -36,6 +54,17 @@ function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
   );
 }
 
+/**
+ * Executes AvatarFallback.
+ * @param {
+  className,
+  ...props
+} Parameter {
+  className,
+  ...props
+}.
+ * @returns unknown.
+ */
 function AvatarFallback({
   className,
   ...props
@@ -52,6 +81,11 @@ function AvatarFallback({
   );
 }
 
+/**
+ * Executes AvatarBadge.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
@@ -68,6 +102,11 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
   );
 }
 
+/**
+ * Executes AvatarGroup.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -81,6 +120,17 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+/**
+ * Executes AvatarGroupCount.
+ * @param {
+  className,
+  ...props
+} Parameter {
+  className,
+  ...props
+}.
+ * @returns unknown.
+ */
 function AvatarGroupCount({
   className,
   ...props

packages/ui/src/cmp/button.tsx

@@ -38,6 +38,21 @@ const buttonVariants = cva(
   },
 );
 
+/**
+ * Executes Button.
+ * @param {
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+} Parameter {
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}.
+ * @returns unknown.
+ */
 function Button({
   className,
   variant = "default",

packages/ui/src/cmp/card.tsx

@@ -2,6 +2,19 @@ import * as React from "react";
 
 import { cn } from "../lib/utils";
 
+/**
+ * Executes Card.
+ * @param {
+  className,
+  size = "default",
+  ...props
+} Parameter {
+  className,
+  size = "default",
+  ...props
+}.
+ * @returns unknown.
+ */
 function Card({
   className,
   size = "default",
@@ -20,6 +33,11 @@ function Card({
   );
 }
 
+/**
+ * Executes CardHeader.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -33,6 +51,11 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+/**
+ * Executes CardTitle.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -43,6 +66,11 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+/**
+ * Executes CardDescription.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -53,6 +81,11 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+/**
+ * Executes CardAction.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -66,6 +99,11 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+/**
+ * Executes CardContent.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -76,6 +114,11 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+/**
+ * Executes CardFooter.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div

packages/ui/src/cmp/checkbox.tsx

@@ -3,6 +3,11 @@ import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { cn } from "../lib/utils";
 import { CheckIcon } from "lucide-react";
 
+/**
+ * Executes Checkbox.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
     <CheckboxPrimitive.Root

packages/ui/src/cmp/context-menu.tsx

@@ -4,16 +4,37 @@ import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu
 import { cn } from "../lib/utils";
 import { ChevronRightIcon, CheckIcon } from "lucide-react";
 
+/**
+ * Executes ContextMenu.
+ * @param { ...props } Parameter { ...props }.
+ * @returns unknown.
+ */
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
 
+/**
+ * Executes ContextMenuPortal.
+ * @param { ...props } Parameter { ...props }.
+ * @returns unknown.
+ */
 function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
   return (
     <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
   );
 }
 
+/**
+ * Executes ContextMenuTrigger.
+ * @param {
+  className,
+  ...props
+} Parameter {
+  className,
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuTrigger({
   className,
   ...props
@@ -27,6 +48,25 @@ function ContextMenuTrigger({
   );
 }
 
+/**
+ * Executes ContextMenuContent.
+ * @param {
+  className,
+  align = "start",
+  alignOffset = 4,
+  side = "right",
+  sideOffset = 0,
+  ...props
+} Parameter {
+  className,
+  align = "start",
+  alignOffset = 4,
+  side = "right",
+  sideOffset = 0,
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuContent({
   className,
   align = "start",
@@ -61,12 +101,30 @@ function ContextMenuContent({
   );
 }
 
+/**
+ * Executes ContextMenuGroup.
+ * @param { ...props } Parameter { ...props }.
+ * @returns unknown.
+ */
 function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
   return (
     <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
   );
 }
 
+/**
+ * Executes ContextMenuLabel.
+ * @param {
+  className,
+  inset,
+  ...props
+} Parameter {
+  className,
+  inset,
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuLabel({
   className,
   inset,
@@ -87,6 +145,21 @@ function ContextMenuLabel({
   );
 }
 
+/**
+ * Executes ContextMenuItem.
+ * @param {
+  className,
+  inset,
+  variant = "default",
+  ...props
+} Parameter {
+  className,
+  inset,
+  variant = "default",
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuItem({
   className,
   inset,
@@ -110,12 +183,32 @@ function ContextMenuItem({
   );
 }
 
+/**
+ * Executes ContextMenuSub.
+ * @param { ...props } Parameter { ...props }.
+ * @returns unknown.
+ */
 function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
   return (
     <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
   );
 }
 
+/**
+ * Executes ContextMenuSubTrigger.
+ * @param {
+  className,
+  inset,
+  children,
+  ...props
+} Parameter {
+  className,
+  inset,
+  children,
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuSubTrigger({
   className,
   inset,
@@ -140,6 +233,15 @@ function ContextMenuSubTrigger({
   );
 }
 
+/**
+ * Executes ContextMenuSubContent.
+ * @param {
+  ...props
+} Parameter {
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuSubContent({
   ...props
 }: React.ComponentProps<typeof ContextMenuContent>) {
@@ -153,6 +255,23 @@ function ContextMenuSubContent({
   );
 }
 
+/**
+ * Executes ContextMenuCheckboxItem.
+ * @param {
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+} Parameter {
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuCheckboxItem({
   className,
   children,
@@ -183,6 +302,15 @@ function ContextMenuCheckboxItem({
   );
 }
 
+/**
+ * Executes ContextMenuRadioGroup.
+ * @param {
+  ...props
+} Parameter {
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuRadioGroup({
   ...props
 }: ContextMenuPrimitive.RadioGroup.Props) {
@@ -194,6 +322,21 @@ function ContextMenuRadioGroup({
   );
 }
 
+/**
+ * Executes ContextMenuRadioItem.
+ * @param {
+  className,
+  children,
+  inset,
+  ...props
+} Parameter {
+  className,
+  children,
+  inset,
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuRadioItem({
   className,
   children,
@@ -222,6 +365,17 @@ function ContextMenuRadioItem({
   );
 }
 
+/**
+ * Executes ContextMenuSeparator.
+ * @param {
+  className,
+  ...props
+} Parameter {
+  className,
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuSeparator({
   className,
   ...props
@@ -235,6 +389,17 @@ function ContextMenuSeparator({
   );
 }
 
+/**
+ * Executes ContextMenuShortcut.
+ * @param {
+  className,
+  ...props
+} Parameter {
+  className,
+  ...props
+}.
+ * @returns unknown.
+ */
 function ContextMenuShortcut({
   className,
   ...props

packages/ui/src/cmp/input.tsx

@@ -3,6 +3,11 @@ import { Input as InputPrimitive } from "@base-ui/react/input";
 
 import { cn } from "../lib/utils";
 
+/**
+ * Executes Input.
+ * @param { className, type, ...props } Parameter { className, type, ...props }.
+ * @returns unknown.
+ */
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <InputPrimitive

packages/ui/src/cmp/label.tsx

@@ -2,6 +2,11 @@ import * as React from "react";
 
 import { cn } from "../lib/utils";
 
+/**
+ * Executes Label.
+ * @param { className, ...props } Parameter { className, ...props }.
+ * @returns unknown.
+ */
 function Label({ className, ...props }: React.ComponentProps<"label">) {
   return (
     <label

packages/ui/src/cmp/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

packages/ui/src/cmp/sonner.tsx

@@ -8,6 +8,11 @@ import {
   Loader2Icon,
 } from "lucide-react";
 
+/**
+ * Executes Toaster.
+ * @param { ...props } Parameter { ...props }.
+ * @returns unknown.
+ */
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme();
 

packages/ui/src/lib/utils.ts

@@ -1,6 +1,11 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * Executes cn.
+ * @param inputs Parameter inputs.
+ * @returns unknown.
+ */
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

packages/ui/src/link.tsx

@@ -1,5 +1,10 @@
 import { ExternalLink } from "lucide-react";
 
+/**
+ * Executes Link.
+ * @param props Parameter props.
+ * @returns unknown.
+ */
 export default function Link(props: { link: string; label: string }) {
   return (
     <a

packages/ui/src/screens/error.tsx

@@ -1,5 +1,10 @@
 import Link from "../link";
 
+/**
+ * Executes Screen.
+ * @param props Parameter props.
+ * @returns unknown.
+ */
 export default function Screen(props: { error: string; description: string }) {
   return (
     <div className="bg-background w-full h-screen flex flex-col justify-center items-center">

packages/ui/src/screens/loading.tsx

@@ -9,6 +9,11 @@ type ScreenProps = {
   fullscreen?: boolean;
 };
 
+/**
+ * Executes Screen.
+ * @param props Parameter props.
+ * @returns unknown.
+ */
 export default function Screen(props: ScreenProps) {
   const [displayProgress, setDisplayProgress] = React.useState(0);
   const displayProgressRef = React.useRef(0);
@@ -30,6 +35,11 @@ export default function Screen(props: ScreenProps) {
     const startTime = performance.now();
     let frameId = 0;
 
+    /**
+     * Executes animate.
+     * @param now Parameter now.
+     * @returns unknown.
+     */
     function animate(now: number) {
       const elapsed = now - startTime;
       const t = Math.min(elapsed / duration, 1);

packages/ui/src/theme.tsx

@@ -22,6 +22,11 @@ const ThemeProviderContext = React.createContext<
   ThemeProviderState | undefined
 >(undefined);
 
+/**
+ * Executes isTheme.
+ * @param value Parameter value.
+ * @returns value is Theme.
+ */
 function isTheme(value: string | null): value is Theme {
   if (value === null) {
     return false;
@@ -30,6 +35,11 @@ function isTheme(value: string | null): value is Theme {
   return THEME_VALUES.includes(value as Theme);
 }
 
+/**
+ * Executes getSystemTheme.
+ * @param none This function has no parameters.
+ * @returns ResolvedTheme.
+ */
 function getSystemTheme(): ResolvedTheme {
   if (window.matchMedia(COLOR_SCHEME_QUERY).matches) {
     return "dark";
@@ -38,6 +48,11 @@ function getSystemTheme(): ResolvedTheme {
   return "light";
 }
 
+/**
+ * Executes disableTransitionsTemporarily.
+ * @param none This function has no parameters.
+ * @returns unknown.
+ */
 function disableTransitionsTemporarily() {
   const style = document.createElement("style");
   style.appendChild(
@@ -57,6 +72,11 @@ function disableTransitionsTemporarily() {
   };
 }
 
+/**
+ * Executes isEditableTarget.
+ * @param target Parameter target.
+ * @returns unknown.
+ */
 function isEditableTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLElement)) {
     return false;
@@ -76,6 +96,23 @@ function isEditableTarget(target: EventTarget | null) {
   return false;
 }
 
+/**
+ * Executes ThemeProvider.
+ * @param {
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+  disableTransitionOnChange = true,
+  ...props
+} Parameter {
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+  disableTransitionOnChange = true,
+  ...props
+}.
+ * @returns unknown.
+ */
 export function ThemeProvider({
   children,
   defaultTheme = "system",
@@ -127,6 +164,11 @@ export function ThemeProvider({
     }
 
     const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY);
+    /**
+     * Executes handleChange.
+     * @param none This function has no parameters.
+     * @returns unknown.
+     */
     const handleChange = () => {
       applyTheme("system");
     };
@@ -139,6 +181,11 @@ export function ThemeProvider({
   }, [theme, applyTheme]);
 
   React.useEffect(() => {
+    /**
+     * Executes handleKeyDown.
+     * @param event Parameter event.
+     * @returns unknown.
+     */
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.repeat) {
         return;
@@ -179,6 +226,11 @@ export function ThemeProvider({
   }, [storageKey]);
 
   React.useEffect(() => {
+    /**
+     * Executes handleStorageChange.
+     * @param event Parameter event.
+     * @returns unknown.
+     */
     const handleStorageChange = (event: StorageEvent) => {
       if (event.storageArea !== localStorage) {
         return;
@@ -218,6 +270,11 @@ export function ThemeProvider({
   );
 }
 
+/**
+ * Executes useTheme.
+ * @param none This function has no parameters.
+ * @returns unknown.
+ */
 export const useTheme = () => {
   const context = React.useContext(ThemeProviderContext);