@luxfi/ui 7.4.15 → 8.1.0

package/src/menubar.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+/**
+ * A menubar is a row of menus.
+ *
+ * What it adds over a row of dropdowns is one behaviour: once a menu is open,
+ * POINTING at a sibling opens it, without a click. Everything else a menubar
+ * does — open state, click-away, keyboard navigation, portalling — is what
+ * `DropdownMenu` does, so the rest of this file is that menu under the names a
+ * menubar uses.
+ */
+import { XStack } from '@hanzo/gui'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@hanzo/ui'
+import {
+  createContext,
+  useContext,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from 'react'
+
+/**
+ * Which menu is open, for the whole bar.
+ *
+ * It lives here rather than in each menu because the hover-to-switch behaviour
+ * is the one thing a menu cannot know on its own: it has to see that a SIBLING
+ * is open to know that pointing at it should open this one.
+ */
+const BarContext = createContext<{
+  open: string | null
+  setOpen: (id: string | null) => void
+} | null>(null)
+
+export function Menubar({ children, ...rest }: ComponentProps<typeof XStack>) {
+  const [open, setOpen] = useState<string | null>(null)
+  return (
+    <BarContext.Provider value={{ open, setOpen }}>
+      <XStack
+        role="menubar"
+        items="center"
+        gap={4}
+        p={4}
+        rounded="var(--radius-md, 0.5rem)"
+        borderWidth={1}
+        borderColor="var(--color-border-divider)"
+        bg="var(--color-bg-primary)"
+        {...rest}
+      >
+        {children}
+      </XStack>
+    </BarContext.Provider>
+  )
+}
+
+let seq = 0
+
+/**
+ * One menu in the bar.
+ *
+ * Controlled by the bar when it is inside one, and self-controlled when it is
+ * not — so a `MenubarMenu` lifted out of a `Menubar` still opens, rather than
+ * silently doing nothing.
+ */
+export function MenubarMenu({ children }: { readonly children?: ReactNode }) {
+  const bar = useContext(BarContext)
+  const [id] = useState(() => `menubar-${(seq += 1)}`)
+  const [own, setOwn] = useState(false)
+
+  const open = bar ? bar.open === id : own
+  const setOpen = (next: boolean) => (bar ? bar.setOpen(next ? id : null) : setOwn(next))
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <MenuIdContext.Provider value={{ id, open, setOpen }}>{children}</MenuIdContext.Provider>
+    </DropdownMenu>
+  )
+}
+
+const MenuIdContext = createContext<{
+  id: string
+  open: boolean
+  setOpen: (v: boolean) => void
+} | null>(null)
+
+/**
+ * The label you click — and, once any menu in the bar is open, the label you
+ * only have to point at. That is the single thing a menubar adds.
+ */
+export function MenubarTrigger({ children, ...rest }: ComponentProps<typeof XStack>) {
+  const bar = useContext(BarContext)
+  const menu = useContext(MenuIdContext)
+  return (
+    <DropdownMenuTrigger>
+      <XStack
+        role="menuitem"
+        items="center"
+        px={12}
+        height={32}
+        rounded="var(--radius-sm, 0.375rem)"
+        cursor="pointer"
+        bg={menu?.open ? 'var(--color-accent-bg)' : 'transparent'}
+        style={{ color: menu?.open ? 'var(--color-accent-fg)' : 'var(--color-text-primary)' }}
+        hoverStyle={{ backgroundColor: 'var(--color-hover)' }}
+        onMouseEnter={() => {
+          // Only while the bar already has something open. Otherwise pointing
+          // across a menubar on the way somewhere else would open every menu it
+          // passed.
+          if (bar?.open && menu && bar.open !== menu.id) bar.setOpen(menu.id)
+        }}
+        {...rest}
+      >
+        {children}
+      </XStack>
+    </DropdownMenuTrigger>
+  )
+}
+
+// The rest of a menubar IS a dropdown menu, under the names a menubar uses.
+export {
+  DropdownMenuCheckboxItem as MenubarCheckboxItem,
+  DropdownMenuContent as MenubarContent,
+  DropdownMenuGroup as MenubarGroup,
+  DropdownMenuItem as MenubarItem,
+  DropdownMenuLabel as MenubarLabel,
+  DropdownMenuPortal as MenubarPortal,
+  DropdownMenuRadioGroup as MenubarRadioGroup,
+  DropdownMenuRadioItem as MenubarRadioItem,
+  DropdownMenuSeparator as MenubarSeparator,
+  DropdownMenuShortcut as MenubarShortcut,
+  DropdownMenuSub as MenubarSub,
+  DropdownMenuSubContent as MenubarSubContent,
+  DropdownMenuSubTrigger as MenubarSubTrigger,
+}

