@hanzo/ui 8.0.6 → 8.0.8

package/src/product/DataTable.tsx

@@ -1,99 +0,0 @@
-'use client'
-
-/**
- * Generic data table — the shared list primitive for every product module.
- *
- * Rows are typed `<T>`; columns declare a key, header, and optional cell
- * renderer. Built on Hanzo GUI Stacks (shorthand style props per the v5 config)
- * so it adapts across platforms. Loading and empty states are first-class.
- */
-import type { ReactNode } from 'react'
-import { Spinner, Text, XStack, YStack } from '@hanzo/gui'
-
-export type Column<T> = {
-  key: string
-  header: string
-  /** Cell renderer; defaults to `String(row[key])`. */
-  render?: (row: T) => ReactNode
-  /** Fixed width (px) for the column; otherwise flexes. */
-  width?: number
-}
-
-export function DataTable<T>({
-  columns,
-  rows,
-  loading,
-  empty = 'Nothing here yet.',
-  rowKey,
-  onRowPress,
-}: {
-  columns: Column<T>[]
-  rows: T[]
-  loading?: boolean
-  empty?: string
-  rowKey: (row: T) => string
-  onRowPress?: (row: T) => void
-}) {
-  if (loading) {
-    return (
-      <XStack p="$6" justify="center">
-        <Spinner size="large" color="$color11" />
-      </XStack>
-    )
-  }
-
-  if (rows.length === 0) {
-    return (
-      <YStack p="$6" items="center" borderWidth={1} borderColor="$borderColor" rounded="$4">
-        <Text color="$color11">{empty}</Text>
-      </YStack>
-    )
-  }
-
-  return (
-    <YStack borderWidth={1} borderColor="$borderColor" rounded="$4" overflow="hidden">
-      <XStack bg="$color2" py="$2.5" px="$3" gap="$3">
-        {columns.map((c) => (
-          <Text
-            key={c.key}
-            width={c.width}
-            flex={c.width ? undefined : 1}
-            fontSize="$2"
-            fontWeight="700"
-            color="$color11"
-          >
-            {c.header}
-          </Text>
-        ))}
-      </XStack>
-      <YStack>
-        {rows.map((row) => (
-          <XStack
-            key={rowKey(row)}
-            py="$2.5"
-            px="$3"
-            gap="$3"
-            borderTopWidth={1}
-            borderColor="$borderColor"
-            items="center"
-            hoverStyle={onRowPress ? { bg: '$color2' } : undefined}
-            cursor={onRowPress ? 'pointer' : undefined}
-            onPress={onRowPress ? () => onRowPress(row) : undefined}
-          >
-            {columns.map((c) => (
-              <YStack key={c.key} width={c.width} flex={c.width ? undefined : 1}>
-                {c.render ? (
-                  c.render(row)
-                ) : (
-                  <Text fontSize="$3" numberOfLines={1}>
-                    {String((row as Record<string, unknown>)[c.key] ?? '')}
-                  </Text>
-                )}
-              </YStack>
-            ))}
-          </XStack>
-        ))}
-      </YStack>
-    </YStack>
-  )
-}

package/src/product/Donut.tsx

