{ "name": "Barua UI", "description": "An interface design system with Apple's design language, rebuilt natively for the web. Plain HTML and CSS, no build step.", "docs": "https://ui.barua.tz", "repository": "https://github.com/nassdaq/barua-ui", "mcp": { "url": "https://mcp.barua.tz/mcp", "transport": "streamable-http", "docs": "https://ui.barua.tz/docs/infrastructure.html#mcp" }, "stylesheet": "https://ui.barua.tz/css/barua.css", "script": "https://ui.barua.tz/js/barua.js", "conventions": { "classes": ".b-block__element--modifier", "states": ".is-* alongside the matching ARIA attribute", "tokens": "--b-* custom properties; never raw hex or rgb in product code", "hooks": "data-b-* attributes, progressive enhancement only", "icons": "inline 20x20 SVG, 1.5px stroke, currentColor, from the icon library" }, "rules": [ "Compose from documented components. If a pattern is not in the docs, use a documented alternative or promote a new component into the docs first \u2014 never invent markup or CSS in product code.", "Copy the anatomy from the docs demo: same wrapper elements, same slots, same class combinations. A component's parts (__header, __body, __footer) only exist inside their block.", "Never hardcode colour, spacing, radius or shadow. Use --b-* tokens. A raw hex in product code is a bug.", "Inline styles are only for documented knobs (--v, --b-progress, --b-thumb-size, --b-heatmap-cols, --b-circular-size) and artwork backgrounds.", "Icons come from the icon library (docs/icons.html): inline 20x20 SVG, 1.5px stroke, currentColor, sized with .b-icon/--sm/--lg. Never emoji, never letters as icons. A directional mark inside a sentence is text, not an icon: the arrow in a .b-stat__delta stays. The rule governs icon slots, where a glyph stands on its own.", "Never use a native \n \n", "react": { "import": "import { Badge, Button, Field, Input, Label } from \"barua-ui\";", "components": [ "Badge", "Button", "Field", "Input", "Label" ], "root": "Badge", "jsx": "
\n
\n \n \n \n Live\n
\n \n \n \n \n
" }, "knobs": [ "--b-gap", "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-invalid", "is-loading", "is-pressed", "is-valid" ] }, { "id": "collisions", "title": "Check what your colour now collides with", "category": "theming", "url": "https://ui.barua.tz/docs/theming.html#collisions", "summary": "This is the part that bites. Two system colours are defined in terms of the accent or sit close to it, and a brand colour can quietly erase a distinction the interface relies on.", "classes": [ "b-btn", "b-btn--danger", "b-btn--primary", "b-code", "b-code__header", "b-gap-2", "b-hstack", "b-stack--wrap", "b-table", "b-table-wrap" ], "markup": "
\n \n \n
", "react": { "import": "import { Button } from \"barua-ui\";", "components": [ "Button" ], "root": "Button", "jsx": "
\n \n \n
" }, "knobs": [ "--b-gap", "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-asc", "is-desc", "is-loading", "is-pressed", "is-selected" ] }, { "id": "leave-alone", "title": "What not to override", "category": "theming", "url": "https://ui.barua.tz/docs/theming.html#leave-alone", "summary": "Accent tokens are yours. The greyscale is not: --b-text , --b-text-secondary , --b-surface , --b-separator and the fills carry the contrast contract that every component is built against, in both themes at once. Change those and you are not theming the system, you are replacing its foundation \u2014 and the accessible contrast that came free stops being guaranteed.", "classes": [], "markup": "" }, { "id": "scoping", "title": "Scope it when the colour means something", "category": "theming", "url": "https://ui.barua.tz/docs/theming.html#scoping", "summary": "Overriding on :root themes the product. Putting the same tokens on a class themes a region \u2014 useful for a tenant, an environment banner, or one board among many. The tokens cascade, so anything inside picks them up.", "classes": [ "b-code", "b-code__header" ], "markup": "" } ] }, { "id": "wallpapers", "title": "Wallpapers \u2014 pictures shipped finished: sized, blurred, with the accent and scheme already worked out", "url": "https://ui.barua.tz/docs/wallpapers.html", "components": [ { "id": "what-is-baked", "title": "What was worked out beforehand", "category": "wallpapers", "url": "https://ui.barua.tz/docs/wallpapers.html#what-is-baked", "summary": "Four things, each with exactly one answer per picture, so computing them per visitor is repeating a settled question:", "classes": [], "markup": "" }, { "id": "wall-city", "title": "City", "category": "wallpapers", "url": "https://ui.barua.tz/docs/wallpapers.html#wall-city", "summary": "", "classes": [ "b-caption", "b-code", "b-code__copy", "b-code__header", "b-gap-4", "b-has-wallpaper", "b-hstack", "b-stack--wrap", "b-text-secondary", "b-wall" ], "markup": "
\n
\n
Baked glass over this picture
\n

Blurred once, at build time.

\n
\n
", "knobs": [ "--b-gap", "--b-wall-blur", "--b-wall-ground", "--b-wall-image" ] }, { "id": "wall-desk", "title": "Desk", "category": "wallpapers", "url": "https://ui.barua.tz/docs/wallpapers.html#wall-desk", "summary": "", "classes": [ "b-caption", "b-code", "b-code__copy", "b-code__header", "b-gap-4", "b-has-wallpaper", "b-hstack", "b-stack--wrap", "b-text-secondary", "b-wall" ], "markup": "
\n
\n
Baked glass over this picture
\n

Blurred once, at build time.

\n
\n
", "knobs": [ "--b-gap", "--b-wall-blur", "--b-wall-ground", "--b-wall-image" ] }, { "id": "wall-team", "title": "Team", "category": "wallpapers", "url": "https://ui.barua.tz/docs/wallpapers.html#wall-team", "summary": "", "classes": [ "b-caption", "b-code", "b-code__copy", "b-code__header", "b-gap-4", "b-has-wallpaper", "b-hstack", "b-stack--wrap", "b-text-secondary", "b-wall" ], "markup": "
\n
\n
Baked glass over this picture
\n

Blurred once, at build time.

\n
\n
", "knobs": [ "--b-gap", "--b-wall-blur", "--b-wall-ground", "--b-wall-image" ] }, { "id": "wall-dune-light", "title": "Dune Light", "category": "wallpapers", "url": "https://ui.barua.tz/docs/wallpapers.html#wall-dune-light", "summary": "", "classes": [ "b-caption", "b-code", "b-code__copy", "b-code__header", "b-gap-4", "b-has-wallpaper", "b-hstack", "b-stack--wrap", "b-text-secondary", "b-wall" ], "markup": "
\n
\n
Baked glass over this picture
\n

Blurred once, at build time.

\n
\n
", "knobs": [ "--b-gap", "--b-wall-blur", "--b-wall-ground", "--b-wall-image" ] }, { "id": "wall-dusk-ridge", "title": "Dusk Ridge", "category": "wallpapers", "url": "https://ui.barua.tz/docs/wallpapers.html#wall-dusk-ridge", "summary": "", "classes": [ "b-caption", "b-code", "b-code__copy", "b-code__header", "b-gap-4", "b-has-wallpaper", "b-hstack", "b-stack--wrap", "b-text-secondary", "b-wall" ], "markup": "
\n
\n
Baked glass over this picture
\n

Blurred once, at build time.

\n
\n
", "knobs": [ "--b-gap", "--b-wall-blur", "--b-wall-ground", "--b-wall-image" ] }, { "id": "wall-forest-fog", "title": "Forest Fog", "category": "wallpapers", "url": "https://ui.barua.tz/docs/wallpapers.html#wall-forest-fog", "summary": "", "classes": [ "b-caption", "b-code", "b-code__copy", "b-code__header", "b-gap-4", "b-has-wallpaper", "b-hstack", "b-stack--wrap", "b-text-secondary", "b-text-tertiary", "b-wall" ], "markup": "
\n
\n
Baked glass over this picture
\n

Blurred once, at build time.

\n
\n
", "knobs": [ "--b-gap", "--b-wall-blur", "--b-wall-ground", "--b-wall-image" ] }, { "id": "wall-night-coast", "title": "Night Coast", "category": "wallpapers", "url": "https://ui.barua.tz/docs/wallpapers.html#wall-night-coast", "summary": "", "classes": [ "b-caption", "b-code", "b-code__copy", "b-code__header", "b-gap-4", "b-has-wallpaper", "b-hstack", "b-stack--wrap", "b-text-secondary", "b-wall" ], "markup": "
\n
\n
Baked glass over this picture
\n

Blurred once, at build time.

\n
\n
", "knobs": [ "--b-gap", "--b-wall-blur", "--b-wall-ground", "--b-wall-image" ] }, { "id": "wall-salt-flat", "title": "Salt Flat", "category": "wallpapers", "url": "https://ui.barua.tz/docs/wallpapers.html#wall-salt-flat", "summary": "", "classes": [ "b-caption", "b-code", "b-code__copy", "b-code__header", "b-gap-4", "b-has-wallpaper", "b-hstack", "b-stack--wrap", "b-text-secondary", "b-wall" ], "markup": "
\n
\n
Baked glass over this picture
\n

Blurred once, at build time.

\n
\n
", "knobs": [ "--b-gap", "--b-wall-blur", "--b-wall-ground", "--b-wall-image" ] }, { "id": "wall-still-water", "title": "Still Water", "category": "wallpapers", "url": "https://ui.barua.tz/docs/wallpapers.html#wall-still-water", "summary": "", "classes": [ "b-caption", "b-code", "b-code__copy", "b-code__header", "b-gap-4", "b-has-wallpaper", "b-hstack", "b-stack--wrap", "b-text-secondary", "b-wall" ], "markup": "
\n
\n
Baked glass over this picture
\n

Blurred once, at build time.

\n
\n
", "knobs": [ "--b-gap", "--b-wall-blur", "--b-wall-ground", "--b-wall-image" ] } ] }, { "id": "react", "title": "React \u2014 the typed bindings: install, Server Components, and the component index", "url": "https://ui.barua.tz/docs/react.html", "components": [ { "id": "install", "title": "Install", "category": "react", "url": "https://ui.barua.tz/docs/react.html#install", "summary": "One package, one stylesheet. The CSS is the system; the components only spare you from typing class names.", "classes": [ "b-code", "b-code__header" ], "markup": "" }, { "id": "first", "title": "The first component", "category": "react", "url": "https://ui.barua.tz/docs/react.html#first", "summary": "Props are the modifiers you already know. b-btn--primary is variant=\"primary\" ; there is nothing else to learn.", "classes": [ "b-btn", "b-btn--ghost", "b-btn--primary", "b-gap-2", "b-hstack" ], "markup": "
\n \n \n
", "react": { "import": "import { Button } from \"barua-ui\";", "components": [ "Button" ], "root": "Button", "jsx": "
\n \n \n
" }, "knobs": [ "--b-gap", "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "server-components", "title": "Server Components", "category": "react", "url": "https://ui.barua.tz/docs/react.html#server-components", "summary": "The bundle carries its own \"use client\" , so importing from a Server Component works. Components that hold state \u2014 the provider, toasts, the command palette \u2014 still need a client boundary of their own, which is ordinary React, not a quirk of this library.", "classes": [], "markup": "" }, { "id": "theme", "title": "Theme", "category": "react", "url": "https://ui.barua.tz/docs/react.html#theme", "summary": "Light and dark come from light-dark() in the CSS, so the system already follows the operating system with no JavaScript at all. Reach for the provider only to override that choice, and add ThemeScript to stop the first paint flashing the wrong way.", "classes": [ "b-code", "b-code__header" ], "markup": "" }, { "id": "icons", "title": "Icons", "category": "react", "url": "https://ui.barua.tz/docs/react.html#icons", "summary": "The glyph library ships as a component, generated from the icons page \u2014 the same 59 glyphs, by name, with the sizes on the .b-icon scale.", "classes": [ "b-code", "b-code__header", "b-gap-3", "b-hstack", "b-icon" ], "markup": "
\n \n \n \n
", "react": { "import": "import { Icon } from \"barua-ui\";", "components": [ "Icon" ], "root": "Icon", "jsx": "
\n \n \n \n \n \n \n \n \n \n \n \n
" }, "knobs": [ "--b-gap" ] }, { "id": "escape-hatch", "title": "When a component is in the way", "category": "react", "url": "https://ui.barua.tz/docs/react.html#escape-hatch", "summary": "Nothing here is compulsory. Every component forwards className and its ref, so a class the props do not cover can always be added by hand \u2014 and any element can carry a system class directly. The React layer is a convenience, never a gate.", "classes": [ "b-code", "b-code__header" ], "markup": "" }, { "id": "components", "title": "What is exported", "category": "react", "url": "https://ui.barua.tz/docs/react.html#components", "summary": "278 components and hooks, covering every block in the system. The list is generated from the package, so it never claims more than it ships.", "classes": [ "b-table", "b-table-wrap" ], "markup": "", "knobs": [ "--b-lg-border", "--b-lg-pane" ], "states": [ "is-asc", "is-desc", "is-selected" ] } ] }, { "id": "foundations", "title": "Foundations \u2014 tokens, colour, type, materials, motion", "url": "https://ui.barua.tz/docs/foundations.html", "components": [ { "id": "color-system", "title": "Color System", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#color-system", "summary": "Every color token is a light-dark() pair, so a single name is always correct in either scheme. The accent family drives buttons, links, focus and selection; re-tint the whole system with data-accent=\"indigo|purple|pink|teal|green\" on .", "classes": [ "b-badge", "b-badge--accent", "b-btn", "b-btn--ghost", "b-btn--glass", "b-btn--primary", "b-btn--sm", "b-card", "b-card--glass", "b-card--neutral", "b-card__body", "b-card__header", "b-card__title", "b-footnote", "b-gap-2", "b-gap-3", "b-hstack", "b-link", "b-stack", "b-stack--wrap", "b-text-secondary", "b-wall", "b-wallpaper-scope" ], "markup": "
\n \n \n \n \n
\n\n
\n
\n
\n
\n
Glass needs a backdrop
\n Live\n
\n
\n

\n Change the wall and watch the material, the ink and the\n accent all answer to the picture.\n

\n \n
\n
\n
\n
\n\n

\n \n Papercut\n \n \n Cave wall\n \n \n \n\n

\n \n \n \n Glass needs a backdrop\n Live\n \n \n Change the wall and watch the material, the ink and the accent all answer to the picture.\n \n \n \n \n \n \n
" }, "variants": [ { "id": "system-colors", "title": "System colors" }, { "id": "grays", "title": "Grays" }, { "id": "backgrounds-surfaces", "title": "Backgrounds & surfaces" }, { "id": "text-hierarchy", "title": "Text hierarchy" }, { "id": "wallpaper", "title": "Wallpaper" }, { "id": "adaptive-accent", "title": "Adaptive accent & scheme" } ], "knobs": [ "--b-gap", "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong", "--b-wall-ground", "--b-wall-image" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "typography", "title": "Typography", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#typography", "summary": "A text style is a whole set of metrics, not a size: every role below states its own size, weight, leading and tracking together. Small text is not body text made smaller \u2014 a caption opens its tracking slightly and tightens its leading, which is why inheriting those values from the page would be wrong. Headings of the same size as a role use the same metrics as that role, so
and .b-headline are typographically identical.", "classes": [ "b-table", "b-table-wrap" ], "markup": "", "knobs": [ "--b-lg-border", "--b-lg-pane" ], "states": [ "is-asc", "is-desc", "is-selected" ] }, { "id": "font-scale", "title": "Font Scale", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#font-scale", "summary": "The Apple HIG scale, exposed as one class per role. Elements h1 \u2013 h6 map onto it automatically; use the classes when semantics and size need to differ \u2014 a card title that is an h3 but should read as a headline, for instance.", "classes": [ "b-body", "b-callout", "b-caption", "b-footnote", "b-headline", "b-large-title", "b-overline", "b-subheadline", "b-tabular-nums", "b-text-tertiary", "b-text-uppercase", "b-title1", "b-title2", "b-title3", "b-truncate" ], "markup": "" }, { "id": "spacing", "title": "Spacing", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#spacing", "summary": "A 4px base scale. Use 1\u20133 for padding inside controls, 4\u20136 between related elements, 8\u201312 between groups, and 16\u201324 between page sections. If a gap isn't on the scale, it isn't in the system.", "classes": [], "markup": "" }, { "id": "grid", "title": "Grid", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#grid", "summary": ".b-grid is 12 columns by default; set --b-cols or use .b-grid--2/3/4/6 for equal tracks, and span with .b-col-span-* . .b-grid--auto auto-fills against --b-col-min , and .b-card-grid / .b-masonry handle card walls without media queries. Gaps come from the spacing scale via .b-gap-* .", "classes": [ "b-col-span-4", "b-col-span-6", "b-col-span-full", "b-footnote", "b-grid", "b-grid--3", "b-panel", "b-text-center" ], "markup": "
\n
1 / 3
\n
1 / 3
\n
1 / 3
\n
\n
\n
span 6
\n
span 6
\n
span 4
\n
span 4
\n
span 4
\n
span full
\n
", "react": { "import": "import { Footnote, Grid } from \"barua-ui\";", "components": [ "Footnote", "Grid" ], "root": "Grid", "jsx": "\n \n 1 / 3\n \n \n 1 / 3\n \n \n 1 / 3\n \n\n\n \n span 6\n \n \n span 6\n \n \n span 4\n \n \n span 4\n \n \n span 4\n \n \n span full\n \n" }, "knobs": [ "--b-col-min", "--b-cols", "--b-gap", "--b-lg-border", "--b-lg-pane" ] }, { "id": "layout", "title": "Layout", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#layout", "summary": "SwiftUI-style primitives: .b-vstack and .b-hstack flow content with a token gap, and .b-spacer absorbs the leftover space \u2014 that trio builds most toolbars and headers. .b-container centers a page column, .b-section spaces bands of content, and .b-split + .b-panel make resizable multi-pane layouts.", "classes": [ "b-btn", "b-btn--primary", "b-btn--sm", "b-footnote", "b-gap-1", "b-headline", "b-hstack", "b-panel", "b-spacer", "b-table", "b-table-wrap", "b-text-secondary", "b-vstack" ], "markup": "
\n Inbox\n \n \n \n
\n
\n VStack\n Children flow vertically; the gap comes from --b-gap.\n
", "react": { "import": "import { Button, Footnote, Spacer } from \"barua-ui\";", "components": [ "Button", "Footnote", "Spacer" ], "root": "Button", "jsx": "
\n Inbox\n \n \n \n
\n\n VStack\n Children flow vertically; the gap comes from --b-gap.\n" }, "knobs": [ "--b-gap", "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-asc", "is-desc", "is-loading", "is-pressed", "is-selected" ] }, { "id": "breakpoints", "title": "Breakpoints", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#breakpoints", "summary": "Custom properties can't drive @media , so breakpoints are a convention: six shared stops, written by value, always mobile-first with @media (min-width: \u2026) . Base styles serve the phone; each stop only adds.", "classes": [ "b-table", "b-table-wrap" ], "markup": "", "knobs": [ "--b-lg-border", "--b-lg-pane" ], "states": [ "is-asc", "is-desc", "is-selected" ] }, { "id": "border-radius", "title": "Border Radius", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#border-radius", "summary": "Corners grow with the surface, Apple-style: xs for inline code and checkboxes, sm for chips and kbd, md for buttons, inputs and menus, lg for panels and toolbars, xl for cards and modals, 2xl for sheets, and full for pills and avatars. Never give a small control a bigger radius than the surface it sits on.", "classes": [ "b-caption2", "b-gap-1", "b-stack", "b-stack--center", "b-text-tertiary" ], "markup": "
\n
\n --b-radius-xs\n 4px\n
\n
\n
\n --b-radius-sm\n 6px\n
\n
\n
\n --b-radius-md\n 10px\n
\n
\n
\n --b-radius-lg\n 14px\n
\n
\n
\n
\n --b-shadow-xs\n
\n
\n
\n --b-shadow-sm\n
\n
\n
\n --b-shadow-md\n
\n
\n
\n --b-shadow-lg\n
\n
\n
\n --b-shadow-xl\n
\n
\n
\n --b-shadow-accent\n
", "knobs": [ "--b-gap" ] }, { "id": "elevation", "title": "Elevation", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#elevation", "summary": "The elevation ladder pairs each shadow with a 1px hairline ring ( --b-ring ) so edges stay crisp on any background. Use the utilities: 1 for resting cards, 2 for raised cards and glass toolbars, 3 for menus and popovers, 4 for modals and drawers, 5 for the command palette. Level 0 removes elevation for flush surfaces.", "classes": [ "b-elevation-1", "b-elevation-2", "b-elevation-3", "b-elevation-4", "b-elevation-5", "b-gap-2", "b-radius-lg", "b-stack", "b-stack--center" ], "markup": "
\n
\n .b-elevation-1\n
\n
\n
\n .b-elevation-2\n
\n
\n
\n .b-elevation-3\n
\n
\n
\n .b-elevation-4\n
\n
\n
\n .b-elevation-5\n
", "knobs": [ "--b-gap" ] }, { "id": "opacity", "title": "Opacity", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#opacity", "summary": "Three stops, three meanings. hover (0.85) dims media and imagery under the pointer, muted (0.6) de-emphasizes without disabling, and disabled (0.4) is applied automatically by :disabled and .is-disabled \u2014 never hand-roll a disabled look.", "classes": [ "b-caption2", "b-gap-1", "b-stack", "b-stack--center", "b-text-tertiary" ], "markup": "
\n
\n base\n 1\n
\n
\n
\n --b-opacity-hover\n 0.85\n
\n
\n
\n --b-opacity-muted\n 0.6\n
\n
\n
\n --b-opacity-disabled\n 0.4\n
", "knobs": [ "--b-gap" ] }, { "id": "blur", "title": "Blur", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#blur", "summary": "The blur scale feeds the glass materials. Rather than using raw blur values, reach for the composite filters: --b-glass-light (blur-sm + saturate 1.6), --b-glass (blur-lg + saturate 1.8) and --b-glass-heavy (blur-xl + saturate 2) \u2014 the saturation boost is what makes color glow through the pane.", "classes": [ "b-caption2", "b-gap-1", "b-stack", "b-stack--center", "b-text-tertiary" ], "markup": "
\n
\n --b-blur-xs\n 4px\n
\n
\n
\n --b-blur-sm\n 8px\n
\n
\n
\n --b-blur-md\n 16px\n
\n
\n
\n --b-blur-lg\n 24px\n
\n
\n
Aa
\n .b-material-ultrathin\n
\n
\n
Aa
\n .b-material-thin\n
\n
\n
Aa
\n .b-material-regular\n
\n
\n
Aa
\n .b-material-thick\n
\n
\n
Aa
\n .b-material-chrome\n
", "react": { "import": "import { Callout } from \"barua-ui\";", "components": [ "Callout" ], "root": "Callout", "jsx": "
\n \n Aa\n \n .b-material-ultrathin\n
\n
\n \n Aa\n \n .b-material-thin\n
\n
\n \n Aa\n \n .b-material-regular\n
\n
\n \n Aa\n \n .b-material-thick\n
\n
\n \n Aa\n \n .b-material-chrome\n
" }, "variants": [ { "id": "baked-glass", "title": "Baked glass" }, { "id": "backplate", "title": "Backplate" } ], "knobs": [ "--b-gap" ] }, { "id": "borders-dividers", "title": "Borders & Dividers", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#borders-dividers", "summary": "Four weights of edge, all translucent so they sit naturally on any surface: --b-hairline for glass edges and elevation rings, --b-separator for list rows and card borders, --b-border for inputs and controls, and --b-border-strong for their hover state. .b-divider draws separator rules \u2014 vertical inside an hstack, labeled for timeline breaks, and inset to align with list content.", "classes": [ "b-divider", "b-divider--label", "b-divider--vertical", "b-hstack" ], "markup": "
\n Reply\n
\n Forward\n
\n Archive\n
\n
\n
Yesterday
", "react": { "import": "import { Divider } from \"barua-ui\";", "components": [ "Divider" ], "root": "Divider", "jsx": "
\n Reply\n \n Forward\n \n Archive\n
\n\nYesterday" }, "knobs": [ "--b-gap" ] }, { "id": "motion", "title": "Motion", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#motion", "summary": "Motion is quick, physical and quiet: five durations, five curves, and nothing animates that doesn't communicate. Small state changes use instant and fast ; surfaces that move use slow with the spring curve. Everything collapses to near zero under prefers-reduced-motion \u2014 see Accessibility.", "classes": [ "b-btn", "b-btn--primary", "b-card", "b-card--interactive", "b-card__body", "b-chip", "b-footnote", "b-progress", "b-progress--indeterminate", "b-progress__fill", "b-spinner", "b-spinner--lg", "b-table", "b-table-wrap" ], "markup": "instant \u00b7 100ms\nfast \u00b7 150ms\nnormal \u00b7 250ms\nslow \u00b7 350ms\nslower \u00b7 500ms\nstandard \u00b7 default\nout \u00b7 entrances\nin \u00b7 exits\nspring \u00b7 sheets\nbounce \u00b7 overshoot", "react": { "import": "import { Chip } from \"barua-ui\";", "components": [ "Chip" ], "root": "Chip", "jsx": "instant \u00b7 100ms\nfast \u00b7 150ms\nnormal \u00b7 250ms\nslow \u00b7 350ms\nslower \u00b7 500ms\nstandard \u00b7 default\nout \u00b7 entrances\nin \u00b7 exits\nspring \u00b7 sheets\nbounce \u00b7 overshoot" }, "variants": [ { "id": "motion-transitions", "title": "Transitions" }, { "id": "motion-animation", "title": "Animation" } ], "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong", "--b-progress" ], "states": [ "is-active", "is-asc", "is-desc", "is-loading", "is-pressed", "is-selected" ] }, { "id": "iconography", "title": "Iconography", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#iconography", "summary": "Icons are inline SVG \u2014 no font, no sprite request. Draw on a 20\u00d720 viewBox with a 1.5 stroke, stroke=\"currentColor\" and round caps and joins, so every icon inherits text color and matches the SF Symbols weight. .b-icon sizes the box ( --sm 16, default 20, --lg 24, --xl 32) and .b-icon-tile seats an icon on an accent-soft tile for list leaders and feature rows. Decorative icons take aria-hidden=\"true\" .", "classes": [ "b-icon", "b-icon--lg", "b-icon--sm", "b-icon--xl", "b-icon-tile" ], "markup": "\n \n\n\n \n\n\n \n\n\n \n\n\n \n\n\n \n", "react": { "import": "import { Icon, IconTile } from \"barua-ui\";", "components": [ "Icon", "IconTile" ], "root": "Icon", "jsx": "\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n \n\n\n \n \n \n" } }, { "id": "accessibility", "title": "Accessibility", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#accessibility", "summary": "Accessibility is baked into the tokens, not bolted on. The focus ring ( --b-focus-ring , a 3.5px accent halo) appears on :focus-visible only \u2014 keyboards get it, mouse clicks don't. Tab through this demo to see it.", "classes": [ "b-btn", "b-btn--primary", "b-input" ], "markup": "\n\n", "react": { "import": "import { Button, Input } from \"barua-ui\";", "components": [ "Button", "Input" ], "root": "Button", "jsx": "\n\n" }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-invalid", "is-loading", "is-pressed", "is-valid" ] }, { "id": "dark-light", "title": "Dark Mode & Light Mode", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#dark-light", "summary": "The root declares color-scheme: light dark and every color token is a light-dark() pair, so the whole system follows the OS by default. Set data-theme=\"light|dark\" on to force a scheme \u2014 the topbar's data-b-theme-toggle button does exactly that and persists the choice, which the inline script restores before first paint to avoid a flash.", "classes": [ "b-card", "b-card__body", "b-card__subtitle", "b-card__title" ], "markup": "
\n
\n
Light
\n
color-scheme: light
\n
\n
\n
\n
\n
\n
\n
Dark
\n
color-scheme: dark
\n
\n
", "react": { "import": "import { Card, CardBody, CardSubtitle, CardTitle } from \"barua-ui\";", "components": [ "Card", "CardBody", "CardSubtitle", "CardTitle" ], "root": "Card", "jsx": "\n \n Light\n color-scheme: light\n \n\n\n \n \n Dark\n color-scheme: dark\n \n \n
" }, "knobs": [ "--b-lg-border", "--b-lg-pane" ] }, { "id": "responsive-rules", "title": "Responsive Rules", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#responsive-rules", "summary": "Mobile first, always: base styles serve the smallest screen, and each of the six breakpoints only adds. Most layouts shouldn't need media queries at all \u2014 .b-grid--auto , .b-card-grid and the stack primitives reflow on their own. When you do write one, use min-width at a shared stop.", "classes": [], "markup": "" }, { "id": "view-transitions", "title": "View Transitions", "category": "foundations", "url": "https://ui.barua.tz/docs/foundations.html#view-transitions", "summary": "Two things, on the platform's View Transitions API. Opt in with data-vt on and same-origin navigations cross-fade on the system's motion tokens (180ms out, 220ms in). Off by default, disabled automatically under reduced motion, and inert in browsers without the API.", "classes": [ "b-btn", "b-btn--ghost", "b-btn--glass", "b-btn--sm", "b-card", "b-card__body", "b-card__subtitle", "b-card__title", "b-code", "b-code__header", "b-footnote", "b-gap-3", "b-hstack", "b-stack", "b-text-secondary", "b-thumb" ], "markup": "
\n
Page transitions
\n 
<html data-vt>   <!-- pages now cross-fade on navigation -->
\n
", "react": { "import": "import { CodeBlock } from \"barua-ui\";", "components": [ "CodeBlock" ], "root": "CodeBlock", "jsx": "\n
\n Page transitions\n
\n 
\n    \n       \n    \n
\n" }, "variants": [ { "id": "shared-elements", "title": "Shared elements" } ], "knobs": [ "--b-gap", "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong", "--b-thumb-size" ], "states": [ "is-active", "is-loading", "is-pressed" ] } ] }, { "id": "icons", "title": "Icons \u2014 the 20\u00d720 glyph set", "url": "https://ui.barua.tz/docs/icons.html", "components": [ { "id": "icon-usage", "title": "Usage", "category": "icons", "url": "https://ui.barua.tz/docs/icons.html#icon-usage", "summary": "Size icons with .b-icon (1.25rem), .b-icon--sm (1rem) or .b-icon--lg (1.75rem) instead of width/height attributes. Icons inherit currentColor , so they recolor with the component state \u2014 a tinted button tints its glyph for free. Decorative icons take aria-hidden=\"true\" ; icon-only buttons carry the label via aria-label .", "classes": [ "b-btn", "b-btn--ghost", "b-btn--glass", "b-btn--primary", "b-icon", "b-icon--sm", "b-icon-btn", "b-tooltip-host" ], "markup": "\n\n", "react": { "import": "import { Button, Icon, Tooltip } from \"barua-ui\";", "components": [ "Button", "Icon", "Tooltip" ], "root": "Button", "jsx": "\n\n\n \n \n \n \n" }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "symbol-effects", "title": "Symbol effects", "category": "icons", "url": "https://ui.barua.tz/docs/icons.html#symbol-effects", "summary": "A glyph that answers an action is the cheapest feedback an interface has. Add one class to the icon rather than to the control, so a button keeps its own states. The division that matters is whether an effect plays once or repeats : one acknowledges something that just happened, the other describes something still happening. A repeating effect used as an acknowledgement is just noise.", "classes": [ "b-btn", "b-btn--primary", "b-btn--sm", "b-btn--tinted", "b-caption", "b-caption2", "b-code", "b-code__header", "b-gap-2", "b-gap-4", "b-hstack", "b-icon", "b-icon--bounce", "b-icon--breathe", "b-icon--pulse", "b-icon--replace", "b-icon--rotate", "b-icon--scale", "b-icon--sm", "b-icon--wiggle", "b-stack--wrap", "b-table", "b-table-wrap", "b-text-secondary", "b-vstack" ], "markup": "
\n \n the one-shot effects have already run \u2014 press to see them\n
\n
\n \n \n --bounce\n \n \n \n --scale\n \n \n \n \n \n the one-shot effects have already run \u2014 press to see them\n
\n
\n \n \n \n \n --bounce\n \n \n \n \n \n --scale\n \n \n \n \n \n \n \n
" }, "knobs": [ "--b-gap", "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-asc", "is-desc", "is-loading", "is-pressed", "is-selected" ] }, { "id": "icon-library", "title": "Library", "category": "icons", "url": "https://ui.barua.tz/docs/icons.html#icon-library", "summary": "Fifty-nine core glyphs. Click to copy the SVG \u2014 paste it inline and add .b-icon . New icons must keep the grid, stroke and naming conventions; propose them here before using them in product.", "classes": [ "b-icon" ], "markup": "" } ] }, { "id": "layout", "title": "Layout \u2014 stacks, grids, containers, stage, scroll areas", "url": "https://ui.barua.tz/docs/layout.html", "components": [ { "id": "container", "title": "Container", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#container", "summary": ".b-container centers content and clamps its width \u2014 the default cap is --b-container-lg (64rem). Size variants swap the cap; --fluid removes it. Wider variants clamp to this page's width here, which is exactly what they'd do on a narrow viewport.", "classes": [ "b-card__body", "b-container", "b-container--fluid", "b-container--md", "b-container--sm", "b-container--xl" ], "markup": "
\n
--sm \u00b7 40rem
\n
\n
\n
--md \u00b7 48rem
\n
\n
\n
default \u00b7 64rem
\n
\n
\n
--xl \u00b7 80rem
\n
\n
\n
--fluid \u00b7 no cap
\n
", "react": { "import": "import { CardBody, Container } from \"barua-ui\";", "components": [ "CardBody", "Container" ], "root": "Container", "jsx": "\n \n --sm \u00b7 40rem\n \n\n\n \n --md \u00b7 48rem\n \n\n\n \n default \u00b7 64rem\n \n\n\n \n --xl \u00b7 80rem\n \n\n\n \n --fluid \u00b7 no cap\n \n" }, "knobs": [ "--b-billboard-h" ] }, { "id": "stack", "title": "Stack (VStack)", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#stack", "summary": ".b-stack (alias .b-vstack ) is a vertical flex column with a token gap \u2014 the default building block for any view. Tune spacing with the gap scale \u2014 .b-gap-0 , .b-gap-1 , .b-gap-2 , .b-gap-3 , .b-gap-4 , .b-gap-6 , .b-gap-8 \u2014 instead of margins on children.", "classes": [ "b-card__body", "b-gap-2", "b-grid", "b-grid--3", "b-stack", "b-stack--center", "b-stack--end", "b-stack--start" ], "markup": "
\n
1
\n
2
\n
3
\n
", "react": { "import": "import { CardBody } from \"barua-ui\";", "components": [ "CardBody" ], "root": "CardBody", "jsx": "
\n \n 1\n \n \n 2\n \n \n 3\n \n
" }, "variants": [ { "id": "stack-alignment", "title": "Alignment" } ], "knobs": [ "--b-col-min", "--b-cols", "--b-gap" ] }, { "id": "hstack", "title": "HStack", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#hstack", "summary": ".b-hstack lays children out in a row, vertically centered. The alignment modifiers are shared with Stack \u2014 add .b-stack--between to spread children across the row.", "classes": [ "b-badge", "b-badge--accent", "b-btn", "b-btn--sm", "b-btn--tinted", "b-card__body", "b-gap-2", "b-headline", "b-hstack", "b-spacer", "b-stack--between" ], "markup": "
\n
1
\n
2
\n
3
\n
\n
\n
1
\n
2
\n
3
\n
", "react": { "import": "import { CardBody } from \"barua-ui\";", "components": [ "CardBody" ], "root": "CardBody", "jsx": "
\n \n 1\n \n \n 2\n \n \n 3\n \n
\n
\n \n 1\n \n \n 2\n \n \n 3\n \n
" }, "variants": [ { "id": "hstack-spacer", "title": "Title + Spacer + action" } ], "knobs": [ "--b-gap", "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "grid", "title": "Grid", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#grid", "summary": ".b-grid is a 12-column grid by default: set --b-cols (or a .b-grid--2/3/4/6 preset) and place children with .b-col-span-* classes.", "classes": [ "b-card__body", "b-col-span-4", "b-col-span-6", "b-col-span-full", "b-grid", "b-grid--auto" ], "markup": "
\n
span 4
\n
span 4
\n
span 4
\n
span 6
\n
span 6
\n
span full
\n
", "react": { "import": "import { CardBody, Grid } from \"barua-ui\";", "components": [ "CardBody", "Grid" ], "root": "Grid", "jsx": "\n \n span 4\n \n \n span 4\n \n \n span 4\n \n \n span 6\n \n \n span 6\n \n \n span full\n \n" }, "variants": [ { "id": "grid-auto", "title": "Auto-fit" } ], "knobs": [ "--b-col-min", "--b-cols", "--b-gap" ] }, { "id": "flex", "title": "Flex", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#flex", "summary": "A thin display: flex shorthand for when a stack is too opinionated. --center and --between handle both axes; .b-grow and .b-shrink-0 tune individual children.", "classes": [ "b-card__body", "b-flex", "b-flex--between", "b-grow", "b-shrink-0" ], "markup": "
\n
--between
\n
--between
\n
--between
\n
\n
\n
fixed
\n
b-grow
\n
fixed
\n
", "react": { "import": "import { CardBody, Grow } from \"barua-ui\";", "components": [ "CardBody", "Grow" ], "root": "CardBody", "jsx": "
\n \n --between\n \n \n --between\n \n \n --between\n \n
\n
\n \n fixed\n \n \n b-grow\n \n \n fixed\n \n
" }, "knobs": [ "--b-gap" ] }, { "id": "split-view", "title": "Split View", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#split-view", "summary": "Master\u2013detail in one line of markup: .b-split stretches .b-panel children to equal height with a .b-resize-handle between them. Make the sidebar .b-resizable and dragging is native CSS resize \u2014 no JavaScript.", "classes": [ "b-card__body", "b-grow", "b-panel", "b-resizable", "b-resize-handle", "b-split" ], "markup": "
\n
\n
Sidebar
\n
\n
\n
\n
Detail
\n
\n
", "react": { "import": "import { CardBody, Grow, Resizable, ResizeHandle, Split } from \"barua-ui\";", "components": [ "CardBody", "Grow", "Resizable", "ResizeHandle", "Split" ], "root": "Split", "jsx": "\n \n Sidebar\n \n \n \n Detail\n \n" }, "knobs": [ "--b-lg-border", "--b-lg-pane" ], "states": [ "is-active" ] }, { "id": "resizable-panel", "title": "Resizable Panel", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#resizable-panel", "summary": ".b-resizable adds the browser's native resize grip to any panel \u2014 horizontal by default, --vertical for height. Look for the grip in the bottom-trailing corner; min and max bounds are built in.", "classes": [ "b-card__body", "b-panel", "b-resizable", "b-resizable--vertical" ], "markup": "
\n
Drag my corner \u2192
\n
\n
\n
Drag me taller \u2193
\n
", "react": { "import": "import { CardBody, Resizable } from \"barua-ui\";", "components": [ "CardBody", "Resizable" ], "root": "Resizable", "jsx": "\n Drag my corner \u2192\n\n\n Drag me taller \u2193\n" }, "knobs": [ "--b-lg-border", "--b-lg-pane" ] }, { "id": "panel", "title": "Panel", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#panel", "summary": ".b-panel is the plain workhorse surface: surface background, hairline border, large radius. --plain strips the chrome for panels that only exist to scroll or resize.", "classes": [ "b-card__body", "b-grid", "b-grid--2", "b-panel", "b-panel--plain" ], "markup": "
\n
\n
b-panel
\n
\n
\n
b-panel--plain
\n
\n
", "react": { "import": "import { CardBody, Grid } from \"barua-ui\";", "components": [ "CardBody", "Grid" ], "root": "Grid", "jsx": "\n
\n b-panel\n
\n
\n b-panel--plain\n
\n" }, "knobs": [ "--b-col-min", "--b-cols", "--b-gap", "--b-lg-border", "--b-lg-pane" ] }, { "id": "section", "title": "Section", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#section", "summary": ".b-section adds generous block padding between page regions \u2014 the vertical rhythm of a landing or settings page. --tight is the compact cut. Dividers shown here only to make the padding visible.", "classes": [ "b-card__body", "b-divider", "b-section", "b-section--tight" ], "markup": "
\n
\n
\n
b-section--tight
\n
\n
\n
\n
b-section
\n
\n
\n
", "react": { "import": "import { CardBody, Divider, Section } from \"barua-ui\";", "components": [ "CardBody", "Divider", "Section" ], "root": "CardBody", "jsx": "
\n \n
\n \n b-section--tight\n \n
\n \n
\n \n b-section\n \n
\n \n
" } }, { "id": "card-grid", "title": "Card Grid", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#card-grid", "summary": "A responsive shelf of cards: auto-fill columns at least 17rem wide, token gap, no breakpoints. The default answer for dashboards and galleries.", "classes": [ "b-card", "b-card-grid", "b-card__body", "b-card__subtitle", "b-card__title" ], "markup": "
\n
\n
\n
Reports
\n
Weekly digest
\n
\n
\n
\n
\n
Automations
\n
4 running
\n
\n
\n
\n
\n
Contacts
\n
1,208 people
\n
\n
\n
\n
\n
Billing
\n
Paid until March
\n
\n
\n
", "react": { "import": "import { Card, CardBody, CardGrid, CardSubtitle, CardTitle } from \"barua-ui\";", "components": [ "Card", "CardBody", "CardGrid", "CardSubtitle", "CardTitle" ], "root": "CardGrid", "jsx": "\n \n \n Reports\n Weekly digest\n \n \n \n \n Automations\n 4 running\n \n \n \n \n Contacts\n 1,208 people\n \n \n \n \n Billing\n Paid until March\n \n \n" }, "knobs": [ "--b-lg-border", "--b-lg-pane" ] }, { "id": "masonry", "title": "Masonry", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#masonry", "summary": "CSS-columns masonry for content of uneven height \u2014 pins, notes, image cards. Items flow down each column in source order; cap the column count with --b-masonry-cols .", "classes": [ "b-card", "b-card__body", "b-masonry" ], "markup": "
\n
\n
1
\n
\n
\n
2
\n
\n
\n
3
\n
\n
\n
4
\n
\n
\n
5
\n
\n
\n
6
\n
\n
", "react": { "import": "import { Card, CardBody } from \"barua-ui\";", "components": [ "Card", "CardBody" ], "root": "Card", "jsx": "
\n \n 1\n \n \n 2\n \n \n 3\n \n \n 4\n \n \n 5\n \n \n 6\n \n
" }, "knobs": [ "--b-lg-border", "--b-lg-pane", "--b-masonry-cols" ] }, { "id": "scroll-area", "title": "Scroll Area", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#scroll-area", "summary": "Give it a height and .b-scroll-area contains the scrolling: overscroll never leaks to the page and the scrollbar gutter stays stable. --fade masks both edges so clipped content looks intentional.", "classes": [ "b-card__body", "b-gap-2", "b-grid", "b-grid--2", "b-scroll-area", "b-scroll-area--fade", "b-stack" ], "markup": "
\n
\n
\n
Row 1
\n
Row 2
\n
Row 3
\n
Row 4
\n
Row 5
\n
Row 6
\n
\n
\n
\n
\n \n
\n \n Row 1\n \n \n Row 2\n \n \n Row 3\n \n \n Row 4\n \n \n Row 5\n \n \n Row 6\n \n
\n \n \n" }, "knobs": [ "--b-col-min", "--b-cols", "--b-gap" ] }, { "id": "spacer", "title": "Spacer", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#spacer", "summary": "Straight from SwiftUI: .b-spacer is an empty flex-1 element that absorbs leftover space. Push row siblings apart, or pin a footer to the bottom of a fixed-height stack.", "classes": [ "b-card__body", "b-hstack", "b-spacer", "b-stack" ], "markup": "
\n
Leading
\n \n
Trailing
\n
\n
\n
Content
\n \n
Pinned footer
\n
", "react": { "import": "import { CardBody, Spacer } from \"barua-ui\";", "components": [ "CardBody", "Spacer" ], "root": "CardBody", "jsx": "
\n \n Leading\n \n \n \n Trailing\n \n
\n
\n \n Content\n \n \n \n Pinned footer\n \n
" }, "knobs": [ "--b-gap" ] }, { "id": "divider", "title": "Divider", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#divider", "summary": "Hairline separators drawn with --b-separator . Horizontal by default; use them sparingly \u2014 a stack gap is often separation enough.", "classes": [ "b-avatar", "b-avatar--sm", "b-body", "b-btn", "b-btn--primary", "b-divider", "b-divider--inset", "b-divider--label", "b-divider--vertical", "b-gap-3", "b-hstack", "b-link", "b-link--danger", "b-list", "b-list-item", "b-list-item__content", "b-list-item__subtitle", "b-list-item__title", "b-stack" ], "markup": "
\n

Above the fold

\n
\n

Below the fold

\n
", "react": { "import": "import { Divider } from \"barua-ui\";", "components": [ "Divider" ], "root": "Divider", "jsx": "
\n

Above the fold

\n \n

Below the fold

\n
" }, "variants": [ { "id": "divider-vertical", "title": "Vertical" }, { "id": "divider-inset", "title": "Inset" }, { "id": "divider-label", "title": "Label" } ], "knobs": [ "--b-avatar-size", "--b-gap", "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed", "is-selected" ] }, { "id": "responsive", "title": "Responsive", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#responsive", "summary": "Barua is mobile-first and the components own their own shrinking \u2014 pages should not need bespoke media queries. .b-dashboard spans collapse to full width below md (768px) and the column grid engages above it. Floating surfaces clamp themselves to the viewport: toasts, notifications, menus and the command palette cap their width, and the dock tray scrolls when crowded. The breakpoint scale lives in Foundations ; when a component should respond to its box rather than the viewport, use container queries below.", "classes": [ "b-badge", "b-badge--accent", "b-btn", "b-btn--glass", "b-btn--primary", "b-btn--sm", "b-gap-2", "b-hide-desktop", "b-hide-mobile", "b-hstack", "b-spacer", "b-stack--wrap" ], "markup": "
\n Inbox\n Sent\n Archive\n \n \n \n
", "react": { "import": "import { Badge, Button, Spacer } from \"barua-ui\";", "components": [ "Badge", "Button", "Spacer" ], "root": "Badge", "jsx": "\n Inbox\n Sent\n Archive\n \n \n \n
" }, "variants": [ { "id": "responsive-wrap", "title": "Wrapping toolbars" }, { "id": "responsive-visibility", "title": "Visibility utilities" } ], "knobs": [ "--b-gap", "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "stage", "title": "Stage", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#stage", "summary": ".b-stage turns a page into a fixed screen: full viewport height, no scrolling \u2014 the layout for ambient walls, kiosks and TV-style surfaces where everything must be visible at once. Its .b-container child stretches, a .b-dashboard inside shares the remaining height between rows, and cards clip internally instead of growing the page. Below md it steps aside and the page scrolls like any phone screen. The ambient example is built on it.", "classes": [ "b-card", "b-card--compact", "b-card__body", "b-card__header", "b-card__title", "b-container", "b-dashboard", "b-gap-3", "b-span-6", "b-stack", "b-stage" ], "markup": "
\n
\n
\n
\n
Fits
\n
Rows share the stage height.
\n
\n
\n
Clips
\n
Overflowing content clips inside the card \u2014 the page never scrolls.
\n
\n
\n
\n
", "react": { "import": "import { Card, CardBody, CardHeader, CardTitle, Container, Dashboard, Stage } from \"barua-ui\";", "components": [ "Card", "CardBody", "CardHeader", "CardTitle", "Container", "Dashboard", "Stage" ], "root": "Stage", "jsx": "\n \n \n \n \n Fits\n \n Rows share the stage height.\n \n \n \n Clips\n \n Overflowing content clips inside the card \u2014 the page never scrolls.\n \n \n \n" }, "knobs": [ "--b-billboard-h", "--b-gap", "--b-lg-border", "--b-lg-pane" ] }, { "id": "container-queries", "title": "Container Queries", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#container-queries", "summary": "SwiftUI's ViewThatFits , the CSS way: mark a wrapper .b-cq and children respond to the container's width \u2014 .b-cq-show-sm/md/lg appear at \u226524/40/56rem, .b-cq-hide-* retire. The same component adapts in a sidebar and in a full-width main without media queries.", "classes": [ "b-card", "b-card__body", "b-cq", "b-cq-hide-sm", "b-cq-show-sm", "b-footnote", "b-text-secondary" ], "markup": "
\n
\n Narrow container \u2192 compact\n Wide container content\n
\n
\n
\n
\n Narrow container \u2192 compact\n Wide container content \u2014 this card is past the 24rem detent, so the fuller layout renders.\n
\n
", "react": { "import": "import { Card, CardBody, Footnote } from \"barua-ui\";", "components": [ "Card", "CardBody", "Footnote" ], "root": "Card", "jsx": "\n \n Narrow container \u2192 compact\n Wide container content\n \n\n\n \n Narrow container \u2192 compact\n Wide container content \u2014 this card is past the 24rem detent, so the fuller layout renders.\n \n" }, "knobs": [ "--b-lg-border", "--b-lg-pane" ] }, { "id": "fit-text", "title": "Text that fits", "category": "layout", "url": "https://ui.barua.tz/docs/layout.html#fit-text", "summary": "SwiftUI has minimumScaleFactor ; CSS has no direct equivalent, but a container query unit does the same job honestly. .b-fit-text sizes its child as a fraction of the container's width, clamped so it can never become unreadable at one end or absurd at the other.", "classes": [ "b-fit-text", "b-gap-3", "b-stack", "b-stat__value" ], "markup": "
\n
TZS 4,208,500
\n
TZS 4,208,500
\n
TZS 4,208,500
\n
", "react": { "import": "import { FitText } from \"barua-ui\";", "components": [ "FitText" ], "root": "FitText", "jsx": "
\n \n
TZS 4,208,500
\n \n \n
TZS 4,208,500
\n \n \n
TZS 4,208,500
\n \n
" }, "knobs": [ "--b-fit-max", "--b-fit-min", "--b-fit-scale", "--b-gap" ] } ] }, { "id": "actions", "title": "Actions \u2014 buttons, icon buttons, toolbars, links", "url": "https://ui.barua.tz/docs/actions.html", "components": [ { "id": "button", "title": "Button", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#button", "summary": "The workhorse. Default is a neutral filled button; add .b-btn--primary for the main action of a view \u2014 aim for one primary per view, like Apple does.", "classes": [ "b-btn", "b-btn--block", "b-btn--danger", "b-btn--danger-tinted", "b-btn--ghost", "b-btn--glass", "b-btn--lg", "b-btn--liquid", "b-btn--outline", "b-btn--pill", "b-btn--primary", "b-btn--sm", "b-btn--tinted", "b-btn--xl", "b-btn--xs" ], "markup": "\n\n\n\n\n\n\n\n", "react": { "import": "import { Button } from \"barua-ui\";", "components": [ "Button" ], "root": "Button", "jsx": "\n\n\n\n\n\n\n\n" }, "variants": [ { "id": "button-sizes", "title": "Sizes" }, { "id": "button-states", "title": "States" } ], "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "icon-button", "title": "Icon Button", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#icon-button", "summary": "Square variant for icon-only actions. Always provide aria-label ; add .b-tooltip-host with data-tooltip for a hover hint.", "classes": [ "b-btn", "b-btn--danger-tinted", "b-btn--ghost", "b-btn--primary", "b-btn--sm", "b-icon-btn", "b-tooltip-host" ], "markup": "\n\n\n", "react": { "import": "import { Button, Tooltip } from \"barua-ui\";", "components": [ "Button", "Tooltip" ], "root": "Button", "jsx": "\n\n\n \n \n \n \n \n\n" }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "fab", "title": "Floating Action Button", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#fab", "summary": ".b-fab pins to the bottom-trailing corner with safe-area padding and an accent glow. Shown here inline with position: static for the demo.", "classes": [ "b-btn", "b-fab", "b-fab--extended", "b-icon-btn" ], "markup": "\n", "react": { "import": "import { Fab } from \"barua-ui\";", "components": [ "Fab" ], "root": "Fab", "jsx": "\n \n \n \n\n\n \n \n \n Compose\n" }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "button-group", "title": "Button Group", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#button-group", "summary": "Related actions fused into one control. Use .b-btn-group--attached for a hairline between segments.", "classes": [ "b-btn", "b-btn--outline", "b-btn-group", "b-btn-group--attached" ], "markup": "
\n \n \n \n
\n
\n \n \n \n
", "react": { "import": "import { Button, ButtonGroup } from \"barua-ui\";", "components": [ "Button", "ButtonGroup" ], "root": "ButtonGroup", "jsx": "\n \n \n \n\n\n \n \n \n" }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "split-button", "title": "Split Button", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#split-button", "summary": "Primary action plus a chevron that opens related choices.", "classes": [ "b-btn", "b-btn--primary", "b-dropdown", "b-menu", "b-menu__item", "b-split-btn" ], "markup": "
\n \n \n Merge branch\n \n \n \n \n \n
    \n
    • \n
    • \n
    • \n
