Bear UI 1.3.5 — charts, AI, code, maps, and kanban now have their own packages

@forgedevstack/bear 1.3.5 is out. Core stays the React kit you already install. The surfaces that grew large enough to stand alone now have their own package names.

Your existing imports from @forgedevstack/bear still work. You install a Bear X package when you want that surface by name.

Docs: bearui.com. Source: github.com/yaghobieh/bear.

Bear used to be one install for buttons, charts, chat, maps, and a kanban board. 1.3.5 splits the heavy surfaces out.

Styles are still one import: @forgedevstack/bear/styles.css. The new packages do not ship a second stylesheet.

npm install @forgedevstack/bear npm install @forgedevstack/bear-x-charts npm install @forgedevstack/bear-x-ai npm install @forgedevstack/bear-x-code npm install @forgedevstack/bear-map npm install @forgedevstack/kanban Enter fullscreen mode Exit fullscreen mode Core is 1.3.5. The new packages are 0.1.0 and peer-depend on Bear >=1.3.5.

import ' @forgedevstack/bear/styles.css '; import { BearProvider } from ' @forgedevstack/bear '; export function App ({ children }: { children: React. ReactNode }) { return ( < BearProvider colorScheme = "system" theme = { { colors: { primary: ' #ec4899 ' } } } > { children } </ BearProvider > ); } Enter fullscreen mode Exit fullscreen mode colorScheme is light, dark, or system.

@forgedevstack/bear-x-charts exports Chart, BarChart, LineChart, PieChart, RadarChart, FunnelChart, Sparkline, Gauge, RingProgress, Heatmap, and TimelineChart, plus BearProvider.

import { BarChart, LineChart, PieChart } from ' @forgedevstack/bear-x-charts '; const data = [ { label: ' Jan ', value: 30 }, { label: ' Feb ', value: 45 }, { label: ' Mar ', value: 28 }, ]; export function Sales () { return ( <> < BarChart data = { data } height = { 180 } showLabels /> < LineChart data = { data } height = { 180 } smooth animated /> < PieChart data = { data } height = { 180 } pieView = "rose" /> </> ); } Enter fullscreen mode Exit fullscreen mode Pie also has half. Line can be stepped. Gauge is linear or ring. Sparkline can render as bars.

@forgedevstack/bear-x-ai is the chat kit, not a hosted model. You bring the provider. The package is the UI around it.

It exports Chat, FloatingChat, ChatBubble, MessageList, PromptComposer, StreamingMessage, ThinkingBlock, PromptSuggestions, MessageActions, ChatError, ToolCall, CitationList, ApprovalCard, ModelSelect, ContextMeter, and ArtifactCard.

import { PromptComposer, StreamingMessage } from ' @forgedevstack/bear-x-ai '; export function Composer () { return ( < PromptComposer placeholder = "Ask Bear" onSubmit = { ( text ) => { console. log ( text ); } } /> ); } Enter fullscreen mode Exit fullscreen mode Chat sticks to the bottom only when you are already there, so a stream does not yank the scroll position while you read earlier messages.

@forgedevstack/bear-x-code is the code surface: CodeEditor, Terminal, DiffViewer, JsonViewer, and DiffSquares.

import { DiffViewer, JsonViewer } from ' @forgedevstack/bear-x-code '; const payload = { version: ' 1.3.5 ', charts: true }; export function Review () { return ( <> < JsonViewer data = { payload } /> < DiffViewer before = { ' const n = 1 \n ' } after = { ' const n = 2 \n ' } /> </> ); } Enter fullscreen mode Exit fullscreen mode Map and kanban These two are separate libraries, not Bear X names.

import { Map } from ' @forgedevstack/bear-map '; import type { MapMarker } from ' @forgedevstack/bear-map '; const markers: MapMarker [] = [ { id: ' nyc ', label: ' New York ', lat: 40.71, lng: - 74.0 }, { id: ' lon ', label: ' London ', lat: 51.5, lng: - 0.12 }, ]; export function Offices () { return < Map markers = { markers } tileProvider = "light" />; } Enter fullscreen mode Exit fullscreen mode Tiles are street, light, dark, and terrain. Markers can be dragged. Zoom is clamped.

import { Kanban } from ' @forgedevstack/kanban '; const columns = [ { id: ' now ', title: ' Now ', cards: [{ id: ' 1 ', title: ' Ship 1.3.5 ' }], }, { id: ' next ', title: ' Next ', cards: [{ id: ' 2 ', title: ' Write the post ' }], }, ]; export function Board () { return < Kanban columns = { columns } />; } Enter fullscreen mode Exit fullscreen mode The package is @forgedevstack/kanban, not @forgedevstack/bear-kanban.

Leave the imports. 1.3.5 does not delete Chart, Chat, Map, or Kanban from @forgedevstack/bear.

Move an import when you want the package boundary in package.json:

import { BarChart } from ' @forgedevstack/bear-x-charts '; import { Map } from ' @forgedevstack/bear-map '; import { Kanban } from ' @forgedevstack/kanban '; Enter fullscreen mode Exit fullscreen mode Hooks stay where they are:

import { useMediaQuery, useClipboard, useDebounce } from ' @forgedevstack/bear '; Enter fullscreen mode Exit fullscreen mode Where to look Libraries catalog: bearui.com/libraries npm: @forgedevstack/bear GitHub: yaghobieh/bear Install Core, add a Bear X package when a screen needs charts, chat, or code, and add map or kanban only if that screen is a map or a board.