@luxfi/ui 8.0.0 → 8.2.0

package/src/dialog.tsx

@@ -1,4 +1,5 @@
 import { Dialog as GuiDialog } from '@hanzo/gui';
+import { Box, css, sx } from '@hanzo/ui'
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -8,16 +9,16 @@ import { CloseButton } from './close-button';
 // Inline back button for dialog header
 function BackToButton({ onClick }: { readonly onClick?: () => void }) {
   return (
-    <button
+    <Box tag="button"
       type="button"
       onClick={ onClick }
       className="inline-flex items-center justify-center size-8 rounded-md bg-transparent text-current hover:bg-[var(--color-button-subtle-bg)] cursor-pointer"
       aria-label="Go back"
     >
-      <svg className="size-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg style={css('size-5')} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
       </svg>
-    </button>
+    </Box>
   );
 }
 
@@ -176,11 +177,11 @@ export const DialogContent = React.forwardRef<
       { backdrop && (
         <GuiDialog.Overlay
           unstyled
-          className="fixed inset-0 z-[1400] bg-black/80"
+          {...sx('fixed inset-0 z-[1400] bg-black/80')}
         />
       ) }
       { /* Positioner -- centers the content panel */ }
-      <div
+      <Box
         className={ cn(
           'fixed inset-0 z-[1400] flex w-screen h-dvh',
           'items-start lg:items-center justify-center',
@@ -190,7 +191,7 @@ export const DialogContent = React.forwardRef<
         <GuiDialog.Content
           ref={ ref }
           unstyled
-          className={ cn(
+          {...sx(
             // Base content styles
             'relative flex flex-col w-full p-6 outline-none text-base',
             'bg-dialog-bg text-dialog-fg shadow-lg rounded-xl',
@@ -200,13 +201,13 @@ export const DialogContent = React.forwardRef<
             // Size variant
             sizeClasses(size),
             className,
-          ) }
+          )}
           style={ Object.keys(contentInlineStyle).length > 0 ? contentInlineStyle : undefined }
           { ...rest as any }
         >
           { children }
         </GuiDialog.Content>
-      </div>
+      </Box>
     </GuiDialog.Portal>
   );
 });
@@ -251,7 +252,7 @@ export const DialogHeader = React.forwardRef<
     startElementProp ?? (onBackToClick ? <BackToButton onClick={ onBackToClick }/> : undefined);
 
   return (
-    <div
+    <Box
       ref={ ref }
       className={ cn(
         'flex-none p-0 mb-2 flex items-center gap-x-2 min-h-[40px]',
@@ -262,15 +263,15 @@ export const DialogHeader = React.forwardRef<
       { startElement }
       <GuiDialog.Title
         unstyled
-        className={ cn(
+        {...sx(
           'text-base lg:text-lg font-medium',
           'whitespace-nowrap overflow-hidden text-ellipsis',
-        ) }
+        )}
       >
         { children }
       </GuiDialog.Title>
-      <DialogCloseTrigger className="ml-auto"/>
-    </div>
+      <DialogCloseTrigger {...sx('ml-auto')}/>
+    </Box>
   );
 });
 
