@luxfi/ui 8.2.12 → 8.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "8.2.12",
+  "version": "8.3.0",
   "description": "Cross-platform UI components on @hanzo/gui. Native mobile + web.",
   "type": "module",
   "license": "MIT",
@@ -1027,52 +1027,52 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@hanzo/commerce": "7.7.5",
-    "@hanzo/ui": "8.25.5",
-    "@hanzogui/config": "^8.1.1",
-    "@hookform/resolvers": "5.2.2",
+    "@hanzo/commerce": "7.8.0",
+    "@hanzo/ui": "8.26.0",
+    "@hanzogui/config": "8.3.1",
+    "@hookform/resolvers": "^5.9.1",
     "@luxfi/logo": "1.0.10",
     "@luxfi/menu-icons": "1.0.2",
     "@monaco-editor/react": "^4.7.0",
-    "@next/third-parties": "^16.2.1",
+    "@next/third-parties": "^16.3.3",
     "@uidotdev/usehooks": "^2.4.1",
-    "date-fns": "^4.1.0",
-    "embla-carousel-autoplay": "8.6.0",
-    "es-toolkit": "^1.31.0",
-    "input-otp": "^1.4.2",
-    "lucide-react": "^1.27.0",
+    "date-fns": "^4.4.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "es-toolkit": "^1.52.0",
+    "input-otp": "^1.5.0",
+    "lucide-react": "^1.37.0",
     "markdown-to-jsx": "^9.10.2",
     "mobx": "^7.0.3",
     "mobx-react-lite": "^5.0.3",
     "next": "16.3.3",
-    "next-themes": "0.4.6",
+    "next-themes": "^0.4.6",
     "qrcode.react": "^4.2.0",
-    "react-colorful": "^5.6.1",
-    "react-day-picker": "^9.14.0",
+    "react-colorful": "^5.8.0",
+    "react-day-picker": "^10.0.1",
     "react-device-detect": "^2.2.3",
-    "react-dropzone": "^15.0.0",
-    "react-hook-form": "^7.72.0",
+    "react-dropzone": "^20.1.1",
+    "react-hook-form": "^7.86.0",
     "react-social-icons": "^6.26.0",
     "react-tooltip": "^6.0.8",
     "recharts": "^3.10.1",
-    "shiki": "^4.0.2",
-    "sonner": "^2.0.7",
+    "shiki": "^4.4.3",
+    "sonner": "^2.0.8",
     "usehooks-ts": "^3.1.1",
     "validator": "^13.15.35",
-    "zod": "^4.5.1",
+    "zod": "^4.5.2",
     "@hanzo/iam": "0.21.17"
   },
   "peerDependencies": {
     "@hanzo/appearance": ">=0.2.2",
     "@hanzo/design": ">=0.5.24",
-    "@hanzo/gui": ">=8.3.0",
-    "@hanzo/ui": ">=8.25.5",
-    "@hanzogui/colors": "^8.1.1",
-    "@hanzogui/core": "^8.1.1",
-    "@hanzogui/lucide-icons-2": "^8.1.1",
-    "@hanzogui/themes": "^8.1.1",
-    "@hanzogui/web": "^8.1.1",
-    "@tanstack/react-query": "^5.76.0",
+    "@hanzo/gui": "8.3.1",
+    "@hanzo/ui": ">=8.26.0",
+    "@hanzogui/colors": "8.3.1",
+    "@hanzogui/core": "8.3.1",
+    "@hanzogui/lucide-icons-2": "8.3.1",
+    "@hanzogui/themes": "8.3.1",
+    "@hanzogui/web": "8.3.1",
+    "@tanstack/react-query": ">=5",
     "react": ">=19.2.8",
     "react-dom": ">=19.2.8"
   },