@@ -1,83 +0,0 @@
-'use client'
-
-/**
- * Donut — a tiny dependency-free SVG ring for a categorical breakdown
- * (e.g. machines by status). Standard library first: no chart dependency for a
- * single ring. It renders ONLY the real segments it is given and returns `null`
- * when the total is zero, so the caller shows an honest empty state instead of an
- * empty circle. Purely presentational — all values come from the caller.
- */
-export type DonutSegment = { label: string; value: number; color: string }
-
-export function Donut({
-  segments,
-  size = 160,
-  thickness = 18,
-  centerValue,
-  centerLabel,
-  trackColor = '#2a2d2e',
-  valueColor = '#ecedee',
-  labelColor = '#9ba1a6',
-}: {
-  segments: DonutSegment[]
-  size?: number
-  thickness?: number
-  /** Big number in the middle (e.g. total). */
-  centerValue?: string
-  /** Caption under the center value. */
-  centerLabel?: string
-  /** Unfilled-ring color (explicit hex so it never depends on theme var names). */
-  trackColor?: string
-  valueColor?: string
-  labelColor?: string
-}) {
-  const total = segments.reduce((n, s) => n + Math.max(0, s.value), 0)
-  if (total <= 0) return null
-
-  const r = (size - thickness) / 2
-  const cx = size / 2
-  const cy = size / 2
-  const circ = 2 * Math.PI * r
-
-  let offset = 0
-  const arcs = segments
-    .filter((s) => s.value > 0)
-    .map((s) => {
-      const frac = s.value / total
-      const dash = frac * circ
-      const node = (
-        <circle
-          key={s.label}
-          cx={cx}
-          cy={cy}
-          r={r}
-          fill="none"
-          stroke={s.color}
-          strokeWidth={thickness}
-          strokeDasharray={`${dash} ${circ - dash}`}
-          strokeDashoffset={-offset}
-        />
-      )
-      offset += dash
-      return node
-    })
-
-  return (
-    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} role="img" aria-label="Donut chart">
-      {/* track */}
-      <circle cx={cx} cy={cy} r={r} fill="none" stroke={trackColor} strokeWidth={thickness} />
-      {/* segments, drawn from 12 o'clock */}
-      <g transform={`rotate(-90 ${cx} ${cy})`}>{arcs}</g>
-      {centerValue ? (
-        <text x={cx} y={cy - 2} textAnchor="middle" fontSize={size * 0.2} fontWeight="800" fill={valueColor}>
-          {centerValue}
-        </text>
-      ) : null}
-      {centerLabel ? (
-        <text x={cx} y={cy + size * 0.13} textAnchor="middle" fontSize={size * 0.08} fill={labelColor}>
-          {centerLabel}
-        </text>
-      ) : null}
-    </svg>
-  )
-}

package/src/product/EmptyState.tsx

@@ -1,129 +0,0 @@
-'use client'
-
-/**
- * Rich empty state — the ONE way the console turns a real, honest "nothing here
- * yet" into a helpful onboarding moment (DigitalOcean / Vercel class) instead of
- * a dead screen.
- *
- * It is NOT a fabricated-data fallback: callers render it only when a load
- * genuinely succeeded with zero rows (or a resource has no surface yet). It shows
- * the product icon, a one-line "what this is", a couple of guidance bullets, a
- * single primary call-to-action (Deploy / Create / Connect …) and an optional
- * secondary link (Docs / CLI). Orthogonal to `BackendStateCard` (failures) and
- * `DataTable`'s thin inline empty (in-table) — this is the full-bleed first-run
- * surface a module shows in place of its table.
- */
-import type { ReactElement, ReactNode } from 'react'
-import { Button, Card, Text, XStack, YStack } from '@hanzo/gui'
-import { ArrowRight, Check, ExternalLink } from '@hanzogui/lucide-icons-2'
-
-import type { IconLike } from './color'
-import { PrimaryButton } from './PrimaryButton'
-
-/** A single call-to-action — primary (filled) or a secondary/external link. */
-export type EmptyAction = {
-  label: string
-  /** In-app navigation / handler. */
-  onPress?: () => void
-  /** External URL — opens in a new tab with an external-link affordance. */
-  href?: string
-  icon?: ReactElement
-}
-
-/** Open an external URL in a new tab (no-opener), guarded for SSR. */
-function openHref(href: string): void {
-  if (typeof window !== 'undefined') window.open(href, '_blank', 'noopener')
-}
-
-export function EmptyState({
-  icon: Icon,
-  title,
-  description,
-  bullets,
-  primary,
-  secondary,
-}: {
-  /** Product/section icon — any lucide/Gui icon component (size + optional color). */
-  icon: IconLike
-  title: string
-  description: string
-  /** Optional "here's how to get started" guidance bullets. */
-  bullets?: string[]
-  /** The single high-emphasis action (Deploy / Create / Connect). */
-  primary?: EmptyAction
-  /** An optional lower-emphasis action (Docs / CLI / Learn more). */
-  secondary?: EmptyAction
-}) {
-  return (
-    <Card
-      borderWidth={1}
-      borderColor="$borderColor"
-      borderStyle="dashed"
-      p="$6"
-      gap="$4"
-      items="center"
-      maxWidth={640}
-      self="center"
-      width="100%"
-    >
-      <YStack
-        width={48}
-        height={48}
-        items="center"
-        justify="center"
-        rounded="$4"
-        bg="$color3"
-      >
-        <Icon size={24} />
-      </YStack>
-
-      <YStack gap="$2" items="center" maxW={480}>
-        <Text fontSize="$6" fontWeight="800" text="center">
-          {title}
-        </Text>
-        <Text fontSize="$3" color="$color11" text="center">
-          {description}
-        </Text>
-      </YStack>
-
-      {bullets && bullets.length ? (
-        <YStack gap="$2" self="stretch" maxW={420} mx="auto">
-          {bullets.map((b) => (
-            <XStack key={b} gap="$2" items="flex-start">
-              <YStack pt="$1">
-                <Check size={14} color="$color10" />
-              </YStack>
-              <Text fontSize="$3" color="$color11" flex={1}>
-                {b}
-              </Text>
-            </XStack>
-          ))}
-        </YStack>
-      ) : null}
-
-      {primary || secondary ? (
-        <XStack gap="$2" items="center" flexWrap="wrap" justify="center">
-          {primary ? (
-            <PrimaryButton
-              icon={primary.icon}
-              iconAfter={primary.href ? <ExternalLink size={15} /> : <ArrowRight size={15} />}
-              onPress={() => (primary.href ? openHref(primary.href) : primary.onPress?.())}
-            >
-              {primary.label}
-            </PrimaryButton>
-          ) : null}
-          {secondary ? (
-            <Button
-              chromeless
-              icon={secondary.icon}
-              iconAfter={secondary.href ? <ExternalLink size={14} /> : undefined}
-              onPress={() => (secondary.href ? openHref(secondary.href) : secondary.onPress?.())}
-            >
-              {secondary.label}
-            </Button>
-          ) : null}
-        </XStack>
-      ) : null}
-    </Card>
-  )
-}

