@polderlabs/bizar 7.0.2 → 8.0.0

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

@@ -1,314 +0,0 @@
-/*
- * 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

@@ -1,43 +0,0 @@
-/*
- * 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

@@ -1,56 +0,0 @@
-/*
- * 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

@@ -1,51 +0,0 @@
-/*
- * 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

@@ -1,97 +0,0 @@
-/*
- * 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

@@ -1,73 +0,0 @@
-/*
- * 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

@@ -1,39 +0,0 @@
-/*
- * 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>
-  );
-}