@hanzo/ui 8.0.6 → 8.0.7

package/src/product/menu/items.tsx

@@ -0,0 +1,230 @@
+'use client'
+
+/**
+ * The ONE menu-item spec — every menu across the fleet renders through these
+ * presentational primitives, so DropdownMenu, ContextMenu, SelectMenu and ComboBox
+ * are pixel-identical. Geometry is literal px on a strict 8-grid (never random);
+ * colour is theme-adaptive tokens ($color2/$color11/$color12/$borderColor) so light
+ * and dark both work, with the single purple accent supplied by the brand CSS vars.
+ *
+ * Style props use the @hanzo/gui config shorthands (bg/items/justify/px/py/p/mx/my/
+ * minW/maxH/rounded/select/shrink) — the config omits the longhand aliases.
+ *
+ * Panel   — bg $color2 (#111 dark), hairline border, radius 12, inner pad 4, subtle
+ *           border+ambient elevation.
+ * Item    — height 30 (28–32 band), px 8, gap 8, radius 7; icon in a fixed 16px slot
+ *           on the left; label 13px $color12; right affordance (shortcut / check /
+ *           chevron) right-aligned. States: hover/active/focus → accent-soft, focus
+ *           visible; selected → check + purple; disabled → muted, no hover.
+ * Separator — 1px hairline, 4px vertical margin.
+ * Label     — 11px uppercase muted section header, px 8.
+ */
+import type { ReactNode, KeyboardEvent } from 'react'
+import { Text, XStack, YStack } from '@hanzo/gui'
+import { Check, ChevronRight } from '@hanzogui/lucide-icons-2'
+
+// ── Geometry — literal px, 8-grid ──────────────────────────────────────────────
+const ITEM_MIN_HEIGHT = 30
+const ITEM_RADIUS = 7
+const ITEM_PX = 8
+const ITEM_GAP = 8
+const ICON_SLOT = 16
+export const PANEL_RADIUS = 12
+export const PANEL_PAD = 4
+const PANEL_GAP = 2
+const SEP_MARGIN = 4
+const FONT_LABEL = 13
+const FONT_MUTED = 11
+const FONT_SHORTCUT = 12
+
+// ── Colour — brand purple accent via CSS vars (fallbacks keep it correct even when
+//    @hanzo/brand is not loaded, e.g. a bare Vite/Tauri host); everything else uses
+//    theme-adaptive Tamagui tokens. ──────────────────────────────────────────────
+const ACCENT = 'var(--hanzo-accent, #8b5cf6)'
+const ACCENT_SOFT = 'var(--hanzo-accent-soft, rgba(139,92,246,0.16))'
+const DANGER = 'var(--hanzo-danger, #ef4444)'
+
+// ── Declarative item model ──────────────────────────────────────────────────────
+export type MenuItemSpec =
+  | {
+      type?: 'item'
+      /** Stable key. */
+      key: string
+      label: string
+      /** Leading Lucide icon (16px, unfilled) in the fixed left slot. */
+      icon?: ReactNode
+      /** Second muted line under the label (e.g. an id or hint). */
+      description?: string
+      /** Right-aligned shortcut / hint text (e.g. "⌘K"). */
+      shortcut?: string
+      /** Renders a right check + purple tint. */
+      selected?: boolean
+      disabled?: boolean
+      /** Danger styling (red label/icon). */
+      destructive?: boolean
+      /** Renders a right chevron (submenu / drill-in affordance). */
+      hasSubmenu?: boolean
+      onSelect: () => void
+      /** Keep the menu open after selecting (default: close). */
+      closeOnSelect?: boolean
+    }
+  | { type: 'separator'; key?: string }
+  | { type: 'label'; key?: string; label: string }
+
+// ── Surface ───────────────────────────────────────────────────────────────────
+export function MenuPanel({
+  children,
+  minWidth = 200,
+  maxHeight = 360,
+  onKeyDown,
+  panelRef,
+  ...rest
+}: {
+  children: ReactNode
+  minWidth?: number
+  maxHeight?: number
+  onKeyDown?: (e: KeyboardEvent) => void
+  /** Web DOM node of the panel (for measuring / edge-flip). */
+  panelRef?: (node: HTMLElement | null) => void
+  [key: string]: unknown
+}) {
+  return (
+    <YStack
+      // Web DOM ref; Gui forwards it to the underlying node. Cast (not @ts-expect-error)
+      // so it is env-agnostic — the ref type is strict under the pkg build, loose here.
+      ref={panelRef as never}
+      role="menu"
+      bg="$color2"
+      borderColor="$borderColor"
+      borderWidth={1}
+      rounded={PANEL_RADIUS}
+      p={PANEL_PAD}
+      gap={PANEL_GAP}
+      minW={minWidth}
+      maxH={maxHeight}
+      overflow="scroll"
+      // Subtle border + ambient elevation, minimal shadow.
+      shadowColor="rgba(0,0,0,0.45)"
+      shadowRadius={20}
+      shadowOffset={{ width: 0, height: 10 }}
+      onKeyDown={onKeyDown as never}
+      {...rest}
+    >
+      {children}
+    </YStack>
+  )
+}
+
+// ── Item — the ONE row ──────────────────────────────────────────────────────────
+export function MenuItemView({
+  icon,
+  label,
+  description,
+  shortcut,
+  selected = false,
+  disabled = false,
+  destructive = false,
+  hasSubmenu = false,
+  onSelect,
+}: Omit<Extract<MenuItemSpec, { type?: 'item' }>, 'key' | 'type' | 'closeOnSelect'>) {
+  const press = () => {
+    if (!disabled) onSelect()
+  }
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (disabled) return
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onSelect()
+    }
+  }
+  const labelColor = destructive ? DANGER : '$color12'
+  return (
+    <XStack
+      role="menuitem"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled || undefined}
+      items="center"
+      gap={ITEM_GAP}
+      px={ITEM_PX}
+      minH={ITEM_MIN_HEIGHT}
+      rounded={ITEM_RADIUS}
+      cursor={disabled ? 'default' : 'pointer'}
+      opacity={disabled ? 0.4 : 1}
+      select="none"
+      style={{ outline: 'none' }}
+      hoverStyle={disabled ? {} : { bg: ACCENT_SOFT as never }}
+      pressStyle={disabled ? {} : { bg: ACCENT_SOFT as never }}
+      focusStyle={disabled ? {} : { bg: ACCENT_SOFT as never }}
+      onPress={press}
+      onKeyDown={onKeyDown as never}
+    >
+      <XStack width={ICON_SLOT} height={ICON_SLOT} items="center" justify="center" shrink={0}>
+        {icon ? (
+          <XStack items="center" justify="center" opacity={destructive ? 1 : 0.9} style={destructive ? { color: DANGER } : undefined}>
+            {icon}
+          </XStack>
+        ) : null}
+      </XStack>
+
+      <YStack flex={1} minW={0}>
+        <Text fontSize={FONT_LABEL} lineHeight={18} color={labelColor as never} numberOfLines={1}>
+          {label}
+        </Text>
+        {description ? (
+          <Text fontSize={FONT_MUTED} lineHeight={14} color="$color11" numberOfLines={1}>
+            {description}
+          </Text>
+        ) : null}
+      </YStack>
+
+      {shortcut ? (
+        <Text fontSize={FONT_SHORTCUT} color="$color11" shrink={0}>
+          {shortcut}
+        </Text>
+      ) : null}
+      {selected ? <Check size={14} color={ACCENT} /> : null}
+      {hasSubmenu ? <ChevronRight size={14} color="var(--hanzo-muted, currentColor)" opacity={0.6} /> : null}
+    </XStack>
+  )
+}
+
+// ── Separator ───────────────────────────────────────────────────────────────────
+export function MenuSeparatorView() {
+  return <YStack height={1} bg="$borderColor" my={SEP_MARGIN} mx={SEP_MARGIN} role="separator" />
+}
+
+// ── Section label ────────────────────────────────────────────────────────────────
+export function MenuLabelView({ children }: { children: ReactNode }) {
+  return (
+    <Text
+      fontSize={FONT_MUTED}
+      color="$color11"
+      px={ITEM_PX}
+      py={SEP_MARGIN}
+      textTransform="uppercase"
+      letterSpacing={0.4}
+      select="none"
+    >
+      {children}
+    </Text>
+  )
+}
+
+// ── The single render path shared by every menu ──────────────────────────────────
+export function renderMenuItems(items: MenuItemSpec[], close?: () => void): ReactNode {
+  return items.map((it, i) => {
+    if (it.type === 'separator') return <MenuSeparatorView key={it.key ?? `sep-${i}`} />
+    if (it.type === 'label') return <MenuLabelView key={it.key ?? `lbl-${i}`}>{it.label}</MenuLabelView>
+    const { key, onSelect, closeOnSelect = true, ...rest } = it
+    return (
+      <MenuItemView
+        key={key}
+        {...rest}
+        onSelect={() => {
+          onSelect()
+          if (closeOnSelect) close?.()
+        }}
+      />
+    )
+  })
+}