package/src/product/FadeIn.tsx

@@ -1,38 +0,0 @@
-'use client'
-
-/**
- * FadeIn — the ONE entrance animation for the console.
- *
- * A thin wrapper that applies the shared `.hz-fade-up` keyframe (defined once in
- * globals.css) plus an optional stagger delay, so sections and cards rise in the
- * way the hanzo.ai marketing surface does. Framework-free (no animation driver,
- * no JS observers) so it works under static export and honors
- * `prefers-reduced-motion` (handled in the CSS). Pass `index` to stagger a list
- * (delay = index * step), or `delayMs` for an explicit delay.
- */
-import type { CSSProperties, ReactNode } from 'react'
-
-export function FadeIn({
-  children,
-  index = 0,
-  step = 50,
-  delayMs,
-  style,
-}: {
-  children: ReactNode
-  /** Position in a list — staggers the entrance by `index * step` ms. */
-  index?: number
-  /** Per-index stagger in ms (default 50). */
-  step?: number
-  /** Explicit delay in ms; overrides the index-based stagger. */
-  delayMs?: number
-  /** Extra styles for the wrapper (e.g. layout/centering). */
-  style?: CSSProperties
-}) {
-  const delay = delayMs ?? index * step
-  return (
-    <div className="hz-fade-up" style={{ animationDelay: `${delay}ms`, ...style }}>
-      {children}
-    </div>
-  )
-}

package/src/product/Field.tsx

