@kinetixui/ui 0.6.2 → 0.6.4

package/dist/index.d.ts

@@ -27,13 +27,10 @@ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { DayPicker } from 'react-day-picker';
 import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
-import * as recharts_types_util_payload_getUniqPayload from 'recharts/types/util/payload/getUniqPayload';
-import * as recharts_types_component_Tooltip from 'recharts/types/component/Tooltip';
-import * as recharts_types_util_types from 'recharts/types/util/types';
-import * as recharts_types_component_DefaultTooltipContent from 'recharts/types/component/DefaultTooltipContent';
 import * as RechartsPrimitive from 'recharts';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { ColumnDef } from '@tanstack/react-table';
+import * as _tanstack_react_table from '@tanstack/react-table';
+import { RowData, ColumnDef } from '@tanstack/react-table';
 import * as vaul from 'vaul';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as react_hook_form from 'react-hook-form';
@@ -502,37 +499,17 @@ declare const ChartStyle: ({ id, config }: {
     config: ChartConfig;
 }) => React$1.JSX.Element | null;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-declare const ChartTooltipContent: React$1.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> & {
-    accessibilityLayer?: boolean;
-    active?: boolean | undefined;
-    includeHidden?: boolean | undefined;
-    allowEscapeViewBox?: recharts_types_util_types.AllowInDimension;
-    animationDuration?: recharts_types_util_types.AnimationDuration;
-    animationEasing?: recharts_types_util_types.AnimationTiming;
-    content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> | undefined;
-    coordinate?: Partial<recharts_types_util_types.Coordinate>;
-    cursor?: boolean | React$1.ReactElement | React$1.SVGProps<SVGElement>;
-    filterNull?: boolean;
-    defaultIndex?: number;
-    isAnimationActive?: boolean;
-    offset?: number;
-    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<recharts_types_component_DefaultTooltipContent.Payload<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>> | undefined;
-    position?: Partial<recharts_types_util_types.Coordinate>;
-    reverseDirection?: recharts_types_util_types.AllowInDimension;
-    shared?: boolean;
-    trigger?: "hover" | "click";
-    useTranslate3d?: boolean;
-    viewBox?: recharts_types_util_types.CartesianViewBox;
-    wrapperStyle?: React$1.CSSProperties;
-} & React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+declare const ChartTooltipContent: React$1.ForwardRefExoticComponent<Omit<Partial<RechartsPrimitive.TooltipContentProps> & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content"> & {
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: "line" | "dot" | "dashed";
     nameKey?: string;
     labelKey?: string;
 }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
-declare const ChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+declare const ChartLegend: React$1.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React$1.ReactPortal | null>;
+declare const ChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    payload?: ReadonlyArray<RechartsPrimitive.LegendPayload>;
+    verticalAlign?: RechartsPrimitive.LegendProps["verticalAlign"];
     hideIcon?: boolean;
     nameKey?: string;
 }, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -640,13 +617,27 @@ declare const ContextMenuShortcut: {
     displayName: string;
 };
 
+declare const features: {
+    rowSortingFeature: _tanstack_react_table.TableFeature;
+    rowPaginationFeature: _tanstack_react_table.TableFeature;
+    sortedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    paginatedRowModel: (table: _tanstack_react_table.Table<any, any>) => () => _tanstack_react_table.RowModel<any, any>;
+    sortFns: {
+        alphanumeric: _tanstack_react_table.CreatedSortFn<any, any>;
+        alphanumericCaseSensitive: _tanstack_react_table.CreatedSortFn<any, any>;
+        basic: _tanstack_react_table.CreatedSortFn<any, any>;
+        datetime: _tanstack_react_table.CreatedSortFn<any, any>;
+        text: _tanstack_react_table.CreatedSortFn<any, any>;
+        textCaseSensitive: _tanstack_react_table.CreatedSortFn<any, any>;
+    };
+};
 /**
  * DataTable — a thin wrapper over @tanstack/react-table + the KinetixUI Table.
  * Pass `columns` and `data`; sorting + pagination are on by default. For full
- * control, drop down to `useReactTable` directly.
+ * control, drop down to `useTable` directly.
  */