@@ -1099,25 +1099,25 @@
   "devDependencies": {
     "@hanzo/appearance": "0.2.2",
     "@hanzo/design": "0.5.24",
-    "@hanzo/gui": "8.3.0",
+    "@hanzo/gui": "8.3.1",
     "@hanzo/iam": "0.21.17",
-    "@hanzo/ui": "8.25.5",
-    "@hanzogui/colors": "8.1.1",
-    "@hanzogui/config": "8.1.1",
-    "@hanzogui/core": "8.1.1",
-    "@hanzogui/themes": "8.1.1",
-    "@hanzogui/web": "8.1.1",
-    "@playwright/test": "^1.58",
+    "@hanzo/ui": "8.26.0",
+    "@hanzogui/colors": "8.3.1",
+    "@hanzogui/config": "8.3.1",
+    "@hanzogui/core": "8.3.1",
+    "@hanzogui/themes": "8.3.1",
+    "@hanzogui/web": "8.3.1",
+    "@playwright/test": "^1.62.1",
     "@types/node": "26.4.0",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",
-    "@vitejs/plugin-react": "^6",
+    "@vitejs/plugin-react": "^6.1.1",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "react-native-web": "^0.21.0",
-    "tsup": "^8.5.0",
+    "react-native-web": "^0.21.2",
+    "tsup": "^8.5.1",
     "typescript": "7.0.2",
-    "vite": "^8"
+    "vite": "^8.2.2"
   },
   "scripts": {
     "build": "tsup --no-dts && tsc -p tsconfig.json --noEmit false --emitDeclarationOnly --declaration --outDir dist",

package/src/3d-carousel.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Box, css } from '@hanzo/ui'
+import { Box, css, type BoxProps } from '@hanzo/ui'
 import { ChevronLeft, ChevronRight } from "lucide-react"
 
 import { cn } from "./utils"
@@ -375,7 +375,7 @@ Carousel3DCard.displayName = "Carousel3DCard"
 
 const Carousel3DCardImage = React.forwardRef<
   HTMLImageElement,
-  React.ImgHTMLAttributes<HTMLImageElement>
+  BoxProps<'img'>
 >(({ className, alt, ...props }, ref) => (
   <Box tag="img"
     ref={ref}

package/src/calendar.tsx

@@ -1,58 +1,27 @@
 "use client"
 
 import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
 import { DayPicker } from "react-day-picker"
 
 import { cn } from "./utils"
-import { buttonVariants } from "@hanzo/ui"
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
+/**
+ * The month grid, styled by `.lux-calendar` in tokens.css.
+ *
+ * react-day-picker names every part it renders — `rdp-day`, `rdp-selected`,
+ * `rdp-outside` — so the rules go on those, and the component stays the one
+ * line it should be. Restating them here as a `classNames` table means keeping
+ * a copy of somebody else's element names, which is how this drifted: the table
+ * still spelled the v8 names after v9 renamed them, so the styling was gone and
+ * only the type error said so.
+ */
+function Calendar({ className, showOutsideDays = true, ...props }: CalendarProps) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-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-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
-        ),
-        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 opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
+      className={cn('lux-calendar', className)}
       {...props}
     />
   )

package/src/image-zoom.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import * as React from "react"
-import { Box, css } from '@hanzo/ui'
+import { Box, css, type BoxProps } from '@hanzo/ui'
 import { ZoomIn } from "lucide-react"
 
 import { cn } from "./utils"
 
 export interface ImageZoomProps