\n
", "react": { "import": "import { Button, Dropdown, Menu, SplitButton } from \"barua-ui\";", "components": [ "Button", "Dropdown", "Menu", "SplitButton" ], "root": "Dropdown", "jsx": "\n \n \n \n \n \n \n \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n     \n    " }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-disabled", "is-loading", "is-pressed" ] }, { "id": "toggle-button", "title": "Toggle Button", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#toggle-button", "summary": "A button with on/off state. Reflect state with aria-pressed ; the accent tint appears automatically.", "classes": [ "b-btn", "b-icon-btn", "b-toggle-btn" ], "markup": "\n\n", "react": { "import": "import { ToggleButton } from \"barua-ui\";", "components": [ "ToggleButton" ], "root": "ToggleButton", "jsx": "\n \n \n \n \n Watching\n\n\n B\n\n\n I\n" }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "link", "title": "Link", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#link", "summary": "Inline navigation. Plain elements are accent colored by default; .b-link adds icon alignment and muted/danger variants.", "classes": [ "b-link", "b-link--danger", "b-link--muted" ], "markup": "View documentation\n \n\nSecondary link\nRemove account", "react": { "import": "import { Link } from \"barua-ui\";", "components": [ "Link" ], "root": "Link", "jsx": "\n View documentation\n \n \n \n\nSecondary link\nRemove account" } }, { "id": "link-group", "title": "Link Group", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#link-group", "summary": "A wrapping row of related links, optionally dot-separated.", "classes": [ "b-link", "b-link--muted", "b-link-group" ], "markup": "", "react": { "import": "import { Link, LinkGroup } from \"barua-ui\";", "components": [ "Link", "LinkGroup" ], "root": "LinkGroup", "jsx": "\n Privacy\n Terms\n Status\n Contact\n" } }, { "id": "toolbar", "title": "Toolbar", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#toolbar", "summary": "Compact strip of small controls with hairline dividers. Add .b-toolbar--glass when it floats above content.", "classes": [ "b-btn", "b-btn--ghost", "b-btn--sm", "b-btn--tinted", "b-divider", "b-divider--vertical", "b-icon-btn", "b-toolbar", "b-toolbar--glass" ], "markup": "
    \n \n \n \n
    \n \n \n
    \n \n
    ", "react": { "import": "import { Button, Divider, Toolbar } from \"barua-ui\";", "components": [ "Button", "Divider", "Toolbar" ], "root": "Toolbar", "jsx": "\n \n \n \n \n \n \n \n \n" }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "action-menu", "title": "Action Menu", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#action-menu", "summary": "An icon button opening a .b-menu . Uses
    for a zero-JS dropdown \u2014 see Navigation for the full menu family.", "classes": [ "b-btn", "b-dropdown", "b-icon-btn", "b-menu", "b-menu__item", "b-menu__item--danger", "b-menu__separator", "b-menu__shortcut" ], "markup": "
    \n \n \n \n
      \n
      • \n
      • \n
      • \n
      • \n
      • \n
    \n
    ", "react": { "import": "import { Button, Dropdown, Menu, MenuSeparator } from \"barua-ui\";", "components": [ "Button", "Dropdown", "Menu", "MenuSeparator" ], "root": "Dropdown", "jsx": "\n \n \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n     \n    " }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-disabled", "is-loading", "is-pressed" ] }, { "id": "share", "title": "Share", "category": "actions", "url": "https://ui.barua.tz/docs/actions.html#share", "summary": "SwiftUI's ShareLink : any button with data-b-share opens the system share sheet ( navigator.share ), falling back to copying the link with a confirming toast. Pass a URL in the attribute or leave it empty to share the current page.", "classes": [ "b-btn", "b-share" ], "markup": "", "react": { "import": "import { Share } from \"barua-ui\";", "components": [ "Share" ], "root": "Share", "jsx": "\n \n \n \n Share\n" }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] } ] }, { "id": "navigation", "title": "Navigation \u2014 bars, sidebars, tabs, menus, command palette", "url": "https://ui.barua.tz/docs/navigation.html", "components": [ { "id": "top-navigation", "title": "Top Navigation", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#top-navigation", "summary": ".b-topnav is the sticky glass chrome bar you are looking at right now \u2014 brand, inline links, and trailing actions separated by a .b-spacer . Reach for it on marketing pages and docs with a handful of destinations; move to a sidebar or rail once the map outgrows one row. Demoed with position: static so it stays in the box.", "classes": [ "b-btn", "b-btn--ghost", "b-btn--primary", "b-btn--sm", "b-spacer", "b-topnav", "b-topnav__brand", "b-topnav__link", "b-topnav__links" ], "markup": "
    \n \n \n Acme\n \n \n \n \n \n
    ", "react": { "import": "import { Button, Spacer, TopNav, TopNavBrand, TopNavLinks } from \"barua-ui\";", "components": [ "Button", "Spacer", "TopNav", "TopNavBrand", "TopNavLinks" ], "root": "TopNav", "jsx": "\n \n \n \n \n \n Acme\n \n \n \n Overview\n \n Projects\n Activity\n Docs\n \n \n \n \n" }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed", "is-scrolled" ] }, { "id": "sidebar", "title": "Sidebar", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#sidebar", "summary": ".b-sidebar stacks grouped items with uppercase headings \u2014 the pattern for apps with many destinations (this docs site uses one). Items take an optional icon and a trailing .b-badge for counts; add .b-sidebar--surface when it needs its own background and end hairline. Boxed here at a fixed height to show the built-in scroll.", "classes": [ "b-badge", "b-badge--accent", "b-sidebar", "b-sidebar__group", "b-sidebar__heading", "b-sidebar__item" ], "markup": "
    \n
    " }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane" ], "states": [ "is-active", "is-asc", "is-desc", "is-selected" ] }, { "id": "breadcrumbs", "title": "Breadcrumbs", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#breadcrumbs", "summary": "A trail from root to here, separated by hairline chevrons. Use them in hierarchies deeper than two levels; the last crumb is the current page \u2014 give it aria-current=\"page\" and no link.", "classes": [ "b-breadcrumbs" ], "markup": "", "react": { "import": "import { Breadcrumbs } from \"barua-ui\";", "components": [ "Breadcrumbs" ], "root": "Breadcrumbs", "jsx": "" }, "knobs": [ "--b-lg-border", "--b-lg-pane" ] }, { "id": "pagination", "title": "Pagination", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#pagination", "summary": "Numbered page controls with tabular figures so widths never jitter. The current page fills accent via .is-active or [aria-current=\"page\"] ; collapse long runs with .b-pagination__ellipsis .", "classes": [ "b-pagination", "b-pagination__ellipsis", "b-pagination__item" ], "markup": "", "react": { "import": "import { Pagination, PaginationEllipsis, PaginationItem } from \"barua-ui\";", "components": [ "Pagination", "PaginationEllipsis", "PaginationItem" ], "root": "Pagination", "jsx": "" }, "knobs": [ "--b-lg-inset" ], "states": [ "is-active" ] }, { "id": "stepper", "title": "Stepper", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#stepper", "summary": ".b-steps shows progress through a linear flow. Each li carries its number in data-step ; .is-complete swaps it for an accent checkmark and fills the connector, .is-active rings the current step. Keep labels to one or two words.", "classes": [ "b-steps" ], "markup": "
      \n
    1. Account
      2. \n
    2. Shipping
      3. \n
    3. Payment
      4. \n
    4. Review
      5. \n
    ", "react": { "import": "import { Steps } from \"barua-ui\";", "components": [ "Steps" ], "root": "Steps", "jsx": "\n
  • Account
    • \n
  • Shipping
    • \n
  • Payment
    • \n
  • Review
    • \n    " }, "states": [ "is-active", "is-complete" ] }, { "id": "menu-bar", "title": "Menu Bar", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#menu-bar", "summary": ".b-menubar is the desktop-app strip of menu titles. Hover, .is-active and [aria-expanded=\"true\"] all paint the solid accent highlight, so an open dropdown keeps its title lit. Pair each title with a dropdown menu for the real thing.", "classes": [ "b-menubar", "b-menubar__item" ], "markup": "
    \n \n \n \n \n \n
    ", "react": { "import": "import { MenuBar, MenuBarItem } from \"barua-ui\";", "components": [ "MenuBar", "MenuBarItem" ], "root": "MenuBar", "jsx": "\n File\n Edit\n View\n Window\n Help\n" }, "knobs": [ "--b-lg-border", "--b-lg-pane" ], "states": [ "is-active" ] }, { "id": "dropdown-menu", "title": "Dropdown Menu", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#dropdown-menu", "summary": "details.b-dropdown opens a glass .b-menu with zero JavaScript. Menus compose from items with optional .b-menu__shortcut hints, a .b-menu__label , hairline .b-menu__separator s, disabled items, and a .b-menu__item--danger kept last. Add .b-dropdown--end to right-align the panel.", "classes": [ "b-btn", "b-dropdown", "b-menu", "b-menu__item", "b-menu__item--danger", "b-menu__label", "b-menu__separator", "b-menu__shortcut" ], "markup": "
    \n \n Options\n \n \n
      \n
    • Repository
      • \n
      • \n
      • \n
      • \n
      • \n
      • \n
    \n
    ", "react": { "import": "import { Button, Dropdown, Menu, MenuLabel, MenuSeparator } from \"barua-ui\";", "components": [ "Button", "Dropdown", "Menu", "MenuLabel", "MenuSeparator" ], "root": "Dropdown", "jsx": "\n \n \n Repository\n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n     \n    " }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-disabled", "is-loading", "is-pressed" ] }, { "id": "context-menu", "title": "Context Menu", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#context-menu", "summary": "The same .b-menu component, summoned by right-click instead of a trigger button. In production, listen for contextmenu , show the menu with the popover attribute and position it at the pointer \u2014 the glass panel, items and states are identical. Shown here as a static instance.", "classes": [ "b-menu", "b-menu__item", "b-menu__item--danger", "b-menu__separator", "b-menu__shortcut" ], "markup": "
      \n
      • \n
      • \n
      • \n
      • \n
      • \n
      • \n
    ", "react": { "import": "import { Menu, MenuSeparator } from \"barua-ui\";", "components": [ "Menu", "MenuSeparator" ], "root": "Menu", "jsx": "\n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n    " }, "knobs": [ "--b-lg-border", "--b-lg-pane" ], "states": [ "is-active", "is-disabled" ] }, { "id": "command-menu", "title": "Command Menu", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#command-menu", "summary": ".b-cmdk is the \u2318K palette: a search field over a grouped command list on heavy glass. In this docs site it lives in a \u2014 any button with data-b-cmdk=\"#id\" opens it, and barua.js binds \u2318K / Ctrl K globally (try it). Below is a static inline instance showing the anatomy.", "classes": [ "b-cmdk", "b-cmdk__footer", "b-cmdk__group-label", "b-cmdk__input", "b-cmdk__item", "b-cmdk__list" ], "markup": "
    \n \n
      \n
    • Navigate
      • \n
    • \n \n
      • \n
    • \n \n
      • \n
    • Actions
      • \n
    • \n \n
      • \n
    • \n \n \n \n Navigate\n
    • \n \n
      • \n
    • \n \n
      • \n Actions\n
    • \n \n
      • \n
    • \n \n" }, "knobs": [ "--b-lg-border" ], "states": [ "is-active" ] }, { "id": "navigation-drawer", "title": "Navigation Drawer", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#navigation-drawer", "summary": ".b-drawer slides a full-height glass panel over the page \u2014 the mobile home for a sidebar. The demo uses the native popover attribute with popovertarget buttons: top layer, light dismiss and the spring slide-in for free. Use .b-drawer--end for the trailing edge, or a opened via data-b-dialog=\"#id\" when you need a true modal with focus trapping.", "classes": [ "b-btn", "b-btn--ghost", "b-drawer", "b-drawer__body", "b-drawer__header", "b-icon-btn", "b-sidebar", "b-sidebar__group", "b-sidebar__heading", "b-sidebar__item" ], "markup": "\n", "react": { "import": "import { Button, Drawer, DrawerBody, DrawerHeader, Sidebar, SidebarGroup, SidebarHeading } from \"barua-ui\";", "components": [ "Button", "Drawer", "DrawerBody", "DrawerHeader", "Sidebar", "SidebarGroup", "SidebarHeading" ], "root": "Button", "jsx": "\n\n \n Menu\n \n \n \n \n \n \n \n \n \n Browse\n Home\n Discover\n Library\n \n \n Account\n Settings\n Sign out\n \n \n \n" }, "knobs": [ "--b-lg-border", "--b-lg-inset", "--b-lg-pane", "--b-lg-pane-strong" ], "states": [ "is-active", "is-loading", "is-pressed" ] }, { "id": "menu-submenu", "title": "Submenu", "category": "navigation", "url": "https://ui.barua.tz/docs/navigation.html#menu-submenu", "summary": "A nested flyout inside any .b-menu : wrap the item and its child menu in .b-menu__sub . The chevron is drawn for you; the flyout opens on hover or keyboard focus.", "classes": [ "b-menu", "b-menu__item", "b-menu__item--danger", "b-menu__separator", "b-menu__sub" ], "markup": "
        \n
        • \n
      • \n \n
          \n
          • \n
          • \n
          • \n
        \n
        • \n
        • \n
        • \n
      ", "react": { "import": "import { Menu, MenuSeparator } from \"barua-ui\";", "components": [ "Menu", "MenuSeparator" ], "root": "Menu", "jsx": "\n
    • \n \n
      • \n
    • \n \n \n
    • \n \n
      • \n
    • \n \n
      • \n
    • \n \n
      • \n       \n
      • \n
    • \n \n
      • \n
    • \n \n
      • \n      " }, "knobs": [ "--b-lg-border", "--b-lg-pane" ], "states": [ "is-active", "is-disabled" ] } ] }, { "id": "forms", "title": "Forms \u2014 fields, selects, switches, sliders, validation", "url": "https://ui.barua.tz/docs/forms.html", "components": [ { "id": "text-field", "title": "Text Field", "category": "forms", "url": "https://ui.barua.tz/docs/forms.html#text-field", "summary": "The anatomy: a .b-field wraps a .b-label , the .b-input and an optional .b-help line. The label is always a real