@tuturuuu/ui 0.0.4 → 0.1.0

package/src/components/ui/calendar.tsx

@@ -1,7 +1,13 @@
 'use client';
 
+import { ChevronLeft, ChevronRight } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import { format } from 'date-fns';
+import dayjs from 'dayjs';
+import * as React from 'react';
+import { type ClassNames, type DateRange, DayPicker } from 'react-day-picker';
+import { useCalendarPreferences } from '../../hooks/use-calendar-preferences';
 import { buttonVariants } from './button';
-import { DateInput } from './custom/date-input';
 import {
   Select,
   SelectContent,
@@ -9,26 +15,135 @@ import {
   SelectTrigger,
   SelectValue,
 } from './select';
-import { cn } from '@tuturuuu/utils/format';
-import { format } from 'date-fns';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import * as React from 'react';
-import { DayPicker } from 'react-day-picker';
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
-  // eslint-disable-next-line no-unused-vars
+type DayPickerProps = React.ComponentProps<typeof DayPicker>;
+type DistributiveOmit<T, K extends keyof any> = T extends unknown
+  ? Omit<T, K>
+  : never;
+
+type LegacyCalendarClassName =
+  | 'caption'
+  | 'head_row'
+  | 'nav_button'
+  | 'row'
+  | 'table'
+  | 'tbody';
+
+type CalendarClassNames = Partial<ClassNames> &
+  Partial<Record<LegacyCalendarClassName, string>>;
+
+export type CalendarProps = DistributiveOmit<
+  DayPickerProps,
+  'autoFocus' | 'classNames' | 'endMonth' | 'startMonth'
+> & {
   onSubmit?: (date: Date) => void;
+  minDate?: Date;
+  fromDate?: Date;
+  toDate?: Date;
+  initialFocus?: boolean;
+  autoFocus?: boolean;
+  startMonth?: Date;
+  endMonth?: Date;
+  classNames?: CalendarClassNames;
+  preferences?: {
+    weekStartsOn?: 0 | 1 | 6;
+    timezone?: string;
+  };
 };
 
+function normalizeClassNames(classNames: CalendarClassNames) {
+  const {
+    caption,
+    head_row,
+    nav_button,
+    row,
+    table,
+    tbody,
+    ...currentClassNames
+  } = classNames;
+
+  const normalizedClassNames: Partial<ClassNames> = { ...currentClassNames };
+
+  if (caption) {
+    normalizedClassNames.month_caption = cn(
+      normalizedClassNames.month_caption,
+      caption
+    );
+  }
+
+  if (head_row) {
+    normalizedClassNames.weekdays = cn(normalizedClassNames.weekdays, head_row);
+  }
+
+  if (nav_button) {
+    normalizedClassNames.button_next = cn(
+      normalizedClassNames.button_next,
+      nav_button
+    );
+    normalizedClassNames.button_previous = cn(
+      normalizedClassNames.button_previous,
+      nav_button
+    );
+  }
+
+  if (row) {
+    normalizedClassNames.week = cn(normalizedClassNames.week, row);
+  }
+
+  if (table) {
+    normalizedClassNames.month_grid = cn(
+      normalizedClassNames.month_grid,
+      table
+    );
+  }
+
+  if (tbody) {
+    normalizedClassNames.weeks = cn(normalizedClassNames.weeks, tbody);
+  }
+
+  return normalizedClassNames;
+}
+
 function Calendar({
   className,
   classNames,
-  showOutsideDays = true,
   onSubmit,
+  minDate,
+  fromDate,
+  toDate,
+  initialFocus,
+  autoFocus,
+  startMonth,
+  endMonth,
+  preferences: preferencesProp,
   ...props
 }: CalendarProps) {
-  const defaultMonth = props.defaultMonth || new Date();
-  const [month, setMonth] = React.useState<Date>(defaultMonth);
+  const contextPreferences = useCalendarPreferences();
+  const preferences = preferencesProp ?? contextPreferences;
+  const dayPickerProps = props as DayPickerProps;
+
+  const selected = 'selected' in props ? props.selected : undefined;
+
+  const initialMonth = React.useMemo(() => {
+    if (props.month) return props.month;
+    if (props.defaultMonth) return props.defaultMonth;
+
+    if (props.mode === 'single' && selected instanceof Date) return selected;
+
+    if (props.mode === 'range') {
+      const range = selected as DateRange | undefined;
+      if (range?.from instanceof Date) return range.from;
+    }
+
+    if (props.mode === 'multiple') {
+      const dates = selected as Date[] | undefined;
+      if (Array.isArray(dates) && dates[0] instanceof Date) return dates[0];
+    }
+
+    return new Date();
+  }, [props.month, props.defaultMonth, props.mode, selected]);
+
+  const [month, setMonth] = React.useState<Date>(initialMonth);
 
   const years = Array.from({ length: 200 }, (_, i) => {
     const year = new Date().getFullYear() - 100 + i;
@@ -39,7 +154,8 @@ function Calendar({
     const month = new Date(2024, i, 1);
     return {
       value: i.toString(),
-      label: format(month, 'MMMM'),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      label: format(month, 'MMMM', { locale: props.locale as any }),
     };
   });
 
@@ -48,30 +164,48 @@ function Calendar({
   const isCurrentMonth =
     month.getMonth() === new Date().getMonth() && isCurrentYear;
 
+  // Helper functions for minDate logic
+  const isPreviousMonthDisabled = () => {
+    if (!minDate) return false;
+    // Use dayjs for safe date manipulation to avoid issues with month-end dates.
+    const prevMonth = dayjs(month).subtract(1, 'month');
+    return prevMonth.isBefore(dayjs(minDate).startOf('month'));
+  };
+
+  const isYearDisabled = (year: number) => {
+    if (!minDate) return false;
+    return year < minDate.getFullYear();
+  };
+
+  const isMonthDisabled = (monthIndex: number) => {
+    if (!minDate) return false;
+    const selectedYear = month.getFullYear();
+    const minYear = minDate.getFullYear();
+    const minMonth = minDate.getMonth();
+
+    if (selectedYear < minYear) return true;
+    if (selectedYear > minYear) return false;
+    return monthIndex < minMonth;
+  };
+
   return (
     <div className="space-y-4">
-      {props.mode === 'single' && (
-        <div className="flex items-center justify-center border-b p-2">
-          <DateInput
-            value={props.selected as Date}
-            onChange={props.onSelect as any}
-            onSubmit={onSubmit}
-          />
-        </div>
-      )}
-
       <div>
-        <div className="flex items-center justify-between gap-2 border-b px-2 pb-4">
+        <div className="mb-4 flex items-center justify-between gap-2 border-b px-2 pb-4">
           <button
+            type="button"
             onClick={() => {
-              const prev = new Date(month);
-              prev.setMonth(prev.getMonth() - 1);
+              // Use dayjs for safe date manipulation to avoid issues with month-end dates.
+              const prev = dayjs(month).subtract(1, 'month').toDate();
               setMonth(prev);
             }}
             className={cn(
               buttonVariants({ variant: 'ghost', size: 'icon' }),
-              'h-7 w-7 transition-colors hover:bg-accent/50'
+              'h-7 w-7 transition-colors hover:bg-accent/50',
+              className?.includes('bg-background/50') &&
+                'bg-background/50 hover:bg-background/80'
             )}
+            disabled={isPreviousMonthDisabled()}
           >
             <ChevronLeft className="h-4 w-4" />
           </button>
@@ -80,25 +214,24 @@ function Calendar({
             <Select
               value={month.getFullYear().toString()}
               onValueChange={(year) => {
-                const newDate = new Date(month);
-                newDate.setFullYear(parseInt(year));
+                // Use dayjs for safe date manipulation to avoid issues with month-end dates.
+                const newDate = dayjs(month).year(parseInt(year, 10)).toDate();
                 setMonth(newDate);
               }}
             >
               <SelectTrigger
                 className={cn(
-                  'h-8 w-[90px] transition-colors',
-                  isCurrentYear && 'font-medium text-primary'
+                  'h-8 w-22.5 transition-colors',
+                  isCurrentYear && 'font-medium text-primary',
+                  className?.includes('bg-background/50') &&
+                    'bg-background/50 hover:bg-background/80'
                 )}
               >
                 <SelectValue placeholder="Year" />
               </SelectTrigger>
-              <SelectContent
-                position="popper"
-                className="h-[300px] overflow-y-auto"
-              >
+              <SelectContent position="popper" className="h-75 overflow-y-auto">
                 <div className="sticky top-0 -mx-1 flex items-center justify-center border-b bg-background py-1">
-                  <div className="px-2 text-sm font-medium text-muted-foreground">
+                  <div className="px-2 font-medium text-muted-foreground text-sm">
                     {currentYear}
                   </div>
                 </div>
@@ -106,9 +239,10 @@ function Calendar({
                   <SelectItem
                     key={year.value}
                     value={year.value}
+                    disabled={isYearDisabled(parseInt(year.value, 10))}
                     className={cn(
                       'transition-colors',
-                      parseInt(year.value) === currentYear &&
+                      parseInt(year.value, 10) === currentYear &&
                         'font-medium text-primary'
                     )}
                   >
@@ -121,15 +255,19 @@ function Calendar({
             <Select
               value={month.getMonth().toString()}
               onValueChange={(monthValue) => {
-                const newDate = new Date(month);
-                newDate.setMonth(parseInt(monthValue));
+                // Use dayjs for safe date manipulation to avoid issues with month-end dates.
+                const newDate = dayjs(month)
+                  .month(parseInt(monthValue, 10))
+                  .toDate();
                 setMonth(newDate);
               }}
             >
               <SelectTrigger
                 className={cn(
-                  'h-8 w-[130px] transition-colors',
-                  isCurrentMonth && 'font-medium text-primary'
+                  'h-8 w-32.5 transition-colors',
+                  isCurrentMonth && 'font-medium text-primary',
+                  className?.includes('bg-background/50') &&
+                    'bg-background/50 hover:bg-background/80'
                 )}
               >
                 <SelectValue placeholder="Month" />
@@ -139,6 +277,7 @@ function Calendar({
                   <SelectItem
                     key={month.value}
                     value={month.value}
+                    disabled={isMonthDisabled(parseInt(month.value, 10))}
                     className="capitalize"
                   >
                     {month.label}
@@ -149,14 +288,17 @@ function Calendar({
           </div>
 
           <button
+            type="button"
             onClick={() => {
-              const next = new Date(month);
-              next.setMonth(next.getMonth() + 1);
+              // Use dayjs for safe date manipulation to avoid issues with month-end dates.
+              const next = dayjs(month).add(1, 'month').toDate();
               setMonth(next);
             }}
             className={cn(
               buttonVariants({ variant: 'ghost', size: 'icon' }),
-              'h-7 w-7 transition-colors hover:bg-accent/50'
+              'h-7 w-7 transition-colors hover:bg-accent/50',
+              className?.includes('bg-background/50') &&
+                'bg-background/50 hover:bg-background/80'
             )}
           >
             <ChevronRight className="h-4 w-4" />
@@ -164,45 +306,51 @@ function Calendar({
         </div>
 
         <DayPicker
-          {...props}
+          {...dayPickerProps}
           month={month}
           onMonthChange={setMonth}
-          defaultMonth={defaultMonth}
-          showOutsideDays={showOutsideDays}
+          defaultMonth={initialMonth}
+          showOutsideDays={true}
+          weekStartsOn={props.weekStartsOn ?? preferences.weekStartsOn}
           className={cn('', className)}
-          classNames={{
+          classNames={normalizeClassNames({
             root: 'bg-transparent',
             months: 'flex flex-col',
             month:
-              'space-y-4 min-w-[276px] text-center p-2 font-semibold shrink-0',
-            caption: 'hidden',
+              'space-y-4 max-w-[calc(100vw-4rem)] text-center p-2 font-semibold shrink-0',
+            month_caption: 'hidden',
             nav: 'hidden',
-            nav_button: 'hidden',
-            table: 'w-full border-collapse',
-            head_row: 'grid grid-cols-7 gap-1',
+            button_next: 'hidden',
+            button_previous: 'hidden',
+            month_grid: 'w-full border-collapse',
+            weeks: 'flex flex-col gap-1',
+            week: 'grid grid-cols-7 gap-1 mt-2',
+            weekdays: 'grid w-full grid-cols-7 gap-1 mb-2',
             weekday:
               'text-muted-foreground rounded-md font-normal text-[0.8rem] text-center',
-            row: 'grid grid-cols-7 gap-1 mt-2',
             day: 'text-center text-sm p-0 relative w-9',
             day_button: cn(
               buttonVariants({ variant: 'ghost' }),
               'h-9 w-full rounded-md p-0 font-normal transition-colors duration-300',
-              'aria-selected:bg-foreground aria-selected:text-background',
+              'aria-selected:bg-primary aria-selected:text-primary-foreground',
               'hover:bg-accent/50 hover:text-accent-foreground',
-              'hover:aria-selected:bg-foreground hover:aria-selected:text-background'
+              'hover:aria-selected:bg-primary hover:aria-selected:text-primary-foreground'
             ),
-            selected: '!bg-foreground !text-background rounded-md',
-            today: 'bg-accent text-accent-foreground rounded-md font-medium',
-            outside: 'text-muted-foreground opacity-50',
+            selected: 'bg-primary! text-primary-foreground! rounded-md',
+            today:
+              'bg-accent text-accent-foreground rounded-md font-medium ring-2 ring-primary/50',
+            outside: 'text-muted-foreground opacity-40 grayscale',
             disabled: 'text-muted-foreground opacity-50',
-            range_start: '!bg-foreground !text-background rounded-l-md',
-            range_end: '!bg-foreground !text-background rounded-r-md',
-            range_middle: 'aria-selected:bg-foreground/20',
+            range_start: 'bg-primary! text-primary-foreground! rounded-l-md',
+            range_end: 'bg-primary! text-primary-foreground! rounded-r-md',
+            range_middle: 'aria-selected:bg-primary/20',
             hidden: 'invisible',
-            month_grid: 'w-full',
             ...classNames,
-          }}
-          fixedWeeks
+          })}
+          startMonth={startMonth ?? fromDate}
+          endMonth={endMonth ?? toDate}
+          autoFocus={autoFocus ?? initialFocus}
+          disabled={minDate ? { before: minDate } : dayPickerProps.disabled}
         />
       </div>
     </div>

package/src/components/ui/card.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@tuturuuu/utils/format';
-import * as React from 'react';
+import type * as React from 'react';
 
 function Card({ className, ...props }: React.ComponentProps<'div'>) {
   return (
@@ -28,7 +28,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-title"
-      className={cn('leading-none font-semibold tracking-tight', className)}
+      className={cn('font-semibold leading-none tracking-tight', className)}
       {...props}
     />
   );
@@ -38,7 +38,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   );

package/src/components/ui/carousel.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { Button } from './button';
+import { ArrowLeft, ArrowRight } from '@tuturuuu/icons';
 import { cn } from '@tuturuuu/utils/format';
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from 'embla-carousel-react';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
 import * as React from 'react';
+import { Button } from './button';
 
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -117,7 +117,7 @@ function Carousel({
         canScrollNext,
       }}
     >
-      <div
+      <section
         onKeyDownCapture={handleKeyDown}
         className={cn('relative', className)}
         role="region"
@@ -126,7 +126,7 @@ function Carousel({
         {...props}
       >
         {children}
-      </div>
+      </section>
     </CarouselContext.Provider>
   );
 }
@@ -156,6 +156,7 @@ function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
   const { orientation } = useCarousel();
 
   return (
+    // biome-ignore lint/a11y/useSemanticElements: role="group" with aria-roledescription="slide" is intentional WAI-ARIA carousel pattern
     <div
       role="group"
       aria-roledescription="slide"
@@ -232,9 +233,9 @@ function CarouselNext({
 
 export {
   Carousel,
+  type CarouselApi,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-  type CarouselApi,
 };

package/src/components/ui/chart.tsx

@@ -4,6 +4,35 @@ import { cn } from '@tuturuuu/utils/format';
 import * as React from 'react';
 import * as RechartsPrimitive from 'recharts';
 
+// Type definitions for better type safety
+export interface ChartTooltipPayload {
+  value: string | number;
+  name?: string;
+  dataKey?: string;
+  color?: string;
+  payload: Record<string, unknown>;
+}
+
+export interface ChartLegendPayload {
+  value: string;
+  dataKey: string;
+  color: string;
+  type?: string;
+}
+
+export type ChartTooltipFormatter = (
+  value: string | number,
+  name: string,
+  props: ChartTooltipPayload,
+  index: number,
+  payload: Record<string, unknown>
+) => React.ReactNode;
+
+export type ChartTooltipLabelFormatter = (
+  label: string | number,
+  payload?: ChartTooltipPayload[]
+) => React.ReactNode;
+
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: '', dark: '.dark' } as const;
 
@@ -52,7 +81,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -78,6 +107,7 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 
   return (
     <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: <This is a standard use case>
       dangerouslySetInnerHTML={{
         __html: Object.entries(THEMES)
           .map(
@@ -104,14 +134,20 @@ const ChartTooltip = RechartsPrimitive.Tooltip;
 
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<'div'> & {
-      hideLabel?: boolean;
-      hideIndicator?: boolean;
-      indicator?: 'line' | 'dot' | 'dashed';
-      nameKey?: string;
-      labelKey?: string;
-    }
+  React.ComponentProps<'div'> & {
+    active?: boolean;
+    payload?: ChartTooltipPayload[];
+    label?: string | number;
+    labelFormatter?: ChartTooltipLabelFormatter;
+    formatter?: ChartTooltipFormatter;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: 'line' | 'dot' | 'dashed';
+    nameKey?: string;
+    labelKey?: string;
+    color?: string;
+    labelClassName?: string;
+  }
 >(
   (
     {
@@ -141,24 +177,39 @@ const ChartTooltipContent = React.forwardRef<
       const [item] = payload;
       const key = `${labelKey || item?.dataKey || item?.name || 'value'}`;
       const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      const value =
-        !labelKey && typeof label === 'string'
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label;
+
+      // Determine the display value for the label
+      let displayValue: React.ReactNode;
+      if (!labelKey && typeof label === 'string') {
+        displayValue = config[label as keyof typeof config]?.label || label;
+      } else {
+        displayValue = itemConfig?.label;
+      }
 
       if (labelFormatter) {
+        // Use the original label for the formatter (string | number)
+        const formatterLabel =
+          !labelKey && (typeof label === 'string' || typeof label === 'number')
+            ? label
+            : typeof displayValue === 'string' ||
+                typeof displayValue === 'number'
+              ? displayValue
+              : String(displayValue || '');
+
         return (
           <div className={cn('font-medium', labelClassName)}>
-            {labelFormatter(value, payload)}
+            {labelFormatter(formatterLabel, payload)}
           </div>
         );
       }
 
-      if (!value) {
+      if (!displayValue) {
         return null;
       }
 
-      return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+      return (
+        <div className={cn('font-medium', labelClassName)}>{displayValue}</div>
+      );
     }, [
       label,
       labelFormatter,
@@ -179,7 +230,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+          'grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
           className
         )}
       >
@@ -239,7 +290,7 @@ const ChartTooltipContent = React.forwardRef<
                         </span>
                       </div>
                       {item.value && (
-                        <span className="font-mono font-medium text-foreground tabular-nums">
+                        <span className="font-medium font-mono text-foreground tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -260,11 +311,12 @@ const ChartLegend = RechartsPrimitive.Legend;
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<'div'> &
-    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-      hideIcon?: boolean;
-      nameKey?: string;
-    }
+  React.ComponentProps<'div'> & {
+    payload?: ChartLegendPayload[];
+    verticalAlign?: 'top' | 'bottom';
+    hideIcon?: boolean;
+    nameKey?: string;
+  }
 >(
   (
     { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
@@ -319,7 +371,7 @@ ChartLegendContent.displayName = 'ChartLegend';
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
   config: ChartConfig,
-  payload: unknown,
+  payload: ChartTooltipPayload | ChartLegendPayload | unknown,
   key: string
 ) {
   if (typeof payload !== 'object' || payload === null) {