@luxfi/ui 7.4.15 → 8.1.0

package/src/image-zoom.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { ZoomIn } from "lucide-react"
+
+import { cn } from "./utils"
+
+export interface ImageZoomProps
+  extends React.ImgHTMLAttributes<HTMLImageElement> {
+  zoomScale?: number
+}
+
+const ImageZoom = React.forwardRef<HTMLDivElement, ImageZoomProps>(
+  ({ className, src, alt, zoomScale = 2, ...props }, ref) => {
+    const [isZoomed, setIsZoomed] = React.useState(false)
+    const [position, setPosition] = React.useState({ x: 0, y: 0 })
+
+    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isZoomed) return
+      const rect = e.currentTarget.getBoundingClientRect()
+      const x = ((e.clientX - rect.left) / rect.width) * 100
+      const y = ((e.clientY - rect.top) / rect.height) * 100
+      setPosition({ x, y })
+    }
+
+    return (
+      <Box
+        ref={ref as never}
+        className={cn(
+          "group relative cursor-zoom-in overflow-hidden rounded-lg",
+          className
+        )}
+        onMouseEnter={() => setIsZoomed(true)}
+        onMouseLeave={() => setIsZoomed(false)}
+        onMouseMove={handleMouseMove}
+      >
+        <Box tag="img"
+          src={src}
+          alt={alt}
+          className={cn(
+            "h-full w-full object-cover transition-transform duration-200",
+            isZoomed && `scale-${zoomScale * 100}`
+          )}
+          style={
+            isZoomed
+              ? {
+                  transform: `scale(${zoomScale})`,
+                  transformOrigin: `${position.x}% ${position.y}%`,
+                }
+              : undefined
+          }
+          {...props}
+        />
+        <Box className="absolute right-2 top-2 rounded-full bg-black/50 p-1.5 opacity-0 transition-opacity group-hover:opacity-100">
+          <ZoomIn style={css('h-4 w-4 text-white')} />
+        </Box>
+      </Box>
+    )
+  }
+)
+ImageZoom.displayName = "ImageZoom"
+
+export { ImageZoom }

package/src/image.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Box } from '@hanzo/ui'
 
 import { cn } from './utils';
 