package/src/product/menu/portal-theme.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+/**
+ * PortalTheme — the ONE fix for "themed content escapes its theme through a portal".
+ *
+ * @hanzo/gui's `Popover.Content` and `Portal` render their children in a SEPARATE
+ * React subtree (a Gorhom-style portal host mounted at the app root), NOT via
+ * `ReactDOM.createPortal`. React context therefore does NOT flow from the trigger's
+ * location to the host. Under a nested `<Theme name="dark">` the portaled content
+ * lands OUTSIDE that theme context and Tamagui throws "Missing theme" (or renders
+ * unthemed).
+ *
+ * The fix is two-part and must stay two-part:
+ *   1. At the TRIGGER site (theme context still available) capture the resolved
+ *      theme name with `useThemeName()`.
+ *   2. INSIDE the portaled content re-apply it: `<PortalTheme name={captured}>`.
+ *
+ * Every portal-backed menu in this package (DropdownMenu, ContextMenu, SelectMenu,
+ * ComboBox) uses this so a menu renders identically whether it is opened under the
+ * root theme or under any nested `<Theme>`, light or dark.
+ */
+import type { ReactNode } from 'react'
+import { Theme, useThemeName } from '@hanzo/gui'
+
+/** Capture the current resolved theme name at the trigger site. Re-exported so the
+ *  capture + re-apply pair reads from one module. */
+export { useThemeName }
+
+export function PortalTheme({ name, children }: { name: string; children: ReactNode }) {
+  // `name` is the resolved theme name (e.g. "dark", or a compound "dark_purple").
+  // Tamagui's `Theme` accepts the resolved name and reconstructs the context.
+  return <Theme name={name as never}>{children}</Theme>
+}

