@polderlabs/bizar 6.3.0 → 7.0.0

package/bizar-dash/src/web/ui/feedback/feedback.css

@@ -0,0 +1,314 @@
+/*
+ * feedback.css — Styles for Bizar feedback components (Wave 2C).
+ *
+ * Ships the visual surface for Toast, Dialog, Tooltip, Badge, StatusDot,
+ * and ProgressBar. Every value references a token — no literals. Side-
+ * effect import from `ui/feedback/index.ts`. Class names are scoped
+ * under `.bizar-` so the new feedback components never collide with
+ * legacy `.toast` / `.modal` / `.spinner` rules in main.css.
+ */
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Toast
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-toast-viewport {
+  position: fixed;
+  right: var(--space-5);
+  bottom: var(--space-5);
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--space-2);
+  max-width: min(360px, calc(100vw - 32px));
+  pointer-events: none;
+}
+
+.bizar-toast {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  background: var(--surface-0);
+  color: var(--text-primary);
+  font-size: var(--text-base);
+  box-shadow: var(--shadow-overlay);
+  pointer-events: auto;
+  animation: bizar-toast-in var(--duration-normal) var(--ease-out);
+}
+
+@keyframes bizar-toast-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.bizar-toast--info    { border-left: 3px solid var(--info);    }
+.bizar-toast--success { border-left: 3px solid var(--success); }
+.bizar-toast--warning { border-left: 3px solid var(--warning); }
+.bizar-toast--error   { border-left: 3px solid var(--danger);  }
+
+.bizar-toast__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.bizar-toast--info .bizar-toast__icon    { color: var(--info); }
+.bizar-toast--success .bizar-toast__icon { color: var(--success); }
+.bizar-toast--warning .bizar-toast__icon { color: var(--warning); }
+.bizar-toast--error .bizar-toast__icon   { color: var(--danger); }
+
+.bizar-toast__message {
+  line-height: var(--leading-snug);
+  word-break: break-word;
+}
+
+.bizar-toast__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 0;
+  background: transparent;
+  color: var(--text-tertiary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.bizar-toast__close:hover {
+  background: var(--surface-overlay);
+  color: var(--text-primary);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Dialog
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-5);
+}
+
+.bizar-dialog {
+  background: var(--surface-0);
+  color: var(--text-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-overlay);
+  width: 100%;
+  max-width: 480px;
+  max-height: calc(100vh - 64px);
+  display: flex;
+  flex-direction: column;
+  outline: 0;
+  animation: bizar-dialog-in var(--duration-normal) var(--ease-out);
+}
+
+@keyframes bizar-dialog-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0)    scale(1); }
+}
+
+.bizar-dialog__header {
+  padding: var(--space-5) var(--space-6) var(--space-3);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.bizar-dialog__title {
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-tight);
+}
+
+.bizar-dialog__description {
+  margin: var(--space-1) 0 0;
+  color: var(--text-secondary);
+  font-size: var(--text-base);
+  line-height: var(--leading-snug);
+}
+
+.bizar-dialog__close {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+}
+
+.bizar-dialog__close:hover {
+  background: var(--surface-overlay);
+  color: var(--text-primary);
+}
+
+.bizar-dialog__body {
+  padding: var(--space-3) var(--space-6) var(--space-5);
+  overflow: auto;
+}
+
+.bizar-dialog__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  padding: var(--space-4) var(--space-6);
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Tooltip
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+.bizar-tooltip__popup {
+  position: absolute;
+  z-index: var(--z-tooltip);
+  padding: var(--space-2) var(--space-3);
+  background: var(--surface-3);
+  color: var(--text-primary);
+  font-size: var(--text-sm);
+  line-height: var(--leading-snug);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-tooltip);
+  white-space: nowrap;
+  pointer-events: none;
+  animation: bizar-tooltip-in var(--duration-fast) var(--ease-out);
+}
+
+@keyframes bizar-tooltip-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.bizar-tooltip__popup--top    { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
+.bizar-tooltip__popup--right  { left: calc(100% + 6px);  top: 50%;  transform: translateY(-50%); }
+.bizar-tooltip__popup--bottom { top: calc(100% + 6px);   left: 50%; transform: translateX(-50%); }
+.bizar-tooltip__popup--left   { right: calc(100% + 6px); top: 50%;  transform: translateY(-50%); }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Badge
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 2px 6px;
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-tight);
+  background: var(--surface-overlay);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.bizar-badge--sm { padding: 1px 5px; font-size: 10px; }
+.bizar-badge--md { padding: 2px 6px; }
+
+.bizar-badge--info    { background: var(--info-subtle);    color: var(--info); }
+.bizar-badge--success { background: var(--success-subtle); color: var(--success); }
+.bizar-badge--warning { background: var(--warning-subtle); color: var(--warning); }
+.bizar-badge--danger  { background: var(--danger-subtle);  color: var(--danger); }
+.bizar-badge--accent  { background: var(--accent-subtle);  color: var(--accent); }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * StatusDot
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-status-dot {
+  display: inline-block;
+  border-radius: var(--radius-full);
+  background: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.bizar-status-dot--sm { width: 6px;  height: 6px;  }
+.bizar-status-dot--md { width: 8px;  height: 8px;  }
+
+.bizar-status-dot--info    { background: var(--info); }
+.bizar-status-dot--success { background: var(--success); }
+.bizar-status-dot--warning { background: var(--warning); }
+.bizar-status-dot--danger  { background: var(--danger); }
+
+@keyframes bizar-status-dot-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.35; }
+}
+
+.bizar-status-dot--pulse {
+  animation: bizar-status-dot-pulse 2s var(--ease-in-out) infinite;
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * ProgressBar
+ * ──────────────────────────────────────────────────────────────────── */
+
+.bizar-progress {
+  width: 100%;
+  background: var(--surface-2);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  display: block;
+  position: relative;
+}
+
+.bizar-progress--sm { height: 4px; }
+.bizar-progress--md { height: 6px; }
+.bizar-progress--lg { height: 10px; }
+
+.bizar-progress__fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: var(--radius-full);
+  transition: width var(--duration-normal) var(--ease-out);
+}
+
+.bizar-progress__fill--accent  { background: var(--accent); }
+.bizar-progress__fill--neutral { background: var(--text-tertiary); }
+.bizar-progress__fill--success { background: var(--success); }
+.bizar-progress__fill--danger  { background: var(--danger); }
+
+@keyframes bizar-progress-indeterminate {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}
+
+.bizar-progress--indeterminate .bizar-progress__fill {
+  width: 25%;
+  animation: bizar-progress-indeterminate 1.4s linear infinite;
+}
+
+.bizar-progress__label {
+  display: block;
+  margin-bottom: var(--space-2);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}

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