@@ -264,7 +265,7 @@ export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
     return (
       <>
         { loading && <Skeleton loading { ...skeletonProps as Partial<SkeletonProps> }/> }
-        <img
+        <Box tag="img"
           ref={ ref }
           src={ src }
           alt={ alt || '' }

package/src/index.ts

@@ -313,3 +313,126 @@ export type {
   BankPinBoxProps,
   BankPageProps,
 } from './bank';
+
+// The component set.
+export { Button3D, Button3DPreset, Button3DLoading } from './3d-button';
+export { Card3D, Card3DHeader, Card3DTitle, Card3DDescription, Card3DContent, Card3DFooter } from './3d-card';
+export { Carousel3D, Carousel3DCard, Carousel3DCardImage, Carousel3DCardContent, Carousel3DCardTitle, Carousel3DCardDescription } from './3d-carousel';
+export { Grid3D, Grid3DCard, Grid3DPreset, Grid3DAuto } from './3d-grid';
+export { Marquee3D, Marquee3DPreset, Marquee3DFloating } from './3d-marquee';
+export { ModelViewer3D, ModelViewer3DPreset } from './3d-model-viewer';
+export { Pin3D } from './3d-pin';
+export { Scene3D, Scene3DPreset } from './3d-scene';
+export { Text3D, Text3DAnimated, Text3DPreset, Text3DFloating } from './3d-text';
+export { AdvancedNavigationBar } from './advanced-navigation-bar';
+export { AIActions } from './ai-actions';
+export { AIAgents } from './ai-agents';
+export { AIAssistant } from './ai-assistant';
+export { AIChat, ChatMessage, TypingIndicator, AttachmentPreview } from './ai-chat';
+export { AICode } from './ai-code';
+export { AIModelSelectorNavigationBar } from './ai-model-selector-navigation-bar';
+export { AIModels } from './ai-models';
+export { AIPlayground, AI_MODELS } from './ai-playground';
+export { AITools } from './ai-tools';
+export { AIVision } from './ai-vision';
+export { VoiceSelector, LanguageSelector, PersonalitySelector, SpeedControl, PitchControl, WakeWordInput, CustomInstructions, AutoListenToggle, NoiseCancellationToggle, AIVoiceSettings } from './ai-voice-settings';
+export { AIVoice } from './ai-voice';
+export { Android } from './android';
+export { AnimatedBackground, AnimatedBackgroundPresets } from './animated-background';
+export { AnimatedBeam } from './animated-beam';
+export { AnimatedCursor } from './animated-cursor';
+export { AnimatedIcon, AnimatedIconPresets } from './animated-icon';
+export { AnimatedList, AnimatedListPresets } from './animated-list';
+export { AnimatedNumber, AnimatedCounter } from './animated-number';
+export { AnimatedTestimonials } from './animated-testimonials';
+export { AnimatedText } from './animated-text';
+export { AnimatedTooltip } from './animated-tooltip';
+export { Announcement } from './announcement';
+export { AppSwitcherNavigationBar } from './app-switcher-navigation-bar';
+export { AppleCardsCarousel } from './apple-cards-carousel';
+export { AppleHelloEffect } from './apple-hello-effect';
+export { CALLBACK_PATH, AuthProvider, AuthCallback } from './auth';
+export { Banner } from './banner';
+export { BreadcrumbAndFiltersNavigationBar } from './breadcrumb-and-filters-navigation-bar';
+export { BreadcrumbNavigationBar } from './breadcrumb-navigation-bar';
+export { Calendar } from './calendar';
+export { CenteredLogoNavigationBar } from './centered-logo-navigation-bar';
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle } from './chart';
+export { Choicebox } from './choicebox';
+export { CodeBlock } from './code-block';
+export { CodeCompare } from './code-compare';
+export { CodeDiff } from './code-diff';
+export { CodeEditor } from './code-editor';
+export { CodeExplorer } from './code-explorer';
+export { CodePreview } from './code-preview';
+export { CodeSnippet, InlineCode } from './code-snippet';
+export { CodeTabs } from './code-tabs';
+export { CodeTerminal } from './code-terminal';
+export { CollaborationNavigationBar } from './collaboration-navigation-bar';
+export { ColorPicker } from './color-picker';
+export { Combobox } from './combobox';
+export { CommunicationNavigationBar } from './communication-navigation-bar';
+export { Comparison } from './comparison';
+export { ContextSwitcherNavigationBar } from './context-switcher-navigation-bar';
+export { CreditCard } from './credit-card';
+export { Cursor } from './cursor';
+export { DashboardNavigationBar } from './dashboard-navigation-bar';
+export { DialogStack } from './dialog-stack';
+export { DirectionProvider } from './direction';
+export { Dock, DockItem } from './dock';
+export { Dropzone } from './dropzone';
+export { ECommerceNavigationBar } from './e-commerce-navigation-bar';
+export { Editor } from './editor';
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from './empty';
+export { Gantt } from './gantt';
+export { GridPatternPresets, GridPattern } from './grid-pattern';
+export { IconNavigationBar } from './icon-navigation-bar';
+export { ImageCrop } from './image-crop';
+export { ImageZoom } from './image-zoom';
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './input-otp';
+export { IPhone15Pro } from './iphone-15-pro';
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter } from './item';
+export { KanbanBoard } from './kanban';
+export { Kbd, KbdGroup } from './kbd';
+export { LimelightNavNavigationBar } from './limelight-nav-navigation-bar';
+export { LimelightNav } from './limelight-nav';
+export { List, ListItem } from './list';
+export { Magnetic } from './magnetic';
+export { Marquee } from './marquee';
+export { MenuDock } from './menu-dock';
+export { Menubar, MenubarMenu, MenubarTrigger, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger } from './menubar';
+export { MessageDock } from './message-dock';
+export { MiniCalendar } from './mini-calendar';
+export { MinimalTiptap } from './minimal-tiptap';
+export { MotionHighlight } from './motion-highlight';
+export { MusicPlayer } from './music-player';
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from './native-select';
+export { OrderEntry } from './order-entry';
+export { OrdersHistory } from './orders-history';
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './pagination';
+export { ParticlesBackground } from './particles-background';
+export { Pill } from './pill';
+export { PixelImage } from './pixel-image';
+export { PositionsList } from './positions-list';
+export { PulseAnimation, PulseDot, HeartbeatPulse, BreathingPulse, PulsePresets } from './pulse-animation';
+export { QRCode } from './qr-code';
+export { RelativeTime } from './relative-time';
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './resizable';
+export { RevealAnimation, RevealGroup, ScrollReveal, RevealPresets } from './reveal-animation';
+export { Safari } from './safari';
+export { Sandbox } from './sandbox';
+export { SearchAndToggleNavigationBar } from './search-and-toggle-navigation-bar';
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger } from './sidebar';
+export { SimpleNavigationBar } from './simple-navigation-bar';
+export { StatusDashboardNavigationBar } from './status-dashboard-navigation-bar';
+export { Status } from './status';
+export { Tags } from './tags';
+export { TeamSwitcherNavigationBar } from './team-switcher-navigation-bar';
+export { Terminal } from './terminal';
+export { Ticker } from './ticker';
+export { Timeline } from './timeline';
+export { Toggle } from './toggle';
+export { TradingPanel } from './trading-panel';
+export { TwoTierNavigationBar } from './two-tier-navigation-bar';
+export { UnderlineNavigationBar } from './underline-navigation-bar';
+export { YouTubePipPlayer } from './youtube-pip-player';