@@ -296,7 +297,7 @@ export const DialogBody = React.forwardRef<
     ...(flexDir ? { flexDirection: flexDir as React.CSSProperties['flexDirection'] } : {}),
   };
   return (
-    <div
+    <Box
       ref={ ref }
       className={ cn('flex-1 p-0 overflow-auto', className) }
       style={ Object.keys(bodyStyle).length > 0 ? bodyStyle : undefined }
@@ -316,7 +317,7 @@ export const DialogFooter = React.forwardRef<
   DialogFooterProps
 >(function DialogFooter({ className, ...props }, ref) {
   return (
-    <div
+    <Box
       ref={ ref }
       className={ cn('flex items-center justify-start gap-6 p-0 mt-6', className) }
       { ...props }

package/src/direction.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+/**
+ * Reading direction, for the components that have to know it.
+ *
+ * A menu opens toward the end of the line, a slider fills toward it, a carousel
+ * advances toward it. None of that can be read off CSS, so it travels as
+ * context — and `dir` on an ancestor element is what the DOM already uses, so a
+ * provider with nothing above it answers from there rather than guessing.
+ */
+import { createContext, useContext, type ReactNode } from 'react'
+
+export type Direction = 'ltr' | 'rtl'
+
+const DirectionContext = createContext<Direction | undefined>(undefined)
+
+export function DirectionProvider({
+  dir,
+  children,
+}: {
+  dir: Direction
+  children?: ReactNode
+}) {
+  return <DirectionContext.Provider value={dir}>{children}</DirectionContext.Provider>
+}
+
+/**
+ * The direction in force. Falls back to the document's own `dir`, so a page that
+ * sets it on `<html>` — which is where it belongs — needs no provider at all.
+ */
+export function useDirection(local?: Direction): Direction {
+  const inherited = useContext(DirectionContext)
+  if (local) return local
+  if (inherited) return inherited
+  if (typeof document !== 'undefined') {
+    const d = document.documentElement.dir
+    if (d === 'rtl' || d === 'ltr') return d
+  }
+  return 'ltr'
+}

package/src/dock.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+import { motion, useMotionValue, useSpring, useTransform } from "motion/react"
+
+import { cn } from "./utils"
+
+interface DockProps {
+  className?: string
+  children?: React.ReactNode
+  position?: "bottom" | "left" | "right"
+  magnification?: number
+  distance?: number
+}
+
+interface DockItemProps {
+  className?: string
+  children?: React.ReactNode
+  onClick?: () => void
+  tooltip?: string
+  magnification?: number
+  distance?: number
+}
+
+const DockContext = React.createContext<{
+  magnification: number
+  distance: number
+}>({
+  magnification: 60,
+  distance: 140,
+})
+
+const Dock = React.forwardRef<HTMLDivElement, DockProps>(
+  (
+    {
+      className,
+      children,
+      position = "bottom",
+      magnification = 60,
+      distance = 140,
+    },
+    ref
+  ) => {
+    const positionClasses = {
+      bottom: "bottom-0 left-1/2 -translate-x-1/2 flex-row",
+      left: "left-0 top-1/2 -translate-y-1/2 flex-col",
+      right: "right-0 top-1/2 -translate-y-1/2 flex-col",
+    }
+
+    return (
+      <DockContext.Provider value={{ magnification, distance }}>
+        <Box
+          ref={ref as never}
+          className={cn(
+            "fixed z-50 flex items-end gap-1 rounded-2xl border border-white/10 bg-black/10 p-2 backdrop-blur-xl",
+            "shadow-2xl shadow-black/20",
+            "before:absolute before:inset-0 before:rounded-2xl before:bg-gradient-to-b before:from-white/10 before:to-transparent before:opacity-50",
+            positionClasses[position],
+            className
+          )}
+        >
+          {children}
+        </Box>
+      </DockContext.Provider>
+    )
+  }
+)
+Dock.displayName = "Dock"
+
+const DockItem = React.forwardRef<HTMLButtonElement, DockItemProps>(
+  (
+    {
+      className,
+      children,
+      onClick,
+      tooltip,
+      magnification: itemMagnification,
+      distance: itemDistance,
+    },
+    ref
+  ) => {
+    const buttonRef = React.useRef<HTMLButtonElement>(null)
+    const { magnification: contextMagnification, distance: contextDistance } =
+      React.useContext(DockContext)
+    const magnification = itemMagnification ?? contextMagnification
+    const distance = itemDistance ?? contextDistance
+
+    const [isHovered, setIsHovered] = React.useState(false)
+
+    const mouseX = useMotionValue(Infinity)
+
+    const springConfig = { mass: 0.1, stiffness: 150, damping: 12 }
+    const size = useSpring(
+      useTransform(
+        mouseX,
+        [-distance, 0, distance],
+        [48, 48 + magnification, 48]
+      ),
+      springConfig
+    )
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+      if (!buttonRef.current) return
+      const rect = buttonRef.current.getBoundingClientRect()
+      const centerX = rect.left + rect.width / 2
+      mouseX.set(e.clientX - centerX)
+    }
+
+    const handleMouseLeave = () => {
+      mouseX.set(Infinity)
+      setIsHovered(false)
+    }
+
+    return (
+      <motion.div
+        className="relative"
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        onMouseEnter={() => setIsHovered(true)}
+      >
+        {tooltip && isHovered && (
+          <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.9 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 5, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
+            className="absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-black/80 px-2 py-1 text-xs text-white backdrop-blur-md"
+          >
+            {tooltip}
+            <Box className="absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 bg-black/80" />
+          </motion.div>
+        )}
+        <motion.button
+          ref={buttonRef as never}
+          style={{
+            width: size,
+            height: size,
+          }}
+          whileTap={{ scale: 0.9 }}
+          onClick={onClick}
+          className={cn(
+            "relative flex items-center justify-center rounded-xl bg-white/10 backdrop-blur-md transition-colors",
+            "hover:bg-white/20",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
+            className
+          )}
+        >
+          <motion.div
+            style={{
+              width: size,
+              height: size,
+            }}
+            className="flex items-center justify-center"
+          >
+            {children}
+          </motion.div>
+          <motion.div
+            className="absolute inset-0 rounded-xl"
+            style={{
+              background:
+                "linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%)",
+            }}
+          />
+        </motion.button>
+      </motion.div>
+    )
+  }
+)
+DockItem.displayName = "DockItem"
+
+export { Dock, DockItem }

package/src/dropzone.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { File, Upload, X } from "lucide-react"
+import { useDropzone } from "react-dropzone"
+
+import { cn } from "./utils"
+
+interface DropzoneProps extends React.HTMLAttributes<HTMLDivElement> {
+  onFilesAccepted?: (files: File[]) => void
+  maxFiles?: number
+  maxSize?: number
+  accept?: Record<string, string[]>
+  disabled?: boolean
+}
+
+const Dropzone = React.forwardRef<HTMLDivElement, DropzoneProps>(
+  (
+    {
+      className,
+      onFilesAccepted,
+      maxFiles = 5,
+      maxSize = 5242880, // 5MB
+      accept = {
+        "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"],
+        "application/pdf": [".pdf"],
+      },
+      disabled = false,
+      ...props
+    },
+    ref
+  ) => {
+    const [files, setFiles] = React.useState<File[]>([])
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+      onDrop: (acceptedFiles) => {
+        setFiles((prev) => [...prev, ...acceptedFiles].slice(0, maxFiles))
+        onFilesAccepted?.(acceptedFiles)
+      },
+      maxFiles,
+      maxSize,
+      accept,
+      disabled,
+    })
+
+    const removeFile = (index: number) => {
+      setFiles((prev) => prev.filter((_, i) => i !== index))
+    }
+
+    return (
+      <Box ref={ref} className={cn("w-full", className)} {...props}>
+        <Box
+          {...getRootProps()}
+          className={cn(
+            "cursor-pointer rounded-lg border-2 border-dashed p-8 transition-colors",
+            isDragActive
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-muted-foreground/50",
+            disabled && "cursor-not-allowed opacity-50"
+          )}
+        >
+          <input {...getInputProps()} />
+          <Box className="flex flex-col items-center justify-center gap-2 text-center">
+            <Upload style={css('h-8 w-8 text-muted-foreground')} />
+            <div>
+              <Box tag="p" className="text-sm font-medium">
+                {isDragActive ? "Drop files here" : "Drag & drop files here"}
+              </Box>
+              <Box tag="p" className="text-xs text-muted-foreground">
+                or click to browse (max {maxFiles} files,{" "}
+                {Math.round(maxSize / 1024 / 1024)}MB each)
+              </Box>
+            </div>
+          </Box>
+        </Box>
+
+        {files.length > 0 && (
+          <Box className="mt-4 space-y-2">
+            {files.map((file, index) => (
+              <Box
+                key={index}
+                className="flex items-center gap-2 rounded-lg border p-2"
+              >
+                <File style={css('h-4 w-4 text-muted-foreground')} />
+                <Box tag="span" className="flex-1 truncate text-sm">{file.name}</Box>
+                <Box tag="span" className="text-xs text-muted-foreground">
+                  {(file.size / 1024).toFixed(1)} KB
+                </Box>
+                <Box tag="button"
+                  onClick={() => removeFile(index)}
+                  className="rounded p-1 hover:bg-muted"
+                >
+                  <X style={css('h-4 w-4')} />
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        )}
+      </Box>
+    )
+  }
+)
+Dropzone.displayName = "Dropzone"
+
+export { Dropzone }

package/src/e-commerce-navigation-bar.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { Box, css, sx } from '@hanzo/ui'
+import { Search, ShoppingCart, User } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+
+export interface ECommerceNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  logo?: React.ReactNode
+  categories?: Array<{ label: string; href: string }>
+  cartCount?: number
+}
+
+const ECommerceNavigationBar = React.forwardRef<
+  HTMLElement,
+  ECommerceNavigationBarProps
+>(({ className, logo, categories = [], cartCount = 0, ...props }, ref) => {
+  return (
+    <Box tag="nav" ref={ref} className={cn("border-b", className)} {...props}>
+      <Box className="container flex h-16 items-center justify-between">
+        {logo && <Box className="font-bold">{logo}</Box>}
+        <Box className="flex gap-6">
+          {categories.map((cat) => (
+            <Box tag="a" key={cat.href} href={cat.href} className="text-sm font-medium">
+              {cat.label}
+            </Box>
+          ))}
+        </Box>
+        <Box className="flex items-center gap-2">
+          <Button variant="ghost" size="icon">
+            <Search style={css('h-5 w-5')} />
+          </Button>
+          <Button variant="ghost" size="icon">
+            <User style={css('h-5 w-5')} />
+          </Button>
+          <Button variant="ghost" size="icon" {...sx('relative')}>
+            <ShoppingCart style={css('h-5 w-5')} />
+            {cartCount > 0 && (
+              <Box tag="span" className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs text-primary-foreground">
+                {cartCount}
+              </Box>
+            )}
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  )
+})
+ECommerceNavigationBar.displayName = "ECommerceNavigationBar"
+
+export { ECommerceNavigationBar }

package/src/editor.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { Bold, Italic, List, ListOrdered } from "lucide-react"
+
+import { cn } from "./utils"
+import { Button } from "./button"
+
+export interface EditorProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+}
+
+const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
+  (
+    { className, value, onChange, placeholder = "Start typing...", ...props },
+    ref
+  ) => {
+    const editorRef = React.useRef<HTMLDivElement>(null)
+
+    const executeCommand = (command: string, value?: string) => {
+      document.execCommand(command, false, value)
+      editorRef.current?.focus()
+    }
+
+    const handleInput = () => {
+      if (editorRef.current) {
+        onChange?.(editorRef.current.innerHTML)
+      }
+    }
+
+    return (
+      <Box ref={ref} className={cn("space-y-2", className)} {...props}>
+        <Box className="flex gap-1 border-b pb-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => executeCommand("bold")}
+            type="button"
+          >
+            <Bold style={css('h-4 w-4')} />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => executeCommand("italic")}
+            type="button"
+          >
+            <Italic style={css('h-4 w-4')} />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => executeCommand("insertUnorderedList")}
+            type="button"
+          >
+            <List style={css('h-4 w-4')} />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => executeCommand("insertOrderedList")}
+            type="button"
+          >
+            <ListOrdered style={css('h-4 w-4')} />
+          </Button>
+        </Box>
+        <Box
+          ref={editorRef}
+          contentEditable
+          className="min-h-[200px] rounded-lg border p-4 focus:outline-none focus:ring-2 focus:ring-ring"
+          onInput={handleInput}
+          dangerouslySetInnerHTML={{ __html: value || "" }}
+          data-placeholder={placeholder}
+        />
+      </Box>
+    )
+  }
+)
+Editor.displayName = "Editor"
+
+export { Editor }

package/src/empty.tsx

@@ -0,0 +1,117 @@
+import { Box, VariantProps, variants } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+function Empty({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <Box
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <Box
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = variants(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <Box
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <Box
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"p">) {
+  return (
+    <Box
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <Box
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

package/src/field.tsx

@@ -1,4 +1,5 @@
 import { Label, Text, YStack } from '@hanzo/gui';
+import { sx } from '@hanzo/ui'
 import * as React from 'react';
 
 import type { InputProps } from './input';
@@ -82,7 +83,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           color={ 'var(--color-input-placeholder)' as never }
           // The float itself stays in CSS: it keys off `:placeholder-shown` and
           // `:focus` of a SIBLING, which is a selector, not a prop.
-          className="lux-field-float"
+          {...sx('lux-field-float')}
         >
           { label }
           <Marks required={ required } optionalText={ optionalText } errorText={ errorText }/>