@luxfi/ui 8.0.0 → 8.1.0

package/src/timeline.tsx

@@ -0,0 +1,412 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { Check, Circle, Clock } from "lucide-react"
+
+import { cn } from "./utils"
+
+interface TimelineItem {
+  id: string
+  title: string
+  description?: string
+  date?: string
+  time?: string
+  status?: "completed" | "active" | "pending"
+  icon?: React.ReactNode
+  content?: React.ReactNode
+}
+
+interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: TimelineItem[]
+  orientation?: "vertical" | "horizontal"
+  variant?: "default" | "alternate" | "compact" | "simple"
+  animated?: boolean
+}
+
+const Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(
+  (
+    {
+      className,
+      items,
+      orientation = "vertical",
+      variant = "default",
+      animated = true,
+      ...props
+    },
+    ref
+  ) => {
+    const [visibleItems, setVisibleItems] = React.useState<Set<string>>(
+      new Set()
+    )
+
+    React.useEffect(() => {
+      if (!animated) {
+        setVisibleItems(new Set(items.map((item) => item.id)))
+        return
+      }
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              const id = entry.target.getAttribute("data-timeline-id")
+              if (id) {
+                setVisibleItems((prev) => new Set([...prev, id]))
+              }
+            }
+          })
+        },
+        {
+          threshold: 0.1,
+          rootMargin: "50px",
+        }
+      )
+
+      const elements = document.querySelectorAll("[data-timeline-id]")
+      elements.forEach((el) => observer.observe(el))
+
+      return () => observer.disconnect()
+    }, [items, animated])
+
+    const getStatusIcon = (status?: TimelineItem["status"]) => {
+      switch (status) {
+        case "completed":
+          return <Check style={css('h-3 w-3')} />
+        case "active":
+          return <Clock style={css('h-3 w-3 animate-pulse')} />
+        default:
+          return null
+      }
+    }
+
+    const getStatusColor = (status?: TimelineItem["status"]) => {
+      switch (status) {
+        case "completed":
+          return "bg-[var(--lux-state-success)] text-white"
+        case "active":
+          return "bg-[var(--color-link-primary)] text-white"
+        case "pending":
+          return "bg-[var(--color-bg-body)] dark:bg-[var(--color-bg-body)]"
+        default:
+          return "bg-primary text-primary-foreground"
+      }
+    }
+
+    if (orientation === "horizontal") {
+      return (
+        <Box
+          ref={ref as never}
+          className={cn("relative overflow-x-auto", className)}
+          {...props}
+        >
+          <Box className="flex items-start space-x-8 pb-4">
+            {items.map((item, index) => (
+              <Box
+                key={item.id}
+                data-timeline-id={item.id}
+                className={cn(
+                  "relative flex flex-col items-center min-w-[200px]",
+                  animated &&
+                    !visibleItems.has(item.id) &&
+                    "opacity-0 translate-y-4",
+                  animated &&
+                    visibleItems.has(item.id) &&
+                    "opacity-100 translate-y-0",
+                  "transition-all duration-500 ease-out"
+                )}
+              >
+                {/* Connector Line */}
+                {index < items.length - 1 && (
+                  <Box className="absolute top-5 left-[50%] w-[calc(100%+2rem)] h-[2px] bg-border" />
+                )}
+
+                {/* Milestone */}
+                <Box
+                  className={cn(
+                    "relative z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 border-background shadow-sm",
+                    getStatusColor(item.status)
+                  )}
+                >
+                  {item.icon || getStatusIcon(item.status) || (
+                    <Circle style={css('h-3 w-3')} />
+                  )}
+                </Box>
+
+                {/* Content */}
+                <Box className="mt-4 text-center">
+                  {(item.date || item.time) && (
+                    <Box className="mb-1 text-xs text-muted-foreground">
+                      {item.date}
+                      {item.date && item.time && " • "}
+                      {item.time}
+                    </Box>
+                  )}
+                  <Box tag="h3" className="font-semibold">{item.title}</Box>
+                  {item.description && (
+                    <Box tag="p" className="mt-1 text-sm text-muted-foreground">
+                      {item.description}
+                    </Box>
+                  )}
+                  {item.content && <Box className="mt-3">{item.content}</Box>}
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      )
+    }
+
+    // Vertical orientation
+    if (variant === "alternate") {
+      return (
+        <Box ref={ref as never} className={cn("relative", className)} {...props}>
+          {items.map((item, index) => (
+            <Box
+              key={item.id}
+              data-timeline-id={item.id}
+              className={cn(
+                "relative flex items-start mb-8",
+                index % 2 === 0 ? "justify-start" : "justify-end",
+                animated && !visibleItems.has(item.id) && "opacity-0",
+                animated && visibleItems.has(item.id) && "opacity-100",
+                animated &&
+                  !visibleItems.has(item.id) &&
+                  (index % 2 === 0 ? "-translate-x-8" : "translate-x-8"),
+                animated && visibleItems.has(item.id) && "translate-x-0",
+                "transition-all duration-500 ease-out"
+              )}
+            >
+              {/* Center line */}
+              <Box className="absolute left-1/2 -translate-x-1/2 top-5 bottom-0 w-[2px] bg-border" />
+
+              {/* Content */}
+              <Box
+                className={cn(
+                  "relative w-[calc(50%-2rem)]",
+                  index % 2 === 0 ? "pr-8 text-right" : "pl-8 text-left"
+                )}
+              >
+                {/* Milestone */}
+                <Box
+                  className={cn(
+                    "absolute top-0",
+                    index % 2 === 0 ? "right-0" : "left-0",
+                    "flex h-10 w-10 items-center justify-center rounded-full border-2 border-background shadow-sm",
+                    getStatusColor(item.status)
+                  )}
+                >
+                  {item.icon || getStatusIcon(item.status) || (
+                    <Circle style={css('h-3 w-3')} />
+                  )}
+                </Box>
+
+                {/* Card */}
+                <Box
+                  className={cn(
+                    "rounded-lg border bg-card p-4 shadow-sm",
+                    index % 2 === 0 ? "mr-12" : "ml-12"
+                  )}
+                >
+                  {(item.date || item.time) && (
+                    <Box className="mb-2 text-xs text-muted-foreground">
+                      {item.date}
+                      {item.date && item.time && " • "}
+                      {item.time}
+                    </Box>
+                  )}
+                  <Box tag="h3" className="font-semibold">{item.title}</Box>
+                  {item.description && (
+                    <Box tag="p" className="mt-1 text-sm text-muted-foreground">
+                      {item.description}
+                    </Box>
+                  )}
+                  {item.content && <Box className="mt-3">{item.content}</Box>}
+                </Box>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      )
+    }
+
+    if (variant === "compact") {
+      return (
+        <Box ref={ref as never} className={cn("relative", className)} {...props}>
+          <Box className="space-y-2">
+            {items.map((item, index) => (
+              <Box
+                key={item.id}
+                data-timeline-id={item.id}
+                className={cn(
+                  "relative flex items-center gap-4 p-2 rounded-lg hover:bg-accent transition-colors",
+                  animated &&
+                    !visibleItems.has(item.id) &&
+                    "opacity-0 translate-x-4",
+                  animated &&
+                    visibleItems.has(item.id) &&
+                    "opacity-100 translate-x-0",
+                  "transition-all duration-500 ease-out",
+                  `transition-delay-[${index * 50}ms]`
+                )}
+              >
+                {/* Connector */}
+                {index < items.length - 1 && (
+                  <Box className="absolute left-5 top-10 bottom-0 w-[2px] bg-border" />
+                )}
+
+                {/* Milestone */}
+                <Box
+                  className={cn(
+                    "relative z-10 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full",
+                    getStatusColor(item.status)
+                  )}
+                >
+                  {getStatusIcon(item.status) || <Circle style={css('h-2 w-2')} />}
+                </Box>
+
+                {/* Content */}
+                <Box className="flex-1 flex items-center justify-between">
+                  <div>
+                    <Box tag="span" className="font-medium text-sm">{item.title}</Box>
+                    {item.description && (
+                      <Box tag="span" className="ml-2 text-sm text-muted-foreground">
+                        {item.description}
+                      </Box>
+                    )}
+                  </div>
+                  {(item.date || item.time) && (
+                    <Box className="text-xs text-muted-foreground">
+                      {item.date} {item.time}
+                    </Box>
+                  )}
+                </Box>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      )
+    }
+
+    if (variant === "simple") {
+      return (
+        <Box ref={ref as never} className={cn("relative", className)} {...props}>
+          <Box className="border-l-2 border-border pl-6 space-y-6">
+            {items.map((item, index) => (
+              <Box
+                key={item.id}
+                data-timeline-id={item.id}
+                className={cn(
+                  "relative",
+                  animated &&
+                    !visibleItems.has(item.id) &&
+                    "opacity-0 translate-x-4",
+                  animated &&
+                    visibleItems.has(item.id) &&
+                    "opacity-100 translate-x-0",
+                  "transition-all duration-500 ease-out"
+                )}
+              >
+                {/* Milestone */}
+                <Box
+                  className={cn(
+                    "absolute -left-[1.75rem] flex h-4 w-4 items-center justify-center rounded-full border-2 border-background",
+                    getStatusColor(item.status)
+                  )}
+                >
+                  {item.status === "completed" && <Check style={css('h-2 w-2')} />}
+                  {item.status === "active" && (
+                    <Box className="h-2 w-2 rounded-full bg-white animate-pulse" />
+                  )}
+                </Box>
+
+                {/* Content */}
+                <div>
+                  {(item.date || item.time) && (
+                    <Box className="mb-1 text-xs text-muted-foreground">
+                      {item.date}
+                      {item.date && item.time && " • "}
+                      {item.time}
+                    </Box>
+                  )}
+                  <Box tag="h3" className="font-semibold">{item.title}</Box>
+                  {item.description && (
+                    <Box tag="p" className="mt-1 text-sm text-muted-foreground">
+                      {item.description}
+                    </Box>
+                  )}
+                  {item.content && <Box className="mt-3">{item.content}</Box>}
+                </div>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      )
+    }
+
+    // Default variant
+    return (
+      <Box ref={ref as never} className={cn("relative", className)} {...props}>
+        <Box className="space-y-8">
+          {items.map((item, index) => (
+            <Box
+              key={item.id}
+              data-timeline-id={item.id}
+              className={cn(
+                "relative flex gap-6",
+                animated &&
+                  !visibleItems.has(item.id) &&
+                  "opacity-0 translate-x-8",
+                animated &&
+                  visibleItems.has(item.id) &&
+                  "opacity-100 translate-x-0",
+                "transition-all duration-500 ease-out"
+              )}
+            >
+              {/* Connector Line */}
+              {index < items.length - 1 && (
+                <Box className="absolute left-5 top-10 bottom-0 w-[2px] bg-border" />
+              )}
+
+              {/* Milestone */}
+              <Box
+                className={cn(
+                  "relative z-10 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-background shadow-sm",
+                  getStatusColor(item.status)
+                )}
+              >
+                {item.icon || getStatusIcon(item.status) || (
+                  <Circle style={css('h-3 w-3')} />
+                )}
+              </Box>
+
+              {/* Content */}
+              <Box className="flex-1 pb-8">
+                <Box className="rounded-lg border bg-card p-4 shadow-sm">
+                  {(item.date || item.time) && (
+                    <Box className="mb-2 text-xs text-muted-foreground">
+                      {item.date}
+                      {item.date && item.time && " • "}
+                      {item.time}
+                    </Box>
+                  )}
+                  <Box tag="h3" className="font-semibold">{item.title}</Box>
+                  {item.description && (
+                    <Box tag="p" className="mt-1 text-sm text-muted-foreground">
+                      {item.description}
+                    </Box>
+                  )}
+                  {item.content && <Box className="mt-3">{item.content}</Box>}
+                </Box>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    )
+  }
+)
+
+Timeline.displayName = "Timeline"
+
+export { Timeline, type TimelineItem, type TimelineProps }

package/src/toggle.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+/**
+ * A button that stays down.
+ *
+ * One piece of state and one ARIA attribute: `aria-pressed` tells a screen
+ * reader this is a toggle rather than an action, and the styling reads the same
+ * value, so the two cannot disagree.
+ *
+ * Controlled through `pressed`, or uncontrolled through `defaultPressed` with
+ * `onPressedChange` to hear about it.
+ */
+import { XStack } from '@hanzo/gui'
+import { useState, type ComponentProps, type ReactNode } from 'react'
+
+export type ToggleVariant = 'default' | 'outline'
+export type ToggleSize = 'sm' | 'default' | 'lg'
+
+/** Height, inline padding and the floor that keeps a lone icon square. */
+const SIZE: Record<ToggleSize, { height: number; px: number; minWidth: number }> = {
+  sm: { height: 36, px: 10, minWidth: 36 },
+  default: { height: 40, px: 12, minWidth: 40 },
+  lg: { height: 44, px: 20, minWidth: 44 },
+}
+
+export type ToggleProps = Omit<ComponentProps<typeof XStack>, 'onPress'> & {
+  readonly pressed?: boolean
+  readonly defaultPressed?: boolean
+  readonly onPressedChange?: (pressed: boolean) => void
+  readonly disabled?: boolean
+  readonly variant?: ToggleVariant
+  readonly size?: ToggleSize
+  readonly children?: ReactNode
+}
+
+export function Toggle({
+  pressed,
+  defaultPressed = false,
+  onPressedChange,
+  disabled,
+  variant = 'default',
+  size = 'default',
+  children,
+  ...rest
+}: ToggleProps) {
+  const [own, setOwn] = useState(defaultPressed)
+  const on = pressed ?? own
+
+  const dim = SIZE[size]
+  return (
+    <XStack
+      role="button"
+      aria-pressed={on}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : 0}
+      items="center"
+      justify="center"
+      gap={8}
+      height={dim.height}
+      px={dim.px}
+      minWidth={dim.minWidth}
+      rounded="var(--radius-md, 0.5rem)"
+      borderWidth={variant === 'outline' ? 1 : 0}
+      borderColor="var(--color-input-border)"
+      // The down state is the accent surface; the up state is the ground it sits
+      // on, so an outline toggle shows its border and nothing else.
+      bg={on ? 'var(--color-accent-bg)' : 'transparent'}
+      style={{ color: on ? 'var(--color-accent-fg)' : 'var(--color-text-primary)' }}
+      opacity={disabled ? 0.5 : 1}
+      cursor={disabled ? 'not-allowed' : 'pointer'}
+      hoverStyle={disabled ? undefined : { backgroundColor: 'var(--color-hover)' }}
+      onPress={disabled ? undefined : () => {
+        const next = !on
+        if (pressed === undefined) setOwn(next)
+        onPressedChange?.(next)
+      }}
+      {...rest}
+    >
+      {children}
+    </XStack>
+  )
+}
+
+export default Toggle