@@ -1,160 +0,0 @@
-'use client'
-
-/**
- * Form field primitives — labeled rows over Hanzo GUI inputs.
- *
- * One way to render a labeled control. Every editor field goes through these, so
- * spacing, disabled styling, and the label column stay consistent. Style props
- * use the v5 shorthand set (p/px/items/justify/...).
- */
-import type { ReactNode } from 'react'
-import {
-  Input,
-  Label,
-  Select,
-  Switch,
-  TextArea,
-  Slider,
-  Text,
-  XStack,
-  YStack,
-} from '@hanzo/gui'
-import { ChevronDown } from '@hanzogui/lucide-icons-2'
-
-/** Labeled row: fixed label column + flexing control. */
-export function FieldRow({ label, children }: { label: string; children: ReactNode }) {
-  return (
-    <XStack gap="$3" items="flex-start" flexWrap="wrap">
-      <Label width={180} pt="$2" color="$color11" fontSize="$3">
-        {label}
-      </Label>
-      <YStack flex={1} minW={240}>
-        {children}
-      </YStack>
-    </XStack>
-  )
-}
-
-export function FieldText({
-  value,
-  onChange,
-  disabled,
-  secure,
-  placeholder,
-}: {
-  value: string
-  onChange: (v: string) => void
-  disabled?: boolean
-  secure?: boolean
-  placeholder?: string
-}) {
-  return (
-    <Input
-      value={value}
-      onChangeText={onChange}
-      disabled={disabled}
-      secureTextEntry={secure}
-      placeholder={placeholder}
-      autoCapitalize="none"
-    />
-  )
-}
-
-export function FieldTextArea({
-  value,
-  onChange,
-  disabled,
-  rows = 6,
-}: {
-  value: string
-  onChange: (v: string) => void
-  disabled?: boolean
-  rows?: number
-}) {
-  return (
-    <TextArea value={value} onChangeText={onChange} disabled={disabled} numberOfLines={rows} />
-  )
-}
-
-export function FieldSwitch({
-  checked,
-  onChange,
-  disabled,
-}: {
-  checked: boolean
-  onChange: (v: boolean) => void
-  disabled?: boolean
-}) {
-  return (
-    <Switch checked={checked} onCheckedChange={onChange} disabled={disabled} size="$3">
-      <Switch.Thumb />
-    </Switch>
-  )
-}
-
-export function FieldSelect({
-  value,
-  options,
-  onChange,
-  disabled,
-}: {
-  value: string
-  options: string[]
-  onChange: (v: string) => void
-  disabled?: boolean
-}) {
-  return (
-    <Select value={value} onValueChange={onChange} disablePreventBodyScroll native>
-      <Select.Trigger disabled={disabled} iconAfter={<ChevronDown size={16} />}>
-        <Select.Value placeholder="Select…" />
-      </Select.Trigger>
-      <Select.Content>
-        <Select.Viewport>
-          {options.map((opt, i) => (
-            <Select.Item key={opt} index={i} value={opt}>
-              <Select.ItemText>{opt}</Select.ItemText>
-            </Select.Item>
-          ))}
-        </Select.Viewport>
-      </Select.Content>
-    </Select>
-  )
-}
-
-export function FieldSlider({
-  value,
-  min,
-  max,
-  step,
-  onChange,
-  disabled,
-}: {
-  value: number
-  min: number
-  max: number
-  step: number
-  onChange: (v: number) => void
-  disabled?: boolean
-}) {
-  return (
-    <XStack gap="$3" items="center">
-      <Text width={56} fontSize="$3" color="$color11">
-        {value}
-      </Text>
-      <Slider
-        flex={1}
-        min={min}
-        max={max}
-        step={step}
-        value={[value]}
-        onValueChange={(v) => onChange(v[0] ?? min)}
-        disabled={disabled}
-      >
-        <Slider.Track>
-          <Slider.TrackActive />
-        </Slider.Track>
-        <Slider.Thumb index={0} circular />
-      </Slider>
-    </XStack>
-  )
-}

package/src/product/HanzoMark.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-/**
- * The Hanzo "H" mark — the canonical 7-path shaded glyph: five body blocks +
- * two shade slivers (geometry canon: @hanzo/logo `MARK_PATHS`).
- *
- * Rendered as inline SVG with `fill: currentColor` (shade at reduced opacity),
- * so it inherits the surrounding text color and adapts to the dark/light theme
- * with no per-theme asset. ONE source for the mark across the chrome.
- */
-export function HanzoMark({ size = 22, color = 'currentColor' }: { size?: number; color?: string }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 67 67"
-      role="img"
-      aria-label="Hanzo"
-      fill={color}
-      style={{ display: 'block', flexShrink: 0 }}
-    >
-      <path d="M22.21 67V44.6369H0V67H22.21Z" />
-      <path opacity={0.55} d="M0 44.6369L22.21 46.8285V44.6369H0Z" />
-      <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" />
-      <path d="M22.21 0H0V22.3184H22.21V0Z" />
-      <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" />
-      <path opacity={0.55} d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" />
-      <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" />
-    </svg>
-  )
-}