Base primitives

The base namespace contains small visual and interaction primitives shared by the feature-level surfaces. Use a primitive to compose a custom Chakra interface; keep Composer, Timeline, HITL, and knowledge-base state in their respective headless contracts.

Usage

Import a primitive directly from the Chakra package when it provides the visual behavior your custom surface needs:

import { Tooltip, TriggerButton } from '@hyperflow/chakra-ui'

Keep feature state in the appropriate headless contract. For example, a dialog used in a human-in-the-loop flow should receive its request state from HITL rather than creating a separate request lifecycle.

Examples

SelectionMenu supplies the trigger, menu positioning, selected state, and option presentation. The enclosing component still owns the selected value and change handler.

src/components/project-view-selector.tsx

import { SelectionMenu } from '@hyperflow/chakra-ui'
import { useState } from 'react'

const options = [
  { value: 'grid', label: 'Grid view' },
  { value: 'list', label: 'List view' },
]

export function ProjectViewSelector() {
  const [view, setView] = useState('grid')
  const selected = options.find((option) => option.value === view)!

  return (
    <SelectionMenu
      title="View"
      selectedLabel={selected.label}
      selectedValue={view}
      options={options}
      onSelect={setView}
    />
  )
}

Guide

Start from the feature contract

Base primitives provide presentation and local interaction only. Get session, Composer, Timeline, HITL, or knowledge-base data from the corresponding @hyperflow/react hook, then pass the narrow values and callbacks that a primitive needs.

Choose the smallest primitive

Use BaseDialog for a dialog with a standard confirmation footer, ConfirmMenuItem when that dialog begins from a menu item, and SelectionMenu for a controlled list of choices. Use TriggerButton only when composing a custom trigger; SelectionMenu already includes one.

Keep global setup at the application boundary

Render Provider and Toaster once at the Chakra application boundary. Use Tooltip, IconButton, SegmentedBar, and MarkdownContent inside the surface that needs them.

Props

Each primitive has its own prop contract. The most commonly composed primitives are listed here; their complete props remain in the reference so this page stays focused on choosing the right building block.

Component	Default	Type
`BaseDialog`	—	`BaseDialogProps` A dialog shell with optional confirmation actions.
`Provider`	—	`ColorModeProviderProps` The Chakra and color-mode provider for the application boundary.
`Toaster`	—	— The global toast stack; it accepts no props.
`ConfirmMenuItem`	`label="Confirm"`	`ConfirmMenuItemProps` A menu action that requires confirmation.
`SelectionMenu`	`layout="compact"`	`SelectionMenuProps` A controlled option menu with its own trigger.
`TriggerButton`	`layout="compact"`	`TriggerButtonProps` The trigger used by a selection menu or custom menu.
`Tooltip`	—	`TooltipProps` A portalled tooltip wrapper.
`IconButton`	—	`IconButtonProps` A recipe-styled icon-only button.
`SegmentedBar`	`fillPercent={100}`	`SegmentedBarProps` A proportional segmented progress bar.
`MarkdownContent`	`animate={false}`	`MarkdownContentProps` Sanitized Markdown with Chakra styling.

For the complete primitive contracts, see the @hyperflow/chakra-ui reference.