-  extends React.ImgHTMLAttributes<HTMLImageElement> {
+  extends BoxProps<'img'> {
   zoomScale?: number
 }
 

package/src/resizable.tsx

@@ -2,15 +2,15 @@
 
 import { GripVertical } from "lucide-react"
 import { Box, css } from '@hanzo/ui'
-import * as ResizablePrimitive from "react-resizable-panels"
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"
 
 import { cn } from "./utils"
 
 const ResizablePanelGroup = ({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
+}: React.ComponentProps<typeof PanelGroup>) => (
+  <PanelGroup
     className={cn(
       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
       className
@@ -19,16 +19,16 @@ const ResizablePanelGroup = ({
   />
 )
 
-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = Panel
 
 const ResizableHandle = ({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: React.ComponentProps<typeof PanelResizeHandle> & {
   withHandle?: boolean
 }) => (
-  <ResizablePrimitive.PanelResizeHandle
+  <PanelResizeHandle
     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",
       className
@@ -40,7 +40,7 @@ const ResizableHandle = ({
         <GripVertical style={css('h-2.5 w-2.5')} />
       </Box>
     )}
-  </ResizablePrimitive.PanelResizeHandle>
+  </PanelResizeHandle>
 )
 
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/table.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { throttle } from 'es-toolkit';
-import { Box, css, sx } from '@hanzo/ui'
+import { Box, css, sx, type BoxProps } from '@hanzo/ui'
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -295,7 +295,7 @@ export const TableRoot = React.forwardRef<HTMLTableElement, TableRootProps>(
         ref={ ref }
         className={ cn('w-full border-collapse text-sm', className) }
         style={ merged }
-        { ...(rest as React.HTMLAttributes<HTMLTableElement>) }
+        { ...(rest as BoxProps<'table'>) }
       >
         { children }
       </Box>
@@ -322,7 +322,7 @@ export const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeader
         ref={ ref }
         className={ cn('', className) }
         style={ merged }
-        { ...(rest as React.HTMLAttributes<HTMLTableSectionElement>) }
+        { ...(rest as BoxProps<'thead'>) }
       >
         { children }
       </Box>
@@ -349,7 +349,7 @@ export const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProp
         ref={ ref }
         className={ cn('', className) }
         style={ merged }
-        { ...(rest as React.HTMLAttributes<HTMLTableSectionElement>) }
+        { ...(rest as BoxProps<'tbody'>) }
       >
         { children }
       </Box>
@@ -376,7 +376,7 @@ export const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
         ref={ ref }
         className={ cn('', className) }
         style={ merged }
-        { ...(rest as React.HTMLAttributes<HTMLTableRowElement>) }
+        { ...(rest as BoxProps<'tr'>) }
       >
         { children }
       </Box>
@@ -410,7 +410,7 @@ export const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
         ref={ ref }
         className={ cn('px-3 py-2.5 align-top text-sm', className) }
         style={ merged }
-        { ...(rest as React.TdHTMLAttributes<HTMLTableCellElement>) }
+        { ...(rest as BoxProps<'td'>) }
       >
         { children }
       </Box>
@@ -446,7 +446,7 @@ export const TableColumnHeader = React.forwardRef<HTMLTableCellElement, TableCol
           className,
         ) }
         style={ merged }
-        { ...(rest as React.ThHTMLAttributes<HTMLTableCellElement>) }
+        { ...(rest as BoxProps<'th'>) }
       >
         { children }
       </Box>
@@ -563,7 +563,7 @@ export const TableCaption = React.forwardRef<HTMLTableCaptionElement, TableCapti
         ref={ ref }
         className={ cn('px-3 py-2 text-sm text-[var(--color-table-header-fg)]', className) }
         style={ merged }
-        { ...(rest as React.HTMLAttributes<HTMLTableCaptionElement>) }
+        { ...(rest as BoxProps<'caption'>) }
       >
         { children }
       </Box>
@@ -590,7 +590,7 @@ export const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooter
         ref={ ref }
         className={ cn('', className) }
         style={ merged }
-        { ...(rest as React.HTMLAttributes<HTMLTableSectionElement>) }
+        { ...(rest as BoxProps<'tfoot'>) }
       >
         { children }
       </Box>

package/tokens.css

@@ -1048,3 +1048,24 @@
      motion; the bar itself stays, so "work in flight" is still visible. */
   .lux-loading::after { animation: none; width: 100%; opacity: 0.5 }
 }
+
+/* The month grid. react-day-picker names its own parts; these style them. */
+.lux-calendar {
+  padding: .75rem;
+  --rdp-cell-size: 2.25rem;
+  --rdp-accent-color: var(--primary);
+  --rdp-accent-background-color: var(--accent);
+}
+.lux-calendar .rdp-month_caption { font-size: .875rem; font-weight: 500 }
+.lux-calendar .rdp-weekday { color: var(--muted-foreground); font-weight: 400; font-size: .8rem }
+.lux-calendar .rdp-day_button {
+  width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  border-radius: var(--radius, .5rem);
+}
+.lux-calendar .rdp-day_button:hover { background: var(--accent); color: var(--accent-foreground) }
+.lux-calendar .rdp-selected .rdp-day_button { background: var(--primary); color: var(--primary-foreground) }
+.lux-calendar .rdp-today:not(.rdp-selected) .rdp-day_button { background: var(--accent); color: var(--accent-foreground) }
+.lux-calendar .rdp-outside { color: var(--muted-foreground); opacity: .5 }
+.lux-calendar .rdp-disabled { color: var(--muted-foreground); opacity: .5 }
+.lux-calendar .rdp-hidden { visibility: hidden }