@k3-universe/react-kit 0.0.28 → 0.0.29

package/src/kit/components/fileuploader/index.ts

@@ -1,3 +1,3 @@
-export * from "./types";
-export { default as FileUploader } from "./FileUploader";
-export { FileUploader as default } from "./FileUploader";
+export * from './types';
+export { default as FileUploader } from './FileUploader';
+export { FileUploader as default } from './FileUploader';

package/src/kit/components/fileuploader/types.ts

@@ -1,6 +1,6 @@
-import type { Accept } from "react-dropzone";
+import type { Accept } from 'react-dropzone';
 
-export type FileUploadStatus = "idle" | "uploading" | "success" | "error";
+export type FileUploadStatus = 'idle' | 'uploading' | 'success' | 'error';
 
 export type FileRecord = {
   id?: string | number;
@@ -22,7 +22,7 @@ export type FileRecord = {
   meta?: Record<string, unknown>;
 };
 
-export type FileUploaderLayout = "grid" | "list";
+export type FileUploaderLayout = 'grid' | 'list';
 
 export type FileUploaderProps = {
   /** Controlled value of files */

package/src/kit/components/forminfo/FormInfoError.tsx

@@ -22,7 +22,7 @@ const ignoredKeys = new Set(['message', 'type', 'types', 'ref']);
 
 function collectMessages(
   errors: FieldErrors<FieldValues> | undefined,
-  parentPath: string[] = []
+  parentPath: string[] = [],
 ): ErrorMessage[] {
   if (!errors) return [];
 
@@ -35,9 +35,10 @@ function collectMessages(
   for (const [key, value] of entries) {
     if (!value) continue;
 
-    const currentPath = typeof key === 'string' && key === 'root'
-      ? parentPath
-      : [...parentPath, String(key)];
+    const currentPath =
+      typeof key === 'string' && key === 'root'
+        ? parentPath
+        : [...parentPath, String(key)];
 
     if (typeof value === 'object') {
       if ('message' in value && value.message) {
@@ -63,12 +64,15 @@ function collectMessages(
           : Object.entries(value);
 
         const nestedEntries = source.filter(
-          ([nestedKey]) => !ignoredKeys.has(nestedKey)
+          ([nestedKey]) => !ignoredKeys.has(nestedKey),
         );
 
         if (nestedEntries.length > 0) {
-          const nested: Record<string, unknown> = Object.fromEntries(nestedEntries);
-          messages.push(...collectMessages(nested as FieldErrors<FieldValues>, currentPath));
+          const nested: Record<string, unknown> =
+            Object.fromEntries(nestedEntries);
+          messages.push(
+            ...collectMessages(nested as FieldErrors<FieldValues>, currentPath),
+          );
         }
       }
     }
@@ -84,12 +88,22 @@ export function FormInfoError<TFieldValues extends FieldValues = FieldValues>({
   className,
   showFieldPath = true,
 }: FormInfoErrorProps<TFieldValues>) {
-  const messages = collectMessages(errors as FieldErrors<FieldValues> | undefined);
+  const messages = collectMessages(
+    errors as FieldErrors<FieldValues> | undefined,
+  );
 
   if (messages.length === 0) {
     return null;
   }
 
+  const keyOccurrences = new Map<string, number>();
+  const getMessageKey = (path: string, message: string) => {
+    const baseKey = [path, message].filter(Boolean).join(':') || message;
+    const occurrence = keyOccurrences.get(baseKey) ?? 0;
+    keyOccurrences.set(baseKey, occurrence + 1);
+    return occurrence === 0 ? baseKey : `${baseKey}:${occurrence}`;
+  };
+
   return (
     <Alert variant="destructive" className={cn('gap-2', className)}>
       <AlertCircle className="mt-1" />
@@ -99,12 +113,13 @@ export function FormInfoError<TFieldValues extends FieldValues = FieldValues>({
             {title ?? 'Please review the following issues'}
           </AlertTitle>
           <AlertDescription>
-            {description ?? 'Some fields need your attention before continuing.'}
+            {description ??
+              'Some fields need your attention before continuing.'}
           </AlertDescription>
         </div>
         <ul className="grid gap-1 text-sm text-destructive">
-          {messages.map(({ path, message }, index) => (
-            <li key={`${path}-${index}`} className="leading-snug">
+          {messages.map(({ path, message }) => (
+            <li key={getMessageKey(path, message)} className="leading-snug">
               {showFieldPath && path ? (
                 <span className="font-medium">{path}: </span>
               ) : null}

package/src/kit/components/login/Login.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 export type LoginProps = {
   // Application title shown above the form (e.g., "Acme Inc")
@@ -50,13 +50,19 @@ export function Login({
   children,
 }: LoginProps) {
   return (
-    <div className={['grid min-h-dvh grid-cols-1 md:grid-cols-2', className].filter(Boolean).join(' ')}>
+    <div
+      className={['grid min-h-dvh grid-cols-1 md:grid-cols-2', className]
+        .filter(Boolean)
+        .join(' ')}
+    >
       {/* Left column: form section */}
       <div className="flex items-center justify-center p-6 md:p-10">
         <div className="w-full max-w-md">
           {/* Title */}
           <div className="mb-6 text-center">
-            <h1 className="text-2xl font-bold leading-tight tracking-tight">{appTitle}</h1>
+            <h1 className="text-2xl font-bold leading-tight tracking-tight">
+              {appTitle}
+            </h1>
             {subtitle ? (
               <p className="text-muted-foreground mt-1 text-sm">{subtitle}</p>
             ) : null}
@@ -70,7 +76,10 @@ export function Login({
             {forgotPasswordHref ? (
               <div className="text-center text-sm">
                 {forgotPasswordLabel}{' '}
-                <a href={forgotPasswordHref} className="underline underline-offset-4">
+                <a
+                  href={forgotPasswordHref}
+                  className="underline underline-offset-4"
+                >
                   {forgotPasswordLinkLabel}
                 </a>
               </div>

package/src/kit/components/monthpicker/MonthInput.tsx

@@ -4,10 +4,15 @@ import * as React from 'react';
 import { Calendar as CalendarIcon } from 'lucide-react';
 import { cn } from '../../../shadcn/lib/utils';
 import { Button } from '../../../shadcn/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '../../../shadcn/ui/popover';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../../../shadcn/ui/popover';
 import { MonthPicker } from './MonthPicker';
 
-export interface MonthInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface MonthInputProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   value?: Date | null;
   onChange?: (date: Date | null) => void;
   placeholder?: string;
@@ -42,7 +47,8 @@ export function MonthInput({
 }: MonthInputProps) {
   const [internalOpen, setInternalOpen] = React.useState(false);
   const isOpen = typeof props.open === 'boolean' ? props.open : internalOpen;
-  const setOpen = (o: boolean) => (props.onOpenChange ? props.onOpenChange(o) : setInternalOpen(o));
+  const setOpen = (o: boolean) =>
+    props.onOpenChange ? props.onOpenChange(o) : setInternalOpen(o);
   const [draft, setDraft] = React.useState<Date | null>(value ?? null);
 
   React.useEffect(() => {
@@ -66,7 +72,10 @@ export function MonthInput({
             type="button"
             disabled={disabled}
             variant={buttonVariant}
-            className={cn('w-[240px] justify-start text-left font-normal', !value && 'text-muted-foreground')}
+            className={cn(
+              'w-[240px] justify-start text-left font-normal',
+              !value && 'text-muted-foreground',
+            )}
           >
             <CalendarIcon className="mr-2 h-4 w-4" />
             {label}

package/src/kit/components/monthpicker/MonthPicker.tsx

@@ -107,10 +107,10 @@ function MonthCal({
   onYearForward,
 }: MonthCalProps) {
   const [year, setYear] = React.useState<number>(
-    selectedMonth?.getFullYear() ?? new Date().getFullYear()
+    selectedMonth?.getFullYear() ?? new Date().getFullYear(),
   );
   const [month, setMonth] = React.useState<number>(
-    selectedMonth?.getMonth() ?? new Date().getMonth()
+    selectedMonth?.getMonth() ?? new Date().getMonth(),
   );
   const [menuYear, setMenuYear] = React.useState<number>(year);
 
@@ -135,7 +135,7 @@ function MonthCal({
             }}
             className={cn(
               buttonVariants({ variant: variant?.chevrons ?? 'outline' }),
-              'inline-flex items-center justify-center h-7 w-7 p-0 absolute left-1'
+              'inline-flex items-center justify-center h-7 w-7 p-0 absolute left-1',
             )}
           >
             <ChevronLeft className="opacity-50 h-4 w-4" />
@@ -148,7 +148,7 @@ function MonthCal({
             }}
             className={cn(
               buttonVariants({ variant: variant?.chevrons ?? 'outline' }),
-              'inline-flex items-center justify-center h-7 w-7 p-0 absolute right-1'
+              'inline-flex items-center justify-center h-7 w-7 p-0 absolute right-1',
             )}
           >
             <ChevronRight className="opacity-50 h-4 w-4" />
@@ -157,10 +157,10 @@ function MonthCal({
       </div>
       <table className="w-full border-collapse space-y-1">
         <tbody>
-          {MONTHS.map((monthRow, a) => {
+          {MONTHS.map((monthRow) => {
+            const rowKey = monthRow.map((month) => month.number).join('-');
             return (
-              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-              <tr key={`row-${a}`} className="flex w-full mt-2">
+              <tr key={rowKey} className="flex w-full mt-2">
                 {monthRow.map((m) => {
                   return (
                     <td
@@ -188,7 +188,8 @@ function MonthCal({
                             : false) ||
                           (disabledDatesMapped
                             ? disabledDatesMapped?.some(
-                                (d) => d.year === menuYear && d.month === m.number
+                                (d) =>
+                                  d.year === menuYear && d.month === m.number,
                               )
                             : false)
                         }
@@ -196,10 +197,10 @@ function MonthCal({
                           buttonVariants({
                             variant:
                               month === m.number && menuYear === year
-                                ? variant?.calendar?.selected ?? 'default'
-                                : variant?.calendar?.main ?? 'ghost',
+                                ? (variant?.calendar?.selected ?? 'default')
+                                : (variant?.calendar?.main ?? 'ghost'),
                           }),
-                          'h-full w-full p-0 font-normal aria-selected:opacity-100'
+                          'h-full w-full p-0 font-normal aria-selected:opacity-100',
                         )}
                       >
                         {callbacks?.monthLabel

package/src/kit/components/monthpicker/MonthRangeInput.tsx

@@ -4,10 +4,15 @@ import * as React from 'react';
 import { Calendar as CalendarIcon } from 'lucide-react';
 import { cn } from '../../../shadcn/lib/utils';
 import { Button } from '../../../shadcn/ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '../../../shadcn/ui/popover';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../../../shadcn/ui/popover';
 import { MonthRangePicker } from './MonthRangePicker';
 
-export interface MonthRangeInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface MonthRangeInputProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   value?: { start?: Date | null; end?: Date | null } | null;
   onChange?: (range: { start?: Date | null; end?: Date | null } | null) => void;
   placeholder?: string;
@@ -44,8 +49,12 @@ export function MonthRangeInput({
 }: MonthRangeInputProps) {
   const [internalOpen, setInternalOpen] = React.useState(false);
   const isOpen = typeof props.open === 'boolean' ? props.open : internalOpen;
-  const setOpen = (o: boolean) => (props.onOpenChange ? props.onOpenChange(o) : setInternalOpen(o));
-  const [draft, setDraft] = React.useState<{ start?: Date | null; end?: Date | null } | null>(value ?? null);
+  const setOpen = (o: boolean) =>
+    props.onOpenChange ? props.onOpenChange(o) : setInternalOpen(o);
+  const [draft, setDraft] = React.useState<{
+    start?: Date | null;
+    end?: Date | null;
+  } | null>(value ?? null);
 
   React.useEffect(() => {
     if (isOpen) {
@@ -58,7 +67,8 @@ export function MonthRangeInput({
     const e = value?.end ?? null;
     if (format) return format(s, e);
     if (s && e) {
-      const fmt = (d: Date) => d.toLocaleDateString(undefined, { year: 'numeric', month: 'short' });
+      const fmt = (d: Date) =>
+        d.toLocaleDateString(undefined, { year: 'numeric', month: 'short' });
       return `${fmt(s)} – ${fmt(e)}`;
     }
     return placeholder;
@@ -72,15 +82,26 @@ export function MonthRangeInput({
             type="button"
             disabled={disabled}
             variant={buttonVariant}
-            className={cn('w-[280px] justify-start text-left font-normal', !value && 'text-muted-foreground')}
+            className={cn(
+              'w-[280px] justify-start text-left font-normal',
+              !value && 'text-muted-foreground',
+            )}
           >
             <CalendarIcon className="mr-2 h-4 w-4" />
             {label}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="p-2 w-auto max-w-none" align="start" side={popoverSide}>
+        <PopoverContent
+          className="p-2 w-auto max-w-none"
+          align="start"
+          side={popoverSide}
+        >
           <MonthRangePicker
-            selectedMonthRange={draft?.start && draft?.end ? { start: draft.start, end: draft.end } : undefined}
+            selectedMonthRange={
+              draft?.start && draft?.end
+                ? { start: draft.start, end: draft.end }
+                : undefined
+            }
             onStartMonthSelect={(d) => {
               if (disabled) return;
               setDraft({ start: d, end: d });

package/src/kit/components/monthpicker/MonthRangePicker.tsx

@@ -11,8 +11,8 @@ const addMonths = (input: Date, months: number) => {
   date.setDate(
     Math.min(
       input.getDate(),
-      getDaysInMonth(date.getFullYear(), date.getMonth() + 1)
-    )
+      getDaysInMonth(date.getFullYear(), date.getMonth() + 1),
+    ),
   );
   return date;
 };
@@ -174,16 +174,16 @@ function MonthRangeCal({
   onYearForward,
 }: MonthRangeCalProps) {
   const [startYear, setStartYear] = React.useState<number>(
-    selectedMonthRange?.start.getFullYear() ?? new Date().getFullYear()
+    selectedMonthRange?.start.getFullYear() ?? new Date().getFullYear(),
   );
   const [startMonth, setStartMonth] = React.useState<number>(
-    selectedMonthRange?.start?.getMonth() ?? new Date().getMonth()
+    selectedMonthRange?.start?.getMonth() ?? new Date().getMonth(),
   );
   const [endYear, setEndYear] = React.useState<number>(
-    selectedMonthRange?.end?.getFullYear() ?? new Date().getFullYear() + 1
+    selectedMonthRange?.end?.getFullYear() ?? new Date().getFullYear() + 1,
   );
   const [endMonth, setEndMonth] = React.useState<number>(
-    selectedMonthRange?.end?.getMonth() ?? new Date().getMonth()
+    selectedMonthRange?.end?.getMonth() ?? new Date().getMonth(),
   );
   const [rangePending, setRangePending] = React.useState<boolean>(false);
   const [endLocked, setEndLocked] = React.useState<boolean>(true);
@@ -207,7 +207,7 @@ function MonthRangeCal({
               }}
               className={cn(
                 buttonVariants({ variant: variant?.chevrons ?? 'outline' }),
-                'inline-flex items-center justify-center h-7 w-7 p-0 absolute left-1'
+                'inline-flex items-center justify-center h-7 w-7 p-0 absolute left-1',
               )}
             >
               <ChevronLeft className="opacity-50 h-4 w-4" />
@@ -220,7 +220,7 @@ function MonthRangeCal({
               }}
               className={cn(
                 buttonVariants({ variant: variant?.chevrons ?? 'outline' }),
-                'inline-flex items-center justify-center h-7 w-7 p-0 absolute right-1'
+                'inline-flex items-center justify-center h-7 w-7 p-0 absolute right-1',
               )}
             >
               <ChevronRight className="opacity-50 h-4 w-4" />
@@ -234,10 +234,12 @@ function MonthRangeCal({
         </div>
         <table className="w-full border-collapse space-y-1">
           <tbody>
-            {MONTHS.map((monthRow, a) => {
+            {MONTHS.map((monthRow) => {
+              const rowKey = monthRow
+                .map((month) => `${month.yearOffset}-${month.number}`)
+                .join('-');
               return (
-                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                <tr key={`row-${a}`} className="flex w-full mt-2">
+                <tr key={rowKey} className="flex w-full mt-2">
                   {monthRow.map((m, i) => {
                     return (
                       <td
@@ -255,13 +257,13 @@ function MonthRangeCal({
                                       m.number < endMonth)) &&
                                   (rangePending || endLocked)
                                   ? 'text-accent-foreground bg-accent'
-                                  : ''
+                                  : '',
                               ),
                               menuYear + m.yearOffset === startYear &&
                                 m.number === startMonth &&
                                 (rangePending || endLocked)
                                 ? 'text-accent-foreground bg-accent rounded-l-md'
-                                : ''
+                                : '',
                             ),
                             menuYear + m.yearOffset === endYear &&
                               m.number === endMonth &&
@@ -269,9 +271,9 @@ function MonthRangeCal({
                               menuYear + m.yearOffset >= startYear &&
                               m.number >= startMonth
                               ? 'text-accent-foreground bg-accent rounded-r-md'
-                              : ''
+                              : '',
                           ),
-                          i === 3 ? 'mr-2' : i === 4 ? 'ml-2' : ''
+                          i === 3 ? 'mr-2' : i === 4 ? 'ml-2' : '',
                         )}
                         onMouseEnter={() => {
                           if (rangePending && !endLocked) {
@@ -297,7 +299,7 @@ function MonthRangeCal({
                                 setEndMonth(m.number);
                                 if (onStartMonthSelect)
                                   onStartMonthSelect(
-                                    new Date(menuYear + m.yearOffset, m.number)
+                                    new Date(menuYear + m.yearOffset, m.number),
                                   );
                               } else {
                                 setRangePending(false);
@@ -309,7 +311,7 @@ function MonthRangeCal({
                                     start: new Date(startYear, startMonth),
                                     end: new Date(
                                       menuYear + m.yearOffset,
-                                      m.number
+                                      m.number,
                                     ),
                                   });
                               }
@@ -322,7 +324,7 @@ function MonthRangeCal({
                               setEndMonth(m.number);
                               if (onStartMonthSelect)
                                 onStartMonthSelect(
-                                  new Date(menuYear + m.yearOffset, m.number)
+                                  new Date(menuYear + m.yearOffset, m.number),
                                 );
                             }
                           }}
@@ -350,10 +352,10 @@ function MonthRangeCal({
                                 (endMonth === m.number &&
                                   menuYear + m.yearOffset === endYear &&
                                   !rangePending)
-                                  ? variant?.calendar?.selected ?? 'default'
-                                  : variant?.calendar?.main ?? 'ghost',
+                                  ? (variant?.calendar?.selected ?? 'default')
+                                  : (variant?.calendar?.main ?? 'ghost'),
                             }),
-                            'h-full w-full p-0 font-normal aria-selected:opacity-100'
+                            'h-full w-full p-0 font-normal aria-selected:opacity-100',
                           )}
                         >
                           {callbacks?.monthLabel

package/src/kit/components/timepicker/TimePicker.tsx

@@ -85,7 +85,7 @@ export function TimePicker({
 
   const setDraftPart = (
     part: 'hour' | 'minute' | 'second' | 'period',
-    val: number | 'AM' | 'PM'
+    val: number | 'AM' | 'PM',
   ) => {
     setDraft((prev) => {
       const base = prev
@@ -99,7 +99,7 @@ export function TimePicker({
               0,
               0,
               0,
-              0
+              0,
             );
           })();
       if (part === 'hour') {
@@ -135,17 +135,17 @@ export function TimePicker({
     () =>
       Array.from(
         { length: Math.ceil(60 / minuteStep) },
-        (_, i) => i * minuteStep
+        (_, i) => i * minuteStep,
       ),
-    [minuteStep]
+    [minuteStep],
   );
   const seconds = React.useMemo(
     () =>
       Array.from(
         { length: Math.ceil(60 / secondStep) },
-        (_, i) => i * secondStep
+        (_, i) => i * secondStep,
       ),
-    [secondStep]
+    [secondStep],
   );
 
   const selectedHour = React.useMemo(() => {
@@ -170,7 +170,7 @@ export function TimePicker({
             variant={buttonVariant}
             className={cn(
               'w-[240px] justify-start text-left font-normal',
-              !value && 'text-muted-foreground'
+              !value && 'text-muted-foreground',
             )}
           >
             <Clock className="mr-2 h-4 w-4" />
@@ -180,7 +180,9 @@ export function TimePicker({
         <PopoverContent className="p-3 w-auto" align="start">
           <div className="flex items-end gap-2">
             <div className="w-24">
-              <div className="mb-1 block text-xs text-muted-foreground">Hour</div>
+              <div className="mb-1 block text-xs text-muted-foreground">
+                Hour
+              </div>
               <Select
                 disabled={disabled}
                 value={String(selectedHour)}
@@ -201,7 +203,9 @@ export function TimePicker({
 
             {(precision === 'minute' || precision === 'second') && (
               <div className="w-24">
-                <div className="mb-1 block text-xs text-muted-foreground">Minute</div>
+                <div className="mb-1 block text-xs text-muted-foreground">
+                  Minute
+                </div>
                 <Select
                   disabled={disabled}
                   value={String(selectedMinute - (selectedMinute % minuteStep))}
@@ -223,7 +227,9 @@ export function TimePicker({
 
             {precision === 'second' && (
               <div className="w-24">
-                <div className="mb-1 block text-xs text-muted-foreground">Second</div>
+                <div className="mb-1 block text-xs text-muted-foreground">
+                  Second
+                </div>
                 <Select
                   disabled={disabled}
                   value={String(selectedSecond - (selectedSecond % secondStep))}
@@ -245,7 +251,9 @@ export function TimePicker({
 
             {hourCycle === 12 && (
               <div className="w-24">
-                <div className="mb-1 block text-xs text-muted-foreground">Period</div>
+                <div className="mb-1 block text-xs text-muted-foreground">
+                  Period
+                </div>
                 <Select
                   disabled={disabled}
                   value={selectedPeriod}