package/src/product/menu/roving.ts

@@ -0,0 +1,34 @@
+'use client'
+
+/**
+ * Roving keyboard focus for a menu panel — ArrowUp/Down move focus between enabled
+ * `[role="menuitem"]` children, Home/End jump to ends, Escape closes. Web/desktop
+ * only (guards on `document`); native menus have no pointer-keyboard nav. Shared by
+ * DropdownMenu and ContextMenu so navigation is identical.
+ */
+import type { KeyboardEvent } from 'react'
+
+export function menuKeyDown(e: KeyboardEvent, onClose?: () => void): void {
+  if (e.key === 'Escape') {
+    onClose?.()
+    return
+  }
+  if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return
+  if (typeof document === 'undefined') return
+
+  const panel = e.currentTarget as HTMLElement
+  const items = Array.from(
+    panel.querySelectorAll<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])'),
+  )
+  if (items.length === 0) return
+  e.preventDefault()
+
+  const active = document.activeElement as HTMLElement | null
+  const current = active ? items.indexOf(active) : -1
+  let next: number
+  if (e.key === 'Home') next = 0
+  else if (e.key === 'End') next = items.length - 1
+  else if (e.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % items.length
+  else next = current <= 0 ? items.length - 1 : current - 1
+  items[next]?.focus()
+}