-declare function DataTable<TData, TValue>({ columns, data, className, pageSize, }: {
-    columns: ColumnDef<TData, TValue>[];
+declare function DataTable<TData extends RowData>({ columns, data, className, pageSize, }: {
+    columns: ColumnDef<typeof features, TData>[];
     data: TData[];
     className?: string;
     pageSize?: number;
@@ -809,25 +800,12 @@ declare const NavigationMenuLink: React$1.ForwardRefExoticComponent<NavigationMe
 declare const NavigationMenuViewport: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const NavigationMenuIndicator: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLButtonElement | HTMLElement | HTMLObjectElement | HTMLFormElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
-    className?: string | undefined;
-    collapsedSize?: number | undefined;
-    collapsible?: boolean | undefined;
-    defaultSize?: number | undefined;
-    id?: string | undefined;
-    maxSize?: number | undefined;
-    minSize?: number | undefined;
-    onCollapse?: ResizablePrimitive.PanelOnCollapse | undefined;
-    onExpand?: ResizablePrimitive.PanelOnExpand | undefined;
-    onResize?: ResizablePrimitive.PanelOnResize | undefined;
-    order?: number | undefined;
-    style?: object | undefined;
-    tagName?: keyof HTMLElementTagNameMap | undefined;
-} & {
-    children?: React$1.ReactNode;
-} & React$1.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
-declare const ResizableHandle: ({ withHandle, className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+type ResizablePanelGroupProps = Omit<React$1.ComponentProps<typeof ResizablePrimitive.Group>, "orientation"> & {
+    direction?: "horizontal" | "vertical";
+};
+declare const ResizablePanelGroup: ({ className, direction, ...props }: ResizablePanelGroupProps) => React$1.JSX.Element;
+declare const ResizablePanel: ({ defaultSize, minSize, maxSize, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.Panel>) => React$1.JSX.Element;
+declare const ResizableHandle: ({ withHandle, className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.Separator> & {
     withHandle?: boolean;
 }) => React$1.JSX.Element;
 
@@ -930,7 +908,7 @@ declare const Image: React$1.ForwardRefExoticComponent<ImageProps & React$1.RefA
  * and can carry a CTA.
  */
 declare const informVariants: (props?: ({
-    variant?: "action" | "success" | "warning" | "error" | "information" | null | undefined;
+    variant?: "success" | "warning" | "error" | "information" | "action" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InformProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof informVariants> {
     hideIcon?: boolean;

package/dist/index.js

@@ -1348,37 +1348,44 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
       classNames: {
         months: "flex flex-col sm:flex-row gap-2",
         month: "flex flex-col gap-4",
-        caption: "flex justify-center pt-1 relative items-center w-full",
+        month_caption: "flex justify-center pt-1 relative items-center w-full",
         caption_label: "text-sm font-medium",
         nav: "flex items-center gap-1",
-        nav_button: cn(
+        button_previous: cn(
           buttonVariants({ variant: "Outline", size: "icon" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-x-1",
-        head_row: "flex",
-        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
+        button_next: cn(
+          buttonVariants({ variant: "Outline", size: "icon" }),
+          "absolute right-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        month_grid: "w-full border-collapse space-x-1",
+        weekdays: "flex",
+        weekday: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        // Selection state (aria-selected/data-selected) lands on the day cell
+        // itself in v10 (not a nested button), so the cell owns the
+        // accent background + corner rounding and hands the primary-colored
+        // "selected" circle down to `day_button` via a `group` class.
+        day: cn(
+          "group relative p-0 text-center text-sm focus-within:relative focus-within:z-20 aria-selected:bg-accent",
+          props.mode === "range" ? "" : "aria-selected:rounded-md"
+        ),
+        day_button: cn(
+          buttonVariants({ variant: "Ghost", size: "icon" }),
+          "size-8 p-0 font-normal group-aria-selected:opacity-100 group-data-[selected=true]:bg-primary group-data-[selected=true]:text-primary-foreground group-data-[selected=true]:hover:bg-primary group-data-[selected=true]:hover:text-primary-foreground group-data-[selected=true]:focus:bg-primary group-data-[selected=true]:focus:text-primary-foreground"
         ),
-        day: cn(buttonVariants({ variant: "Ghost", size: "icon" }), "size-8 p-0 font-normal aria-selected:opacity-100"),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        range_start: "day-range-start rounded-l-md",
+        range_end: "day-range-end rounded-r-md",
+        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        today: "bg-accent text-accent-foreground",
+        outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
         ...classNames
       },
       components: {
-        IconLeft: () => /* @__PURE__ */ jsx35(ChevronLeft2, { className: "size-4" }),
-        IconRight: () => /* @__PURE__ */ jsx35(ChevronRight4, { className: "size-4" })
+        Chevron: ({ orientation, className: chevronClassName }) => orientation === "right" ? /* @__PURE__ */ jsx35(ChevronRight4, { className: cn("size-4", chevronClassName) }) : /* @__PURE__ */ jsx35(ChevronLeft2, { className: cn("size-4", chevronClassName) })
       },
       ...props
     }
@@ -1670,7 +1677,7 @@ ${colorConfig.map(([key, itemConfig]) => {
 };
 var ChartTooltip = RechartsPrimitive.Tooltip;
 var ChartTooltipContent = React32.forwardRef(
-  ({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, formatter, color }, ref) => {
+  ({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, formatter }, ref) => {
     const { config } = useChart();
     if (!active || !payload?.length) return null;
     return /* @__PURE__ */ jsxs15(
@@ -1686,7 +1693,7 @@ var ChartTooltipContent = React32.forwardRef(
           /* @__PURE__ */ jsx37("div", { className: "grid gap-1.5", children: payload.map((item, i) => {
             const key = `${item.name || item.dataKey || "value"}`;
             const itemConfig = config[key];
-            const indicatorColor = color || item.payload?.fill || item.color;
+            const indicatorColor = item.payload?.fill || item.color;
             return /* @__PURE__ */ jsxs15("div", { className: "flex w-full items-center gap-2", children: [
               !hideIndicator && /* @__PURE__ */ jsx37(
                 "div",
@@ -1865,13 +1872,23 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
 // src/components/data-table.tsx
 import * as React35 from "react";
 import {
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+  useTable
 } from "@tanstack/react-table";
 import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
+var features = tableFeatures({
+  rowSortingFeature,
+  rowPaginationFeature,
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns
+});
 function DataTable({
   columns,
   data,
@@ -1879,20 +1896,18 @@ function DataTable({
   pageSize = 10
 }) {
   const [sorting, setSorting] = React35.useState([]);
-  const table = useReactTable({
+  const table = useTable({
+    features,
     data,
     columns,
     state: { sorting },
     onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    initialState: { pagination: { pageSize } }
+    initialState: { pagination: { pageIndex: 0, pageSize } }
   });
   return /* @__PURE__ */ jsxs18("div", { className: cn("space-y-3", className), children: [
     /* @__PURE__ */ jsx40("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs18(Table, { children: [
       /* @__PURE__ */ jsx40(TableHeader, { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx40(TableRow, { children: hg.headers.map((header) => /* @__PURE__ */ jsx40(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, hg.id)) }),
-      /* @__PURE__ */ jsx40(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx40(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx40(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx40(TableRow, { children: /* @__PURE__ */ jsx40(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
+      /* @__PURE__ */ jsx40(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx40(TableRow, { children: row.getAllCells().map((cell) => /* @__PURE__ */ jsx40(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx40(TableRow, { children: /* @__PURE__ */ jsx40(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
     ] }) }),
     /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-end gap-2", children: [
       /* @__PURE__ */ jsx40(Button, { variant: "Outline", size: "sm", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: "Previous" }),
@@ -2393,26 +2408,31 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
 import { GripVertical } from "lucide-react";
 import * as ResizablePrimitive from "react-resizable-panels";
 import { jsx as jsx49 } from "react/jsx-runtime";
-var ResizablePanelGroup = ({
-  className,
+var ResizablePanelGroup = ({ className, direction = "horizontal", ...props }) => /* @__PURE__ */ jsx49(ResizablePrimitive.Group, { className: cn("flex h-full w-full", className), orientation: direction, ...props });
+var asPercent = (value) => typeof value === "number" ? `${value}%` : value;
+var ResizablePanel = ({
+  defaultSize,
+  minSize,
+  maxSize,
   ...props
 }) => /* @__PURE__ */ jsx49(
-  ResizablePrimitive.PanelGroup,
+  ResizablePrimitive.Panel,
   {
-    className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className),
+    defaultSize: asPercent(defaultSize),
+    minSize: asPercent(minSize),
+    maxSize: asPercent(maxSize),
     ...props
   }
 );
-var ResizablePanel = ResizablePrimitive.Panel;
 var ResizableHandle = ({
   withHandle,
   className,
   ...props
 }) => /* @__PURE__ */ jsx49(
-  ResizablePrimitive.PanelResizeHandle,
+  ResizablePrimitive.Separator,
   {
     className: cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
       className
     ),
     ...props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/ui",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "private": false,
   "description": "KinetixUI React components — CVA + Radix + Tailwind on the KinetixUI token contract. Also distributed via the kinetixui CLI as a component registry.",
   "keywords": [
@@ -40,70 +40,70 @@
     "tailwind.config.ts"
   ],
   "dependencies": {
-    "@hookform/resolvers": "^3.9.1",
-    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.4",
-    "@radix-ui/react-aspect-ratio": "^1.1.1",
-    "@radix-ui/react-avatar": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-context-menu": "^2.2.4",
-    "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
-    "@radix-ui/react-hover-card": "^1.1.4",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-menubar": "^1.1.4",
-    "@radix-ui/react-navigation-menu": "^1.2.3",
-    "@radix-ui/react-popover": "^1.1.4",
-    "@radix-ui/react-progress": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.2",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toggle": "^1.1.1",
-    "@radix-ui/react-toggle-group": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.6",
-    "@tanstack/react-table": "^8.20.6",
+    "@hookform/resolvers": "^5.9.1",
+    "@radix-ui/react-accordion": "^1.2.20",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-aspect-ratio": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-hover-card": "^1.1.23",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-menubar": "^1.1.24",
+    "@radix-ui/react-navigation-menu": "^1.2.22",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toggle": "^1.1.18",
+    "@radix-ui/react-toggle-group": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.4",
-    "date-fns": "^3.6.0",
-    "embla-carousel-react": "^8.5.1",
-    "input-otp": "^1.4.1",
-    "lucide-react": "^0.468.0",
-    "react-day-picker": "8.10.1",
-    "react-hook-form": "^7.54.1",
-    "react-resizable-panels": "^2.1.7",
-    "recharts": "^2.15.0",
-    "sonner": "^1.7.1",
-    "tailwind-merge": "^2.6.0",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
+    "lucide-react": "^1.46.0",
+    "react-day-picker": "^10.0.1",
+    "react-hook-form": "^7.88.0",
+    "react-resizable-panels": "^4.12.4",
+    "recharts": "^3.10.1",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.7.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2",
-    "zod": "^3.24.1"
+    "zod": "^4.6.5"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@kinetixui/tokens": "0.6.2",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.3.17",
-    "@types/react-dom": "^18.3.5",
-    "@vitejs/plugin-react": "^5.2.0",
-    "jsdom": "^25.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.17",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.2",
-    "vitest": "^5.0.0"
+    "@kinetixui/tokens": "0.6.4",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "jsdom": "^30.0.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tailwindcss": "^3.4.19",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^5.0.1"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --external react --external react-dom",

package/src/components/calendar.tsx

@@ -16,40 +16,49 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
       classNames={{
         months: "flex flex-col sm:flex-row gap-2",
         month: "flex flex-col gap-4",
-        caption: "flex justify-center pt-1 relative items-center w-full",
+        month_caption: "flex justify-center pt-1 relative items-center w-full",
         caption_label: "text-sm font-medium",
         nav: "flex items-center gap-1",
-        nav_button: cn(
+        button_previous: cn(
           buttonVariants({ variant: "Outline", size: "icon" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-x-1",
-        head_row: "flex",
-        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md",
+        button_next: cn(
+          buttonVariants({ variant: "Outline", size: "icon" }),
+          "absolute right-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        month_grid: "w-full border-collapse space-x-1",
+        weekdays: "flex",
+        weekday: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        week: "flex w-full mt-2",
+        // Selection state (aria-selected/data-selected) lands on the day cell
+        // itself in v10 (not a nested button), so the cell owns the
+        // accent background + corner rounding and hands the primary-colored
+        // "selected" circle down to `day_button` via a `group` class.
+        day: cn(
+          "group relative p-0 text-center text-sm focus-within:relative focus-within:z-20 aria-selected:bg-accent",
+          props.mode === "range" ? "" : "aria-selected:rounded-md",
+        ),
+        day_button: cn(
+          buttonVariants({ variant: "Ghost", size: "icon" }),
+          "size-8 p-0 font-normal group-aria-selected:opacity-100 group-data-[selected=true]:bg-primary group-data-[selected=true]:text-primary-foreground group-data-[selected=true]:hover:bg-primary group-data-[selected=true]:hover:text-primary-foreground group-data-[selected=true]:focus:bg-primary group-data-[selected=true]:focus:text-primary-foreground",
         ),
-        day: cn(buttonVariants({ variant: "Ghost", size: "icon" }), "size-8 p-0 font-normal aria-selected:opacity-100"),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        range_start: "day-range-start rounded-l-md",
+        range_end: "day-range-end rounded-r-md",
+        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        today: "bg-accent text-accent-foreground",
+        outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeft className="size-4" />,
-        IconRight: () => <ChevronRight className="size-4" />,
+        Chevron: ({ orientation, className: chevronClassName }) =>
+          orientation === "right" ? (
+            <ChevronRight className={cn("size-4", chevronClassName)} />
+          ) : (
+            <ChevronLeft className={cn("size-4", chevronClassName)} />
+          ),
       }}
       {...props}
     />

package/src/components/chart.tsx

@@ -236,8 +236,14 @@ const ChartTooltip = RechartsPrimitive.Tooltip;
 
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
+  // Recharts v3 moved active/payload/label/coordinate to context-only props
+  // (`PropertiesReadFromContext`, omitted from `TooltipProps`) — the custom
+  // `content` render prop receives them back via `TooltipContentProps`.
+  // Partial because `<ChartTooltip content={<ChartTooltipContent />} />`
+  // constructs the element with no props — Recharts clones it with the real
+  // values at render time.
+  Partial<RechartsPrimitive.TooltipContentProps> &
+    Omit<React.ComponentProps<"div">, "content"> & {
       hideLabel?: boolean;
       hideIndicator?: boolean;
       indicator?: "line" | "dot" | "dashed";
@@ -246,7 +252,7 @@ const ChartTooltipContent = React.forwardRef<
     }
 >(
   (
-    { active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, formatter, color },
+    { active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, formatter },
     ref,
   ) => {
     const { config } = useChart();
@@ -268,7 +274,7 @@ const ChartTooltipContent = React.forwardRef<
           {payload.map((item, i) => {
             const key = `${item.name || item.dataKey || "value"}`;
             const itemConfig = config[key];
-            const indicatorColor = color || (item.payload as Record<string, string>)?.fill || item.color;
+            const indicatorColor = (item.payload as Record<string, string>)?.fill || item.color;
             return (
               <div key={key + i} className="flex w-full items-center gap-2">
                 {!hideIndicator && (
@@ -303,8 +309,14 @@ const ChartLegend = RechartsPrimitive.Legend;
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & { hideIcon?: boolean; nameKey?: string }
+  // Recharts v3 dropped `payload` from the exported `LegendProps` (also
+  // context-only now, like Tooltip's) — type it from `LegendPayload` directly.
+  React.ComponentProps<"div"> & {
+    payload?: ReadonlyArray<RechartsPrimitive.LegendPayload>;
+    verticalAlign?: RechartsPrimitive.LegendProps["verticalAlign"];
+    hideIcon?: boolean;
+    nameKey?: string;
+  }
 >(({ className, payload, verticalAlign = "bottom" }, ref) => {
   const { config } = useChart();
   if (!payload?.length) return null;

package/src/components/data-table.tsx

@@ -2,45 +2,59 @@
 
 import * as React from "react";
 import {
+  createPaginatedRowModel,
+  createSortedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+  useTable,
   type ColumnDef,
+  type RowData,
   type SortingState,
 } from "@tanstack/react-table";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
 
+// @tanstack/react-table v9 replaced the bundled-everything `useReactTable`
+// with tree-shakeable `features` passed into `useTable` — sorting and
+// pagination are opt-in plugins now instead of default row models. Declared
+// once at module scope since it's static config, not per-render state.
+const features = tableFeatures({
+  rowSortingFeature,
+  rowPaginationFeature,
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns,
+});
+
 /**
  * DataTable — a thin wrapper over @tanstack/react-table + the KinetixUI Table.
  * Pass `columns` and `data`; sorting + pagination are on by default. For full
- * control, drop down to `useReactTable` directly.
+ * control, drop down to `useTable` directly.
  */
-export function DataTable<TData, TValue>({
+export function DataTable<TData extends RowData>({
   columns,
   data,
   className,
   pageSize = 10,
 }: {
-  columns: ColumnDef<TData, TValue>[];
+  columns: ColumnDef<typeof features, TData>[];
   data: TData[];
   className?: string;
   pageSize?: number;
 }) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
 
-  const table = useReactTable({
+  const table = useTable({
+    features,
     data,
     columns,
     state: { sorting },
     onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    initialState: { pagination: { pageSize } },
+    initialState: { pagination: { pageIndex: 0, pageSize } },
   });
 
   return (
@@ -63,8 +77,8 @@ export function DataTable<TData, TValue>({
           <TableBody>
             {table.getRowModel().rows.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
-                  {row.getVisibleCells().map((cell) => (
+                <TableRow key={row.id}>
+                  {row.getAllCells().map((cell) => (
                     <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                   ))}
                 </TableRow>

package/src/components/resizable.tsx

@@ -5,26 +5,47 @@ import { GripVertical } from "lucide-react";
 import * as ResizablePrimitive from "react-resizable-panels";
 import { cn } from "../lib/utils";
 
-const ResizablePanelGroup = ({
-  className,
+// react-resizable-panels v4 renamed PanelGroup/PanelResizeHandle to
+// Group/Separator and dropped the old `direction`/`data-panel-group-direction`
+// API in favor of `orientation` + `aria-orientation` (set on the Separator
+// itself, opposite of the group's own orientation). `direction` is kept as
+// this wrapper's public prop name — every call site (demos, stories, the CLI
+// registry) still passes it — and mapped to `orientation` underneath.
+type ResizablePanelGroupProps = Omit<React.ComponentProps<typeof ResizablePrimitive.Group>, "orientation"> & {
+  direction?: "horizontal" | "vertical";
+};
+
+const ResizablePanelGroup = ({ className, direction = "horizontal", ...props }: ResizablePanelGroupProps) => (
+  <ResizablePrimitive.Group className={cn("flex h-full w-full", className)} orientation={direction} {...props} />
+);
+
+// v4 also changed bare numeric `defaultSize`/`minSize`/`maxSize` to mean
+// pixels instead of percent — coerce plain numbers to a percentage string so
+// existing call sites (`defaultSize={50}`) keep their v2 percentage meaning.
+const asPercent = (value: number | string | undefined) => (typeof value === "number" ? `${value}%` : value);
+
+const ResizablePanel = ({
+  defaultSize,
+  minSize,
+  maxSize,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) => (
+  <ResizablePrimitive.Panel
+    defaultSize={asPercent(defaultSize)}
+    minSize={asPercent(minSize)}
+    maxSize={asPercent(maxSize)}
     {...props}
   />
 );
 
-const ResizablePanel = ResizablePrimitive.Panel;
-
 const ResizableHandle = ({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & { withHandle?: boolean }) => (
-  <ResizablePrimitive.PanelResizeHandle
+}: React.ComponentProps<typeof ResizablePrimitive.Separator> & { withHandle?: boolean }) => (
+  <ResizablePrimitive.Separator
     className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
       className,
     )}
     {...props}
@@ -34,7 +55,7 @@ const ResizableHandle = ({
         <GripVertical className="size-2.5" />
       </div>
     )}
-  </ResizablePrimitive.PanelResizeHandle>
+  </ResizablePrimitive.Separator>
 );
 
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };