@polderlabs/bizar 6.3.0 → 7.0.0

package/bizar-dash/src/web/ui/layout/Sidebar.tsx

@@ -0,0 +1,131 @@
+/*
+ * Sidebar.tsx — Vertical nav rail for the Bizar design system (Wave 2C).
+ *
+ * Renders grouped vertical navigation: each group is an optional label +
+ * a stack of items. Items are simple links/buttons; click an item to fire
+ * `onItemSelect(id)` and toggle the `activeId` highlight. Footer slot is
+ * pinned to the bottom of the rail and typically holds a settings link or
+ * user avatar. Self-contained — does not depend on ui/navigation primitives
+ * from sibling Wave 2 subagents, so this works regardless of dispatch order.
+ */
+
+import type { ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type NavItemIcon = React.ComponentType<{ size?: number | string }>;
+
+export type NavLinkProps = {
+  id: string;
+  label: string;
+  icon?: NavItemIcon;
+  badge?: string | number;
+  disabled?: boolean;
+  href?: string;
+  onClick?: (id: string) => void;
+};
+
+export type SidebarGroup = {
+  label?: string;
+  items: NavLinkProps[];
+};
+
+export type SidebarProps = {
+  groups: SidebarGroup[];
+  activeId?: string;
+  onItemSelect?: (id: string) => void;
+  footer?: ReactNode;
+  width?: number;
+  className?: string;
+};
+
+export function Sidebar({
+  groups,
+  activeId,
+  onItemSelect,
+  footer,
+  width,
+  className,
+}: SidebarProps): React.JSX.Element {
+  return (
+    <nav
+      className={cx('bizar-sidebar', className)}
+      style={width ? { width } : undefined}
+      aria-label="Primary"
+    >
+      <div style={{ flex: 1, minHeight: 0 }}>
+        {groups.map((group, gIdx) => (
+          <div key={gIdx} className="bizar-sidebar__group">
+            {group.label && (
+              <div className="bizar-sidebar__label">{group.label}</div>
+            )}
+            <div className="bizar-sidebar__items" role="list">
+              {group.items.map((item) => {
+                const Icon = item.icon;
+                const active = activeId === item.id;
+                const className = cx(
+                  'bizar-sidebar__item',
+                  active && 'bizar-sidebar__item--active',
+                );
+                const ariaCurrent = active ? 'page' : undefined;
+                const onClick = () => {
+                  if (item.disabled) return;
+                  item.onClick?.(item.id);
+                  onItemSelect?.(item.id);
+                };
+                if (item.href) {
+                  return (
+                    <a
+                      key={item.id}
+                      href={item.href}
+                      className={className}
+                      aria-current={ariaCurrent}
+                      aria-disabled={item.disabled || undefined}
+                      onClick={(e) => {
+                        if (item.disabled) {
+                          e.preventDefault();
+                          return;
+                        }
+                        onClick();
+                      }}
+                    >
+                      {Icon && <Icon size={16} />}
+                      <span className="bizar-sidebar__item-label">
+                        {item.label}
+                      </span>
+                      {item.badge !== undefined && (
+                        <span className="bizar-sidebar__item-badge">
+                          {item.badge}
+                        </span>
+                      )}
+                    </a>
+                  );
+                }
+                return (
+                  <button
+                    key={item.id}
+                    type="button"
+                    className={className}
+                    aria-current={ariaCurrent}
+                    disabled={item.disabled}
+                    onClick={onClick}
+                  >
+                    {Icon && <Icon size={16} />}
+                    <span className="bizar-sidebar__item-label">
+                      {item.label}
+                    </span>
+                    {item.badge !== undefined && (
+                      <span className="bizar-sidebar__item-badge">
+                        {item.badge}
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+      {footer && <div className="bizar-sidebar__footer">{footer}</div>}
+    </nav>
+  );
+}

package/bizar-dash/src/web/ui/layout/Tabs.tsx

@@ -0,0 +1,133 @@
+/*
+ * Tabs.tsx — Horizontal tab strip for the Bizar design system (Wave 2C).
+ *
+ * Two visual variants:
+ *   - `underline` (default): the active tab carries a 2px accent border
+ *     on the bottom edge, no background fill. Used in page-level
+ *     navigation where space is tight and the active state should be
+ *     unmistakable but quiet.
+ *   - `pill`: the active tab has a filled surface-3 background. Used for
+ *     tool palettes and switchers where every tab should feel clickable.
+ *
+ * Keyboard support: Left/Right arrows move the active id across non-disabled
+ * tabs (matches the WAI-ARIA Authoring Practices for the tabs pattern).
+ * Tabs use `role="tab"` + `aria-selected`; the strip carries
+ * `role="tablist"`. Disabled tabs receive the `disabled` attribute on the
+ * underlying <button> and are skipped during keyboard navigation.
+ *
+ * `aria-controls` is intentionally NOT set here — the Tabs primitive owns
+ * only the strip, not the tabpanels, so we cannot point to a real id. The
+ * component that owns both the strip and its panels should set
+ * `aria-controls` itself (or wrap this Tabs and add the attribute on the
+ * rendered buttons).
+ */
+
+import { useCallback, type KeyboardEvent } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { cx } from '../utils/cx';
+
+export type TabDef = {
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+  badge?: string | number;
+  disabled?: boolean;
+};
+
+export type TabsProps = {
+  tabs: TabDef[];
+  activeId: string;
+  onChange: (id: string) => void;
+  variant?: 'underline' | 'pill';
+  size?: 'sm' | 'md';
+  className?: string;
+};
+
+export function Tabs({
+  tabs,
+  activeId,
+  onChange,
+  variant = 'underline',
+  size = 'md',
+  className,
+}: TabsProps): React.JSX.Element {
+  const enabledIds = tabs.filter((t) => !t.disabled).map((t) => t.id);
+
+  const moveActive = useCallback(
+    (dir: 1 | -1) => {
+      if (enabledIds.length === 0) return;
+      const idx = enabledIds.indexOf(activeId);
+      // If current is not enabled, treat the "right" neighbor as the next
+      // enabled tab after the (missing) current.
+      const startIdx = idx === -1 ? -1 : idx;
+      let nextIdx = startIdx + dir;
+      if (nextIdx < 0) nextIdx = enabledIds.length - 1;
+      if (nextIdx >= enabledIds.length) nextIdx = 0;
+      const next = enabledIds[nextIdx];
+      if (next && next !== activeId) onChange(next);
+    },
+    [activeId, enabledIds, onChange],
+  );
+
+  const onKeyDown = (e: KeyboardEvent<HTMLElement>): void => {
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      moveActive(1);
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      moveActive(-1);
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      if (enabledIds[0]) onChange(enabledIds[0]);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      const last = enabledIds[enabledIds.length - 1];
+      if (last) onChange(last);
+    }
+  };
+
+  return (
+    <div
+      className={cx(
+        'bizar-tabs',
+        `bizar-tabs--${variant}`,
+        size === 'sm' && 'bizar-tabs--sm',
+        className,
+      )}
+      role="tablist"
+    >
+      {tabs.map((tab) => {
+        const Icon = tab.icon;
+        const active = tab.id === activeId;
+        const selectedRef = active;
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            aria-selected={selectedRef}
+            tabIndex={selectedRef ? 0 : -1}
+            disabled={tab.disabled}
+            className={cx(
+              'bizar-tab',
+              active && 'bizar-tab--active',
+            )}
+            onClick={() => {
+              if (tab.disabled) return;
+              onChange(tab.id);
+            }}
+            onKeyDown={(e) => {
+              if (active && !tab.disabled) onKeyDown(e);
+            }}
+          >
+            {Icon && <Icon size={14} className="bizar-tab__icon" />}
+            <span>{tab.label}</span>
+            {tab.badge !== undefined && (
+              <span className="bizar-tab__badge">{tab.badge}</span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/bizar-dash/src/web/ui/layout/Topbar.tsx

@@ -0,0 +1,42 @@
+/*
+ * Topbar.tsx — Header bar for the Bizar design system (Wave 2C).
+ *
+ * Three horizontal slots: brand (left), center (typically a search input),
+ * right (actions / notifications). Height comes from `--layout-topbar-height`
+ * (default 48px) and `sticky=true` (default) pins the bar to the top of
+ * the viewport via `position: sticky` and `--z-sticky`. Visual chrome is
+ * minimal: a single hairline border-bottom in `--border-subtle`.
+ */
+
+import type { ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type TopbarProps = {
+  brand?: ReactNode;
+  center?: ReactNode;
+  right?: ReactNode;
+  height?: number;
+  sticky?: boolean;
+  className?: string;
+};
+
+export function Topbar({
+  brand,
+  center,
+  right,
+  height,
+  sticky = true,
+  className,
+}: TopbarProps): React.JSX.Element {
+  return (
+    <header
+      className={cx('bizar-topbar', sticky && 'bizar-topbar--sticky', className)}
+      style={height ? { height } : undefined}
+      role="banner"
+    >
+      <div className="bizar-topbar__brand">{brand}</div>
+      {center && <div className="bizar-topbar__center">{center}</div>}
+      {right && <div className="bizar-topbar__right">{right}</div>}
+    </header>
+  );
+}

package/bizar-dash/src/web/ui/layout/index.ts

@@ -0,0 +1,33 @@
+/*
+ * layout/index.ts — Barrel export for the Bizar layout primitives (Wave 2C).
+ *
+ * Side-effect imports ship `layout.css` alongside the JS so consumers
+ * only need `import { Topbar, Sidebar } from '../ui/layout'` to mount
+ * the visual surface. Exports are deliberately focused — no re-export
+ * of legacy components, no prefix collisions.
+ */
+
+import './layout.css';
+
+export { AppShell, type AppShellProps } from './AppShell';
+export {
+  Sidebar,
+  type SidebarProps,
+  type SidebarGroup,
+  type NavLinkProps,
+  type NavItemIcon,
+} from './Sidebar';
+export { Topbar, type TopbarProps } from './Topbar';
+export {
+  Panel,
+  type PanelProps,
+  type PanelPadding,
+  type PanelVariant,
+} from './Panel';
+export { PanelHeader, type PanelHeaderProps } from './PanelHeader';
+export { Tabs, type TabsProps, type TabDef } from './Tabs';
+export {
+  Breadcrumbs,
+  type BreadcrumbsProps,
+  type BreadcrumbItem,
+} from './Breadcrumbs';