@@ -0,0 +1,43 @@
+/*
+ * feedback/index.ts — Barrel export for the Bizar feedback components (Wave 2C).
+ *
+ * Side-effect imports ship `feedback.css` alongside the JS so consumers
+ * only need `import { ToastProvider, useToast } from '../ui/feedback'`
+ * to mount the visual surface. Exports are deliberately focused — no
+ * re-export of legacy components, no prefix collisions.
+ */
+
+import './feedback.css';
+
+export {
+  ToastProvider,
+  useToast,
+  type ToastProviderProps,
+  type ToastApi,
+  type ToastItem,
+  type ToastKind,
+} from './Toast';
+export { Dialog, type DialogProps } from './Dialog';
+export {
+  Tooltip,
+  type TooltipProps,
+  type TooltipSide,
+} from './Tooltip';
+export {
+  Badge,
+  type BadgeProps,
+  type BadgeVariant,
+  type BadgeSize,
+} from './Badge';
+export {
+  StatusDot,
+  type StatusDotProps,
+  type StatusDotVariant,
+  type StatusDotSize,
+} from './StatusDot';
+export {
+  ProgressBar,
+  type ProgressBarProps,
+  type ProgressVariant,
+  type ProgressSize,
+} from './ProgressBar';

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

@@ -0,0 +1,56 @@
+/*
+ * index.ts — Barrel export for the Bizar design system.
+ *
+ * One stop for every primitive, control, data, layout, navigation, and
+ * feedback component. Side-effect CSS imports ship every stylesheet
+ * (reset + tokens + globals) to any consumer that imports from this
+ * module graph. The legacy main.css also imports globals.css directly
+ * so non-TS code paths still get the tokens via the CSS pipeline alone.
+ *
+ * Naming collision: `layout/Sidebar` re-exports its own `NavLinkProps`
+ * (self-contained Sidebar.tsx, doesn't depend on navigation/NavLink to
+ * avoid a parallel-Wave 2 dependency cycle). We intentionally drop
+ * layout's `NavLinkProps` here and re-export `navigation/NavLink`'s
+ * canonical `NavLinkProps` instead — the two have identical shape but
+ * the navigation one is the public API.
+ */
+
+// foundation styles (side-effect)
+import './styles/reset.css';
+import './styles/tokens.css';
+import './styles/globals.css';
+
+// theme
+export { ThemeProvider, type Theme } from './theme/ThemeProvider';
+export type { ThemeContextValue } from './theme/ThemeProvider';
+export { useTheme } from './theme/useTheme';
+export * as tokens from './theme/tokens';
+
+// utils
+export { cx, type ClassValue } from './utils/cx';
+
+// primitives
+export * from './primitives';
+
+// controls
+export * from './controls';
+
+// data
+export * from './data';
+
+// navigation (must come before layout — its NavLinkProps is canonical)
+export * from './navigation';
+
+// layout (selective: drop layout's shadow NavLinkProps in favour of navigation's)
+export {
+  AppShell, type AppShellProps,
+  Sidebar, type SidebarProps, type SidebarGroup, type NavItemIcon,
+  Topbar, type TopbarProps,
+  Panel, type PanelProps, type PanelPadding, type PanelVariant,
+  PanelHeader, type PanelHeaderProps,
+  Tabs, type TabsProps, type TabDef,
+  Breadcrumbs, type BreadcrumbsProps, type BreadcrumbItem,
+} from './layout';
+
+// feedback
+export * from './feedback';

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

@@ -0,0 +1,51 @@
+/*
+ * AppShell.tsx — Outer shell layout for the Bizar design system (Wave 2C).
+ *
+ * Composes a sticky topbar above a sidebar + main content area using a CSS
+ * grid. Tokens `--layout-sidebar-width` and `--layout-topbar-height` drive
+ * the dimensions so theming/sizing changes flow through CSS only. Pass
+ * `sidebarCollapsed=true` to collapse the rail (animated width-zero via the
+ * `--collapsed` modifier). This component is additive — it does not replace
+ * the existing App.tsx shell; old layouts continue to render unchanged.
+ */
+
+import type { ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type AppShellProps = {
+  topbar?: ReactNode;
+  sidebar?: ReactNode;
+  children?: ReactNode;
+  /** When true the sidebar collapses to a 0px rail. Default false. */
+  sidebarCollapsed?: boolean;
+  /** Optional className on the outermost grid. */
+  className?: string;
+};
+
+export function AppShell({
+  topbar,
+  sidebar,
+  children,
+  sidebarCollapsed = false,
+  className,
+}: AppShellProps): React.JSX.Element {
+  return (
+    <div className={cx('bizar-app-shell', className)}>
+      {topbar && (
+        <div className="bizar-app-shell__topbar">{topbar}</div>
+      )}
+      {sidebar && !sidebarCollapsed && (
+        <aside className="bizar-app-shell__sidebar">{sidebar}</aside>
+      )}
+      {sidebar && sidebarCollapsed && (
+        <aside
+          className="bizar-app-shell__sidebar bizar-app-shell__sidebar--collapsed"
+          aria-hidden="true"
+        />
+      )}
+      <main className="bizar-app-shell__main">
+        <div className="bizar-app-shell__main-inner">{children}</div>
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,97 @@
+/*
+ * Breadcrumbs.tsx — Breadcrumb trail for the Bizar design system (Wave 2C).
+ *
+ * Renders a horizontal chain of clickable crumbs separated by a chevron.
+ * Default separator is the lucide `ChevronRight` icon (15px, muted), but
+ * callers can replace it with any ReactNode — including a custom glyph,
+ * "/", or "›". The final crumb is rendered in `--text-primary` with
+ * medium weight and is not interactive: it represents the current page.
+ * Items with `href` render as <a>; items with only `onClick` render as
+ * <button>; the current item renders as a non-interactive <span>.
+ */
+
+import type { ReactNode } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cx } from '../utils/cx';
+
+export type BreadcrumbItem = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+export type BreadcrumbsProps = {
+  items: BreadcrumbItem[];
+  separator?: ReactNode;
+  className?: string;
+};
+
+export function Breadcrumbs({
+  items,
+  separator,
+  className,
+}: BreadcrumbsProps): React.JSX.Element {
+  return (
+    <nav className={cx('bizar-breadcrumbs', className)} aria-label="Breadcrumb">
+      <ol
+        style={{
+          display: 'contents',
+          listStyle: 'none',
+          margin: 0,
+          padding: 0,
+        }}
+      >
+        {items.map((item, idx) => {
+          const isCurrent = idx === items.length - 1;
+          const sep =
+            idx < items.length - 1 ? (
+              <span className="bizar-breadcrumbs__separator" aria-hidden="true">
+                {separator ?? <ChevronRight size={15} />}
+              </span>
+            ) : null;
+
+          if (isCurrent) {
+            return (
+              <li
+                key={idx}
+                aria-current="page"
+                className="bizar-breadcrumbs__item bizar-breadcrumbs__item--current"
+              >
+                {item.label}
+                {sep}
+              </li>
+            );
+          }
+
+          if (item.href) {
+            return (
+              <li key={idx}>
+                <a
+                  href={item.href}
+                  className="bizar-breadcrumbs__item"
+                  onClick={() => item.onClick?.()}
+                >
+                  {item.label}
+                </a>
+                {sep}
+              </li>
+            );
+          }
+
+          return (
+            <li key={idx}>
+              <button
+                type="button"
+                className="bizar-breadcrumbs__item"
+                onClick={() => item.onClick?.()}
+              >
+                {item.label}
+              </button>
+              {sep}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

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

@@ -0,0 +1,73 @@
+/*
+ * Panel.tsx — Bordered card surface for the Bizar design system (Wave 2C).
+ *
+ * The workhorse container for grouped content. Renders an optional
+ * header (title + description + actions) with a hairline separator from
+ * the body, then any children inside a padded region. Two surface tones
+ * — `outlined` (default, surface-1) and `filled` (surface-2 + stronger
+ * border) — handle the two densities found across the dashboard. Padding
+ * accepts a 0..5 scale that maps to the `--space-N` tokens (default 4).
+ *
+ * The header is only rendered when at least one of `title`, `description`,
+ * `actions` is set, so an empty Panel renders just the body.
+ */
+
+import type { ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type PanelPadding = 0 | 1 | 2 | 3 | 4 | 5;
+export type PanelVariant = 'outlined' | 'filled';
+
+export type PanelProps = {
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+  padding?: PanelPadding;
+  variant?: PanelVariant;
+  className?: string;
+};
+
+export function Panel({
+  title,
+  description,
+  actions,
+  children,
+  padding = 4,
+  variant = 'outlined',
+  className,
+}: PanelProps): React.JSX.Element {
+  const hasHeader =
+    title !== undefined || description !== undefined || actions !== undefined;
+  return (
+    <section
+      className={cx(
+        'bizar-panel',
+        variant === 'filled' && 'bizar-panel--filled',
+        className,
+      )}
+    >
+      {hasHeader && (
+        <div className="bizar-panel__header">
+          {(title || description) && (
+            <div className="bizar-panel__header-text">
+              {title && <h3 className="bizar-panel__title">{title}</h3>}
+              {description && (
+                <p className="bizar-panel__description">{description}</p>
+              )}
+            </div>
+          )}
+          {actions && <div className="bizar-panel__actions">{actions}</div>}
+        </div>
+      )}
+      <div
+        className={cx(
+          'bizar-panel__body',
+          `bizar-panel__padding--${padding}`,
+        )}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,39 @@
+/*
+ * PanelHeader.tsx — Standalone header block for use inside a Panel (Wave 2C).
+ *
+ * Splits a header into three regions (text on the left, actions on the
+ * right, optional custom children prepended above all). The bottom border
+ * that separates header from body is owned by Panel; this component only
+ * renders the inner layout. Use `<Panel>` for the standard header shape
+ * — drop down to `<PanelHeader>` only when you need a non-trivial header
+ * (e.g. tab strip + filter chips stacked above the title).
+ */
+
+import type { ReactNode } from 'react';
+
+export type PanelHeaderProps = {
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+};
+
+export function PanelHeader({
+  title,
+  description,
+  actions,
+  children,
+}: PanelHeaderProps): React.JSX.Element {
+  return (
+    <div className="bizar-panel__header">
+      <div className="bizar-panel__header-text">
+        {children}
+        {title && <h3 className="bizar-panel__title">{title}</h3>}
+        {description && (
+          <p className="bizar-panel__description">{description}</p>
+        )}
+      </div>
+      {actions && <div className="bizar-panel__actions">{actions}</div>}
+    </div>
+  );
+}