package/src/input-otp.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+
+import { cn } from "./utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <Box ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <Box
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <Box className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <Box className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </Box>
+      )}
+    </Box>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/iphone-15-pro.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+interface IPhone15ProProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode
+  variant?: "default" | "pro-max" | "mini"
+  color?: "black" | "white" | "blue" | "natural"
+}
+
+const IPhone15Pro = React.forwardRef<HTMLDivElement, IPhone15ProProps>(
+  (
+    { className, children, variant = "default", color = "black", ...props },
+    ref
+  ) => {
+    const colorClasses = {
+      black: "bg-[var(--color-bg-primary)] border-[var(--color-border-divider)]",
+      white: "bg-[var(--color-bg-body)] border-[var(--color-border-divider)]",
+      blue: "bg-[var(--color-link-primary)] border-[var(--color-link-primary)]",
+      natural: "bg-[var(--color-bg-primary)] border-[var(--color-border-divider)]",
+    }
+
+    return (
+      <Box ref={ref} className={cn("inline-block", className)} {...props}>
+        {/* iPhone Frame */}
+        <Box
+          className={cn(
+            "relative mx-auto rounded-[3rem] border-[14px] shadow-2xl",
+            colorClasses[color]
+          )}
+          style={{
+            width:
+              variant === "pro-max"
+                ? "430px"
+                : variant === "mini"
+                  ? "360px"
+                  : "393px",
+            height:
+              variant === "pro-max"
+                ? "932px"
+                : variant === "mini"
+                  ? "780px"
+                  : "852px",
+          }}
+        >
+          {/* Dynamic Island */}
+          <Box className="absolute left-1/2 top-0 z-10 h-8 w-32 -translate-x-1/2 rounded-b-3xl bg-black" />
+
+          {/* Screen */}
+          <Box className="relative h-full w-full overflow-hidden rounded-[2.5rem] bg-white">
+            {children}
+          </Box>
+
+          {/* Side Buttons */}
+          <Box className="absolute -left-[17px] top-32 h-12 w-1 rounded-l-lg bg-[var(--color-bg-primary)]" />
+          <Box className="absolute -left-[17px] top-52 h-16 w-1 rounded-l-lg bg-[var(--color-bg-primary)]" />
+          <Box className="absolute -left-[17px] top-72 h-16 w-1 rounded-l-lg bg-[var(--color-bg-primary)]" />
+          <Box className="absolute -right-[17px] top-44 h-20 w-1 rounded-r-lg bg-[var(--color-bg-primary)]" />
+        </Box>
+      </Box>
+    )
+  }
+)
+IPhone15Pro.displayName = "IPhone15Pro"
+
+export { IPhone15Pro }

package/src/item.tsx

@@ -0,0 +1,193 @@
+import * as React from "react"
+import { Box, VariantProps, sx, variants } from '@hanzo/ui'
+import { Slot } from '@hanzo/ui'
+
+import { cn } from "./utils"
+import { Separator } from "./separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <Box
+      role="list"
+      data-slot="item-group"
+      className={cn("group/item-group flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      {...sx(cn("my-0", className))}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = variants(
+  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4 ",
+        sm: "gap-2.5 px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = variants(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <Box
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <Box
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <Box
+      data-slot="item-title"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <Box tag="p"
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <Box
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <Box
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <Box
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}