package/types/product/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../src/product/ComboBox.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEnE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAe,EACf,KAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAuD,EACvD,QAAc,GACf,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,6DAA6D;IAC7D,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,2CAmEA"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../src/product/ComboBox.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAKnE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAe,EACf,KAAY,EACZ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,SAAuD,EACvD,QAAc,GACf,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,6DAA6D;IAC7D,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,2CA4EA"}

package/types/product/SelectMenu.d.ts

@@ -1,9 +1,12 @@
 /**
- * SelectMenu — a compact, reusable dropdown select on @hanzo/gui Popover (the
- * console's proven dropdown idiom, same as OrgSwitcher/ScopeSwitcher). Renders a
- * labelled trigger ("All types", or the chosen option) and a popover list with a
- * check on the active option. Prop-driven + self-contained so it lifts into
- * `@hanzo/ui`. `value === null` is the "all"/unfiltered state.
+ * SelectMenu — a compact, reusable dropdown select on @hanzo/gui Popover. Renders a
+ * labelled trigger ("All types", or the chosen option) and a menu list with a check on
+ * the active option. Prop-driven + self-contained. `value === null` is the
+ * "all"/unfiltered state.
+ *
+ * Uses the ONE shared menu spec (MenuPanel + MenuItemView) so it is pixel-identical to
+ * DropdownMenu/ContextMenu, and the SAME portal-theme fix (PortalTheme) so it renders
+ * correctly through the portal under a nested `<Theme>`, light or dark.
  */
 import type { ReactElement } from 'react';
 export type SelectOption<T extends string> = {

package/types/product/SelectMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../src/product/SelectMenu.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEtE,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,IAAI,EACJ,QAAc,GACf,EAAE;IACD,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1B,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;IACf,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,2CAsCA"}
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../src/product/SelectMenu.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAQzC,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEtE,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,IAAI,EACJ,QAAc,GACf,EAAE;IACD,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1B,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;IACf,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,2CAyCA"}

package/types/product/ThemeToggle.d.ts

@@ -1,2 +1,22 @@
-export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
+export type ThemeMode = 'light' | 'dark';
+export type ThemeToggleProps = {
+    /** Controlled theme. Pair with `onToggle`/`onThemeChange` to fully control it. */
+    theme?: ThemeMode;
+    /** Seed for uncontrolled mode (default: read from the DOM `.dark` class, else 'dark'). */
+    defaultTheme?: ThemeMode;
+    /** Called with the next theme on toggle (alias of `onThemeChange`). */
+    onToggle?: (next: ThemeMode) => void;
+    /** Called with the next theme on toggle. */
+    onThemeChange?: (next: ThemeMode) => void;
+    /** @hanzo/gui Button size token (default "$2"). */
+    size?: string;
+    /** aria-label override. */
+    label?: string;
+};
+/**
+ * The framework-agnostic toggle button. Controlled when `theme` is provided; otherwise
+ * self-managed via the DOM `.dark` class. No framework dependency — safe on any host.
+ */
+export declare function AgnosticThemeToggle({ theme, defaultTheme, onToggle, onThemeChange, size, label, }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeToggle(props: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThemeToggle.d.ts.map

package/types/product/ThemeToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/product/ThemeToggle.tsx"],"names":[],"mappings":"AAYA,wBAAgB,WAAW,4CAY1B"}
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../src/product/ThemeToggle.tsx"],"names":[],"mappings":"AAoBA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kFAAkF;IAClF,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,0FAA0F;IAC1F,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACzC,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AA+BD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,IAAW,EACX,KAAK,GACN,EAAE,gBAAgB,2CAyBlB;AAiBD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAelD"}

package/types/product/ThemeToggleNext.d.ts

@@ -0,0 +1,5 @@
+import { type ThemeToggleProps } from './ThemeToggle';
+declare function ThemeToggleNext({ size, label }: Pick<ThemeToggleProps, 'size' | 'label'>): import("react/jsx-runtime").JSX.Element;
+export default ThemeToggleNext;
+export { ThemeToggleNext };
+//# sourceMappingURL=ThemeToggleNext.d.ts.map

package/types/product/ThemeToggleNext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggleNext.d.ts","sourceRoot":"","sources":["../../src/product/ThemeToggleNext.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAE1E,iBAAS,eAAe,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,CAAC,2CAWjF;AAED,eAAe,eAAe,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/types/product/index.d.ts

@@ -8,6 +8,7 @@ export * from './AppHeader';
 export * from './BrandMark';
 export * from './OrgSwitcher';
 export * from './scope';
+export * from './menu';
 export * from './DataTable';
 export * from './EmptyState';
 export * from './FadeIn';
@@ -22,6 +23,7 @@ export * from './SelectMenu';
 export * from './SlideOver';
 export * from './StatusTag';
 export * from './ThemeToggle';
+export { ThemeToggleNext } from './ThemeToggleNext';
 export * from './Toast';
 export * from './color';
 //# sourceMappingURL=index.d.ts.map

package/types/product/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAA;AAKxB,OAAO,EACL,MAAM,EACN,aAAa,EACb,SAAS,EACT,SAAS,IAAI,eAAe,EAC5B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,GACN,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,cAAc,mBAAmB,CAAA;AAKjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AAGvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/product/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAA;AAKxB,OAAO,EACL,MAAM,EACN,aAAa,EACb,SAAS,EACT,SAAS,IAAI,eAAe,EAC5B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,GACN,MAAM,UAAU,CAAA;AAGjB,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAK/D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,cAAc,mBAAmB,CAAA;AAKjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AAKvB,cAAc,QAAQ,CAAA;AAGtB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/types/product/menu/ContextMenu.d.ts

@@ -0,0 +1,24 @@
+/**
+ * ContextMenu — a right-click menu that renders the SAME shared item spec as
+ * DropdownMenu, so every menu in the fleet is identical. Built on the @hanzo/gui
+ * Portal with the SAME portal-theme fix as the dropdown: the menu is portaled to the
+ * root, escaping any nested `<Theme>`, so it re-applies the captured theme via
+ * <PortalTheme>. Web/desktop right-click (`onContextMenu`); on native — which has no
+ * right-click — the wrapped child renders untouched.
+ *
+ *   <ContextMenu items={[{ key:'copy', label:'Copy', icon:<Copy size={16}/>, onSelect:copy }]}>
+ *     <YStack>right-click me</YStack>
+ *   </ContextMenu>
+ */
+import type { ReactElement } from 'react';
+import { type MenuItemSpec } from './items';
+export type ContextMenuProps = {
+    /** The right-clickable target. Its `onContextMenu` is composed, not replaced. */
+    children: ReactElement;
+    items: MenuItemSpec[];
+    disabled?: boolean;
+    minWidth?: number;
+    maxHeight?: number;
+};
+export declare function ContextMenu({ children, items, disabled, minWidth, maxHeight }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContextMenu.d.ts.map

package/types/product/menu/ContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/product/menu/ContextMenu.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,OAAO,CAAA;AAGrD,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAMvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iFAAiF;IACjF,QAAQ,EAAE,YAAY,CAAA;IACtB,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAc,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAiFrG"}

package/types/product/menu/DropdownMenu.d.ts

@@ -0,0 +1,34 @@
+/**
+ * DropdownMenu — a portal-theme-safe dropdown on the @hanzo/gui Popover (the proven
+ * console idiom, same shell as SelectMenu/ComboBox). Declarative `items`; renders the
+ * ONE shared menu-item spec so it is pixel-identical to every other menu. Opens under
+ * a nested `<Theme>` correctly because the portaled content re-applies the captured
+ * theme (see PortalTheme).
+ *
+ *   <DropdownMenu
+ *     trigger={<Button>Actions</Button>}
+ *     items={[
+ *       { key: 'rename', label: 'Rename', icon: <Pencil size={16} />, onSelect: rename },
+ *       { type: 'separator' },
+ *       { key: 'del', label: 'Delete', destructive: true, onSelect: del },
+ *     ]}
+ *   />
+ */
+import type { ReactElement } from 'react';
+import { Popover } from '@hanzo/gui';
+import { type MenuItemSpec } from './items';
+export type DropdownMenuProps = {
+    /** The clickable element. Cloned as the Popover trigger (`asChild`). */
+    trigger: ReactElement;
+    items: MenuItemSpec[];
+    /** Controlled open state. Omit for uncontrolled. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Popover placement (default `bottom-start`). */
+    placement?: React.ComponentProps<typeof Popover>['placement'];
+    minWidth?: number;
+    maxHeight?: number;
+};
+export declare function DropdownMenu({ trigger, items, open, defaultOpen, onOpenChange, placement, minWidth, maxHeight, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DropdownMenu.d.ts.map

package/types/product/menu/DropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/product/menu/DropdownMenu.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,OAAO,EAAwB,MAAM,YAAY,CAAA;AAC1D,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAIvE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wEAAwE;IACxE,OAAO,EAAE,YAAY,CAAA;IACrB,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,kDAAkD;IAClD,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,WAAW,CAAC,CAAA;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,YAAY,EACZ,SAA0B,EAC1B,QAAc,EACd,SAAS,GACV,EAAE,iBAAiB,2CA4BnB"}

package/types/product/menu/index.d.ts

@@ -0,0 +1,5 @@
+export { DropdownMenu, type DropdownMenuProps } from './DropdownMenu';
+export { ContextMenu, type ContextMenuProps } from './ContextMenu';
+export { MenuPanel, MenuItemView, MenuSeparatorView, MenuLabelView, renderMenuItems, type MenuItemSpec, } from './items';
+export { PortalTheme } from './portal-theme';
+//# sourceMappingURL=index.d.ts.map

package/types/product/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product/menu/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EACL,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,KAAK,YAAY,GAClB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/types/product/menu/items.d.ts

@@ -0,0 +1,69 @@
+/**
+ * The ONE menu-item spec — every menu across the fleet renders through these
+ * presentational primitives, so DropdownMenu, ContextMenu, SelectMenu and ComboBox
+ * are pixel-identical. Geometry is literal px on a strict 8-grid (never random);
+ * colour is theme-adaptive tokens ($color2/$color11/$color12/$borderColor) so light
+ * and dark both work, with the single purple accent supplied by the brand CSS vars.
+ *
+ * Style props use the @hanzo/gui config shorthands (bg/items/justify/px/py/p/mx/my/
+ * minW/maxH/rounded/select/shrink) — the config omits the longhand aliases.
+ *
+ * Panel   — bg $color2 (#111 dark), hairline border, radius 12, inner pad 4, subtle
+ *           border+ambient elevation.
+ * Item    — height 30 (28–32 band), px 8, gap 8, radius 7; icon in a fixed 16px slot
+ *           on the left; label 13px $color12; right affordance (shortcut / check /
+ *           chevron) right-aligned. States: hover/active/focus → accent-soft, focus
+ *           visible; selected → check + purple; disabled → muted, no hover.
+ * Separator — 1px hairline, 4px vertical margin.
+ * Label     — 11px uppercase muted section header, px 8.
+ */
+import type { ReactNode, KeyboardEvent } from 'react';
+export declare const PANEL_RADIUS = 12;
+export declare const PANEL_PAD = 4;
+export type MenuItemSpec = {
+    type?: 'item';
+    /** Stable key. */
+    key: string;
+    label: string;
+    /** Leading Lucide icon (16px, unfilled) in the fixed left slot. */
+    icon?: ReactNode;
+    /** Second muted line under the label (e.g. an id or hint). */
+    description?: string;
+    /** Right-aligned shortcut / hint text (e.g. "⌘K"). */
+    shortcut?: string;
+    /** Renders a right check + purple tint. */
+    selected?: boolean;
+    disabled?: boolean;
+    /** Danger styling (red label/icon). */
+    destructive?: boolean;
+    /** Renders a right chevron (submenu / drill-in affordance). */
+    hasSubmenu?: boolean;
+    onSelect: () => void;
+    /** Keep the menu open after selecting (default: close). */
+    closeOnSelect?: boolean;
+} | {
+    type: 'separator';
+    key?: string;
+} | {
+    type: 'label';
+    key?: string;
+    label: string;
+};
+export declare function MenuPanel({ children, minWidth, maxHeight, onKeyDown, panelRef, ...rest }: {
+    children: ReactNode;
+    minWidth?: number;
+    maxHeight?: number;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    /** Web DOM node of the panel (for measuring / edge-flip). */
+    panelRef?: (node: HTMLElement | null) => void;
+    [key: string]: unknown;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenuItemView({ icon, label, description, shortcut, selected, disabled, destructive, hasSubmenu, onSelect, }: Omit<Extract<MenuItemSpec, {
+    type?: 'item';
+}>, 'key' | 'type' | 'closeOnSelect'>): import("react/jsx-runtime").JSX.Element;
+export declare function MenuSeparatorView(): import("react/jsx-runtime").JSX.Element;
+export declare function MenuLabelView({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function renderMenuItems(items: MenuItemSpec[], close?: () => void): ReactNode;
+//# sourceMappingURL=items.d.ts.map

package/types/product/menu/items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../../src/product/menu/items.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAUrD,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,SAAS,IAAI,CAAA;AAe1B,MAAM,MAAM,YAAY,GACpB;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kBAAkB;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,GACD;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAGlD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAc,EACd,SAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;IACtC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,2CA0BA;AAGD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,WAAmB,EACnB,UAAkB,EAClB,QAAQ,GACT,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,eAAe,CAAC,2CA4DlF;AAGD,wBAAgB,iBAAiB,4CAEhC;AAGD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAclE;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,IAAI,GAAG,SAAS,CAgBpF"}

package/types/product/menu/portal-theme.d.ts

@@ -0,0 +1,29 @@
+/**
+ * PortalTheme — the ONE fix for "themed content escapes its theme through a portal".
+ *
+ * @hanzo/gui's `Popover.Content` and `Portal` render their children in a SEPARATE
+ * React subtree (a Gorhom-style portal host mounted at the app root), NOT via
+ * `ReactDOM.createPortal`. React context therefore does NOT flow from the trigger's
+ * location to the host. Under a nested `<Theme name="dark">` the portaled content
+ * lands OUTSIDE that theme context and Tamagui throws "Missing theme" (or renders
+ * unthemed).
+ *
+ * The fix is two-part and must stay two-part:
+ *   1. At the TRIGGER site (theme context still available) capture the resolved
+ *      theme name with `useThemeName()`.
+ *   2. INSIDE the portaled content re-apply it: `<PortalTheme name={captured}>`.
+ *
+ * Every portal-backed menu in this package (DropdownMenu, ContextMenu, SelectMenu,
+ * ComboBox) uses this so a menu renders identically whether it is opened under the
+ * root theme or under any nested `<Theme>`, light or dark.
+ */
+import type { ReactNode } from 'react';
+import { useThemeName } from '@hanzo/gui';
+/** Capture the current resolved theme name at the trigger site. Re-exported so the
+ *  capture + re-apply pair reads from one module. */
+export { useThemeName };
+export declare function PortalTheme({ name, children }: {
+    name: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=portal-theme.d.ts.map

package/types/product/menu/portal-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-theme.d.ts","sourceRoot":"","sources":["../../../src/product/menu/portal-theme.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAS,YAAY,EAAE,MAAM,YAAY,CAAA;AAEhD;qDACqD;AACrD,OAAO,EAAE,YAAY,EAAE,CAAA;AAEvB,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAIpF"}

package/types/product/menu/roving.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Roving keyboard focus for a menu panel — ArrowUp/Down move focus between enabled
+ * `[role="menuitem"]` children, Home/End jump to ends, Escape closes. Web/desktop
+ * only (guards on `document`); native menus have no pointer-keyboard nav. Shared by
+ * DropdownMenu and ContextMenu so navigation is identical.
+ */
+import type { KeyboardEvent } from 'react';
+export declare function menuKeyDown(e: KeyboardEvent, onClose?: () => void): void;
+//# sourceMappingURL=roving.d.ts.map

package/types/product/menu/roving.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving.d.ts","sourceRoot":"","sources":["../../../src/product/menu/roving.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,wBAAgB,WAAW,CAAC,CAAC,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,IAAI,CAuBxE"}