package/src/message-dock.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Box, css, sx } from '@hanzo/ui'
+import { X } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+
+export interface Message {
+  id: string
+  type?: "info" | "success" | "warning" | "error"
+  title: string
+  description?: string
+}
+
+export interface MessageDockProps extends React.HTMLAttributes<HTMLDivElement> {
+  messages: Message[]
+  onClose?: (id: string) => void
+  position?: "top" | "bottom" | "top-right" | "bottom-right"
+}
+
+const MessageDock = React.forwardRef<HTMLDivElement, MessageDockProps>(
+  (
+    { className, messages, onClose, position = "bottom-right", ...props },
+    ref
+  ) => {
+    const positionClasses = {
+      top: "top-4 left-1/2 -translate-x-1/2",
+      bottom: "bottom-4 left-1/2 -translate-x-1/2",
+      "top-right": "top-4 right-4",
+      "bottom-right": "bottom-4 right-4",
+    }
+
+    return (
+      <Box
+        ref={ref}
+        className={cn(
+          "fixed z-50 flex flex-col gap-2",
+          positionClasses[position],
+          className
+        )}
+        {...props}
+      >
+        {messages.map((message) => (
+          <Box
+            key={message.id}
+            className={cn(
+              "min-w-[300px] rounded-lg border p-4 shadow-lg",
+              message.type === "success" &&
+                "border-[var(--lux-state-success)] bg-[var(--lux-state-success)] dark:bg-[var(--lux-state-success)]",
+              message.type === "warning" &&
+                "border-[var(--lux-state-notice)] bg-[var(--lux-state-notice)] dark:bg-[var(--lux-state-notice)]",
+              message.type === "error" &&
+                "border-[var(--lux-state-error)] bg-[var(--lux-state-error)] dark:bg-[var(--lux-state-error)]",
+              message.type === "info" &&
+                "border-[var(--color-link-primary)] bg-[var(--color-link-primary)] dark:bg-[var(--color-link-primary)]",
+              !message.type && "bg-background"
+            )}
+          >
+            <Box className="flex items-start justify-between gap-4">
+              <Box className="flex-1">
+                <Box tag="h4" className="font-medium">{message.title}</Box>
+                {message.description && (
+                  <Box tag="p" className="mt-1 text-sm text-muted-foreground">
+                    {message.description}
+                  </Box>
+                )}
+              </Box>
+              {onClose && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  {...sx('h-6 w-6')}
+                  onClick={() => onClose(message.id)}
+                >
+                  <X style={css('h-4 w-4')} />
+                </Button>
+              )}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    )
+  }
+)
+MessageDock.displayName = "MessageDock"
+
+export { MessageDock }

package/src/mini-calendar.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { ChevronLeft, ChevronRight } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+
+export interface MiniCalendarProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  selected?: Date
+  onSelect?: (date: Date) => void
+  month?: Date
+  onMonthChange?: (date: Date) => void
+}
+
+const MiniCalendar = React.forwardRef<HTMLDivElement, MiniCalendarProps>(
+  (
+    {
+      className,
+      selected,
+      onSelect,
+      month: monthProp,
+      onMonthChange,
+      ...props
+    },
+    ref
+  ) => {
+    const [month, setMonth] = React.useState(monthProp || new Date())
+
+    const daysInMonth = new Date(
+      month.getFullYear(),
+      month.getMonth() + 1,
+      0
+    ).getDate()
+    const firstDayOfMonth = new Date(
+      month.getFullYear(),
+      month.getMonth(),
+      1
+    ).getDay()
+
+    const days = Array.from({ length: daysInMonth }, (_, i) => i + 1)
+    const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
+
+    const previousMonth = () => {
+      const newMonth = new Date(month.getFullYear(), month.getMonth() - 1)
+      setMonth(newMonth)
+      onMonthChange?.(newMonth)
+    }
+
+    const nextMonth = () => {
+      const newMonth = new Date(month.getFullYear(), month.getMonth() + 1)
+      setMonth(newMonth)
+      onMonthChange?.(newMonth)
+    }
+
+    const handleDayClick = (day: number) => {
+      const date = new Date(month.getFullYear(), month.getMonth(), day)
+      onSelect?.(date)
+    }
+
+    const isSelected = (day: number) => {
+      if (!selected) return false
+      return (
+        selected.getDate() === day &&
+        selected.getMonth() === month.getMonth() &&
+        selected.getFullYear() === month.getFullYear()
+      )
+    }
+
+    return (
+      <Box
+        ref={ref}
+        className={cn("w-64 rounded-lg border p-3", className)}
+        {...props}
+      >
+        <Box className="mb-2 flex items-center justify-between">
+          <Button variant="ghost" size="icon" onClick={previousMonth}>
+            <ChevronLeft style={css('h-4 w-4')} />
+          </Button>
+          <Box className="text-sm font-medium">
+            {month.toLocaleString("default", {
+              month: "long",
+              year: "numeric",
+            })}
+          </Box>
+          <Button variant="ghost" size="icon" onClick={nextMonth}>
+            <ChevronRight style={css('h-4 w-4')} />
+          </Button>
+        </Box>
+        <Box className="grid grid-cols-7 gap-1 text-center text-xs">
+          {weekDays.map((day) => (
+            <Box key={day} className="p-1 font-medium text-muted-foreground">
+              {day}
+            </Box>
+          ))}
+          {Array.from({ length: firstDayOfMonth }).map((_, i) => (
+            <div key={`empty-${i}`} />
+          ))}
+          {days.map((day) => (
+            <Box tag="button"
+              key={day}
+              onClick={() => handleDayClick(day)}
+              className={cn(
+                "aspect-square rounded p-1 text-sm transition-colors hover:bg-accent",
+                isSelected(day) &&
+                  "bg-primary text-primary-foreground hover:bg-primary/90"
+              )}
+            >
+              {day}
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    )
+  }
+)
+MiniCalendar.displayName = "MiniCalendar"
+
+export { MiniCalendar }

package/src/minimal-tiptap.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface MinimalTiptapProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+  value?: string
+  onChange?: (value: string) => void
+}
+
+const MinimalTiptap = React.forwardRef<HTMLTextAreaElement, MinimalTiptapProps>(
+  ({ className, value, onChange, ...props }, ref) => {
+    return (
+      <Box tag="textarea"
+        ref={ref}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        className={cn(
+          "min-h-[200px] w-full rounded-lg border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+MinimalTiptap.displayName = "MinimalTiptap"
+
+export { MinimalTiptap }

package/src/motion-highlight.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface MotionHighlightProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+}
+
+const MotionHighlight = React.forwardRef<HTMLDivElement, MotionHighlightProps>(
+  ({ className, children, ...props }, ref) => {
+    const [highlightPosition, setHighlightPosition] = React.useState({
+      x: 0,
+      y: 0,
+    })
+    const [isHovered, setIsHovered] = React.useState(false)
+
+    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+      const rect = e.currentTarget.getBoundingClientRect()
+      setHighlightPosition({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      })
+    }
+
+    return (
+      <Box
+        ref={ref as never}
+        className={cn("group relative overflow-hidden", className)}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        {...props}
+      >
+        {isHovered && (
+          <Box
+            className="pointer-events-none absolute z-0 h-32 w-32 rounded-full bg-primary/10 blur-xl transition-opacity"
+            style={{
+              left: highlightPosition.x,
+              top: highlightPosition.y,
+              transform: "translate(-50%, -50%)",
+            }}
+          />
+        )}
+        <Box className="relative z-10">{children}</Box>
+      </Box>
+    )
+  }
+)
+MotionHighlight.displayName = "MotionHighlight"
+
+export { MotionHighlight }