@djangocfg/ui-core 2.1.611 → 2.1.613

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.611",
+  "version": "2.1.613",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -133,17 +133,19 @@
     "check:docs": "node scripts/check-docs.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.611",
-    "@djangocfg/i18n": "^2.1.611",
+    "@djangocfg/api": "^2.1.613",
+    "@djangocfg/i18n": "^2.1.613",
     "consola": "^3.4.2",
-    "lucide-react": "^0.545.0",
+    "lucide-react": "^1.68.0",
     "moment": "^2.30.1",
     "next": ">=14.0.0",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.69.0",
     "react-router": ">=7",
+    "sonner": "^2.0.7",
     "tailwindcss": "^4.1.18",
     "zod": "^4.3.6",
     "zustand": "^5.0.0"
@@ -157,72 +159,72 @@
     }
   },
   "dependencies": {
-    "@chenglou/pretext": "^0.0.8",
-    "@hookform/resolvers": "^5.4.0",
-    "@radix-ui/react-accordion": "^1.2.16",
-    "@radix-ui/react-alert-dialog": "^1.1.19",
-    "@radix-ui/react-aspect-ratio": "^1.1.11",
-    "@radix-ui/react-avatar": "^1.2.2",
-    "@radix-ui/react-checkbox": "^1.3.7",
-    "@radix-ui/react-collapsible": "^1.1.16",
-    "@radix-ui/react-context-menu": "^2.3.3",
-    "@radix-ui/react-dialog": "^1.1.19",
-    "@radix-ui/react-dropdown-menu": "^2.1.20",
-    "@radix-ui/react-hover-card": "^1.1.19",
+    "@chenglou/pretext": "^1.0.0",
+    "@hookform/resolvers": "^7.0.2",
+    "@radix-ui/react-accordion": "^1.3.1",
+    "@radix-ui/react-alert-dialog": "^1.2.1",
+    "@radix-ui/react-aspect-ratio": "^1.2.0",
+    "@radix-ui/react-avatar": "^1.3.1",
+    "@radix-ui/react-checkbox": "^1.4.1",
+    "@radix-ui/react-collapsible": "^1.2.1",
+    "@radix-ui/react-context-menu": "^2.4.1",
+    "@radix-ui/react-dialog": "^1.3.1",
+    "@radix-ui/react-dropdown-menu": "^2.2.1",
+    "@radix-ui/react-hover-card": "^1.2.1",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.11",
-    "@radix-ui/react-menubar": "^1.1.20",
-    "@radix-ui/react-navigation-menu": "^1.2.18",
-    "@radix-ui/react-popover": "^1.1.19",
-    "@radix-ui/react-progress": "^1.1.12",
-    "@radix-ui/react-radio-group": "^1.4.3",
-    "@radix-ui/react-scroll-area": "^1.2.14",
-    "@radix-ui/react-select": "^2.3.3",
-    "@radix-ui/react-separator": "^1.1.11",
-    "@radix-ui/react-slider": "^1.4.3",
-    "@radix-ui/react-slot": "^1.3.0",
-    "@radix-ui/react-switch": "^1.3.3",
-    "@radix-ui/react-tabs": "^1.1.17",
-    "@radix-ui/react-toast": "^1.2.19",
-    "@radix-ui/react-toggle": "^1.1.14",
-    "@radix-ui/react-toggle-group": "^1.1.15",
-    "@radix-ui/react-tooltip": "^1.2.12",
-    "@web3icons/react": "^4.1.17",
+    "@radix-ui/react-label": "^2.1.17",
+    "@radix-ui/react-menubar": "^1.2.1",
+    "@radix-ui/react-navigation-menu": "^1.4.1",
+    "@radix-ui/react-popover": "^1.3.1",
+    "@radix-ui/react-progress": "^1.2.1",
+    "@radix-ui/react-radio-group": "^1.5.1",
+    "@radix-ui/react-scroll-area": "^1.4.0",
+    "@radix-ui/react-select": "^2.4.1",
+    "@radix-ui/react-separator": "^1.2.0",
+    "@radix-ui/react-slider": "^1.6.1",
+    "@radix-ui/react-slot": "^1.5.0",
+    "@radix-ui/react-switch": "^1.4.1",
+    "@radix-ui/react-tabs": "^1.2.1",
+    "@radix-ui/react-toast": "^1.3.1",
+    "@radix-ui/react-toggle": "^1.2.1",
+    "@radix-ui/react-toggle-group": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.4.1",
+    "@web3icons/react": "^4.1.24",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
-    "countries-list": "^3.4.0",
+    "countries-list": "^3.4.1",
     "country-flag-icons": "^1.6.20",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "8.6.0",
     "i18n-iso-countries": "^7.14.0",
-    "input-otp": "1.4.2",
-    "libphonenumber-js": "^1.13.8",
-    "next-themes": "^0.4.6",
+    "input-otp": "1.5.0",
+    "libphonenumber-js": "^1.13.15",
     "nextjs-toploader": "^3.9.17",
-    "react-day-picker": "9.11.1",
-    "react-hotkeys-hook": "^4.6.2",
+    "react-day-picker": "10.0.2",
+    "react-hotkeys-hook": "^5.3.3",
     "react-resizable-panels": "3.0.6",
     "react-sticky-box": "^2.0.5",
-    "recharts": "2.15.4",
-    "sonner": "2.0.7",
-    "tailwind-merge": "^3.6.0",
+    "recharts": "^3.10.1",
+    "tailwind-merge": "^3.7.0",
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.611",
-    "@djangocfg/eslint-config": "^2.1.611",
-    "@djangocfg/i18n": "^2.1.611",
-    "@djangocfg/typescript-config": "^2.1.611",
-    "@storybook/react-vite": "^10.5.0",
+    "@djangocfg/api": "^2.1.613",
+    "@djangocfg/eslint-config": "^2.1.613",
+    "@djangocfg/i18n": "^2.1.613",
+    "@djangocfg/typescript-config": "^2.1.613",
+    "@storybook/react-vite": "^10.6.5",
     "@types/node": "^24.13.3",
-    "@types/react": "19.2.15",
-    "@types/react-dom": "19.2.3",
-    "lucide-react": "^0.545.0",
-    "next": "^16.2.10",
-    "storybook": "^10.5.0",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "lucide-react": "^1.68.0",
+    "next": "^16.4.5",
+    "next-themes": "^0.4.6",
+    "sonner": "2.0.8",
+    "storybook": "^10.6.5",
     "typescript": "^5.9.3",
-    "vitest": "^4.1.10"
+    "vitest": "^5.1.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/data/avatar-group/index.tsx

@@ -152,7 +152,7 @@ function AvatarGroupItem(props: AvatarGroupItemProps) {
   const maskStyle = React.useMemo<React.CSSProperties>(() => {
     let maskImage = ""
 
-    let shouldMask = false
+    let shouldMask: boolean
 
     if (orientation === "vertical" && dir === "rtl" && reverse) {
       shouldMask = index !== itemCount - 1

package/src/components/data/calendar/calendar.tsx

@@ -3,7 +3,7 @@
 import { enUS, ko, ru, type Locale } from 'date-fns/locale';
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import * as React from 'react';
-import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
+import { DayButton, DayPicker, getDefaultClassNames, type Matcher } from 'react-day-picker';
 
 import { useLocaleOptional } from '@djangocfg/i18n';
 import { cn } from '../../../lib/utils';
@@ -23,10 +23,32 @@ function Calendar({
   formatters,
   components,
   locale,
+  fromDate,
+  toDate,
+  initialFocus,
+  disabled,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
   buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+  /** react-day-picker 9 name, kept for our callers: earliest selectable day. */
+  fromDate?: Date
+  /** react-day-picker 9 name, kept for our callers: latest selectable day. */
+  toDate?: Date
+  /** react-day-picker 9 name for `autoFocus`. */
+  initialFocus?: boolean
 }) {
+  // react-day-picker 10 dropped fromDate/toDate/initialFocus. Map them onto the
+  // v10 API: navigation bounds + disabled matchers + autoFocus.
+  const limits: Matcher[] = []
+  if (fromDate) limits.push({ before: fromDate })
+  if (toDate) limits.push({ after: toDate })
+  const mergedDisabled: Matcher | Matcher[] | undefined =
+    limits.length === 0
+      ? disabled
+      : disabled === undefined || disabled === false
+        ? limits
+        : [...(Array.isArray(disabled) ? disabled : [disabled]), ...limits]
+
   const defaultClassNames = getDefaultClassNames()
 
   // Localize month/weekday names from the app locale. An explicit `locale` prop
@@ -48,6 +70,10 @@ function Calendar({
         className
       )}
       captionLayout={captionLayout}
+      disabled={mergedDisabled}
+      startMonth={fromDate}
+      endMonth={toDate}
+      autoFocus={initialFocus}
       formatters={{
         formatMonthDropdown: (date) =>
           date.toLocaleString("default", { month: "short" }),
@@ -97,7 +123,7 @@ function Calendar({
             : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
-        table: "w-full border-collapse",
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
           "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",

package/src/components/data/calendar/date-picker.tsx

@@ -10,7 +10,7 @@ import { Button } from '../../forms/button';
 import { Popover, PopoverContent, PopoverTrigger } from '../../overlay/popover';
 import { Calendar } from './calendar';
 
-import type { SelectSingleEventHandler, DateRange as RDPDateRange } from 'react-day-picker'
+import type { DateRange as RDPDateRange } from 'react-day-picker'
 
 // =============================================================================
 // DatePicker - Single date selection with popover
@@ -60,7 +60,7 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
 
     const resolvedPlaceholder = placeholder ?? t('ui.datetime.pickDate')
 
-    const handleSelect: SelectSingleEventHandler = (date) => {
+    const handleSelect = (date: Date | undefined) => {
       onChange?.(date)
       setOpen(false)
     }

package/src/components/data/chart/index.tsx

@@ -102,11 +102,24 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip
 
+// recharts 3 no longer types the injected content props on <Tooltip>; take them
+// from TooltipContentProps instead (all optional: the element is created bare).
+type TooltipInjectedProps = Partial<
+  Pick<
+    RechartsPrimitive.TooltipContentProps<
+      RechartsPrimitive.TooltipValueType,
+      string | number
+    >,
+    "active" | "payload" | "label" | "labelFormatter" | "formatter"
+  >
+>
+
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
+  Omit<React.ComponentProps<"div">, "children"> &
+    TooltipInjectedProps & {
       hideLabel?: boolean
+      labelClassName?: string
       hideIndicator?: boolean
       indicator?: "line" | "dot" | "dashed"
       nameKey?: string
@@ -194,7 +207,7 @@ const ChartTooltipContent = React.forwardRef<
 
               return (
                 <div
-                  key={item.dataKey}
+                  key={typeof item.dataKey === "function" ? index : (item.dataKey ?? index)}
                   className={cn(
                     "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                     indicator === "dot" && "items-center"
@@ -262,8 +275,9 @@ const ChartLegend = RechartsPrimitive.Legend
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+  React.ComponentProps<"div"> & {
+      payload?: readonly RechartsPrimitive.LegendPayload[]
+      verticalAlign?: "top" | "middle" | "bottom"
       hideIcon?: boolean
       nameKey?: string
     }

package/src/styles/palette/utils.ts

@@ -41,7 +41,7 @@ function hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: n
   const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
   const m = l - c / 2;
 
-  let r = 0, g = 0, b = 0;
+  let r: number, g: number, b: number;
 
   if (h >= 0 && h < 60) { r = c; g = x; b = 0; }
   else if (h >= 60 && h < 120) { r = x; g = c; b = 0; }