@polderlabs/bizar 6.3.0 → 7.0.1

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

@@ -0,0 +1,535 @@
+/*
+ * data.css — Styles for the Data component family (Wave 2B).
+ *
+ * One file for all 8 data components (StatTile, Sparkline, BarChart,
+ * DataTable, KeyValueList, EmptyState, LoadingState, ErrorState). Tokens
+ * come from ui/styles/tokens.css — every colour, spacing, radius and
+ * shadow below is a `var(--...)` reference. Hover/focus states use the
+ * 2px accent halo pattern established in ui/styles/globals.css.
+ */
+
+/* ============ StatTile ============ */
+
+.bd-stat-tile {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  background: var(--surface-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  transition: border-color var(--duration-fast) var(--ease-out);
+}
+
+.bd-stat-tile:hover {
+  border-color: var(--border-default);
+}
+
+.bd-stat-tile--clickable {
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+
+.bd-stat-tile--clickable:hover {
+  text-decoration: none;
+}
+
+.bd-stat-tile__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  color: var(--text-secondary);
+  background: var(--surface-2);
+  border-radius: var(--radius-md);
+  flex-shrink: 0;
+}
+
+.bd-stat-tile__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.bd-stat-tile__label {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  font-weight: var(--weight-medium);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.bd-stat-tile__value-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-1);
+}
+
+.bd-stat-tile__value {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xl);
+  font-weight: var(--weight-semibold);
+  color: var(--text-primary);
+  line-height: var(--leading-tight);
+}
+
+.bd-stat-tile__unit {
+  font-family: var(--font-mono);
+  font-size: var(--text-base);
+  color: var(--text-tertiary);
+  font-weight: var(--weight-regular);
+}
+
+.bd-stat-tile__delta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  margin-top: var(--space-1);
+}
+
+.bd-stat-tile__delta--up {
+  color: var(--success);
+}
+
+.bd-stat-tile__delta--down {
+  color: var(--danger);
+}
+
+.bd-stat-tile__skeleton {
+  height: var(--text-2xl);
+  width: 60%;
+  background: var(--surface-3);
+  border-radius: var(--radius-sm);
+  animation: bd-skeleton-shimmer 1.4s linear infinite;
+}
+
+/* ============ Sparkline ============ */
+
+.bd-sparkline {
+  display: inline-block;
+  vertical-align: middle;
+  overflow: visible;
+}
+
+.bd-sparkline__line {
+  fill: none;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.bd-sparkline__fill {
+  stroke: none;
+  opacity: 0.4;
+}
+
+/* ============ BarChart ============ */
+
+.bd-bar-chart {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.bd-bar-chart__row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-1);
+}
+
+.bd-bar-chart__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.bd-bar-chart__label {
+  font-weight: var(--weight-medium);
+  color: var(--text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.bd-bar-chart__value {
+  font-family: var(--font-mono);
+  font-weight: var(--weight-medium);
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.bd-bar-chart__track {
+  height: 8px;
+  width: 100%;
+  background: var(--surface-2);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.bd-bar-chart__bar {
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width var(--duration-normal) var(--ease-out);
+}
+
+/* ============ DataTable ============ */
+
+.bd-data-table {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  color: var(--text-primary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--surface-0);
+  overflow: hidden;
+}
+
+.bd-data-table__scroll {
+  overflow-x: auto;
+  max-height: 100%;
+}
+
+.bd-data-table__table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.bd-data-table__thead {
+  position: sticky;
+  top: 0;
+  background: var(--surface-1);
+  z-index: var(--z-sticky);
+}
+
+.bd-data-table__th {
+  text-align: left;
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border-subtle);
+  white-space: nowrap;
+  background: var(--surface-1);
+  user-select: none;
+}
+
+.bd-data-table__th--right {
+  text-align: right;
+}
+
+.bd-data-table__th--center {
+  text-align: center;
+}
+
+.bd-data-table__th--sortable {
+  cursor: pointer;
+}
+
+.bd-data-table__th--sortable:hover {
+  color: var(--text-primary);
+}
+
+.bd-data-table__sort-icon {
+  display: inline-block;
+  margin-left: var(--space-1);
+  color: var(--text-tertiary);
+}
+
+.bd-data-table__th--sorted .bd-data-table__sort-icon {
+  color: var(--accent);
+}
+
+.bd-data-table__tbody tr {
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+.bd-data-table__tbody tr:hover {
+  background: var(--surface-overlay);
+}
+
+.bd-data-table__tbody tr.bd-data-table__row--clickable {
+  cursor: pointer;
+}
+
+.bd-data-table__td {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border-subtle);
+  vertical-align: middle;
+}
+
+.bd-data-table__tr:last-child .bd-data-table__td {
+  border-bottom: 0;
+}
+
+.bd-data-table__td--right {
+  text-align: right;
+}
+
+.bd-data-table__td--center {
+  text-align: center;
+}
+
+.bd-data-table--compact .bd-data-table__td,
+.bd-data-table--compact .bd-data-table__th {
+  padding: var(--space-2) var(--space-4);
+}
+
+.bd-data-table__skeleton-row td {
+  padding: var(--space-3) var(--space-4);
+}
+
+.bd-data-table__skeleton {
+  height: 14px;
+  width: 80%;
+  background: var(--surface-2);
+  border-radius: var(--radius-sm);
+  animation: bd-skeleton-shimmer 1.4s linear infinite;
+}
+
+.bd-data-table__empty,
+.bd-data-table__loading {
+  padding: var(--space-9);
+  text-align: center;
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+}
+
+/* ============ KeyValueList ============ */
+
+.bd-kv-list {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--text-base);
+  font-family: var(--font-sans);
+}
+
+.bd-kv-list--horizontal .bd-kv-list__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-4);
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.bd-kv-list--horizontal .bd-kv-list__row:last-child {
+  border-bottom: 0;
+}
+
+.bd-kv-list__label {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
+}
+
+.bd-kv-list__value {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-primary);
+  text-align: right;
+  min-width: 0;
+}
+
+.bd-kv-list__value--mono {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  word-break: break-all;
+}
+
+.bd-kv-list--vertical .bd-kv-list__row {
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.bd-kv-list--vertical .bd-kv-list__row:last-child {
+  border-bottom: 0;
+}
+
+.bd-kv-list--vertical .bd-kv-list__label {
+  display: block;
+  margin-bottom: var(--space-1);
+}
+
+.bd-kv-list--vertical .bd-kv-list__value {
+  text-align: left;
+}
+
+.bd-kv-list__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--text-tertiary);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease-out),
+    background-color var(--duration-fast) var(--ease-out);
+}
+
+.bd-kv-list__copy:hover {
+  color: var(--text-primary);
+  background: var(--surface-2);
+}
+
+.bd-kv-list__copy:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 1px;
+}
+
+.bd-kv-list__copy--done {
+  color: var(--success);
+}
+
+/* ============ EmptyState / LoadingState / ErrorState ============ */
+
+.bd-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--space-8);
+  gap: var(--space-3);
+  color: var(--text-secondary);
+}
+
+.bd-state--inline {
+  padding: var(--space-5);
+  text-align: left;
+  align-items: flex-start;
+}
+
+.bd-state__icon {
+  color: var(--text-tertiary);
+}
+
+.bd-state__title {
+  font-size: var(--text-md);
+  font-weight: var(--weight-semibold);
+  color: var(--text-primary);
+}
+
+.bd-state__description {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  max-width: 360px;
+  line-height: var(--leading-snug);
+}
+
+.bd-state__action {
+  margin-top: var(--space-3);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  background: var(--accent);
+  color: var(--accent-fg);
+  border: 0;
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+.bd-state__action:hover {
+  background: var(--accent-hover);
+}
+
+.bd-state__action:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.bd-state__action--ghost {
+  background: transparent;
+  color: var(--text-primary);
+  border: 1px solid var(--border-default);
+}
+
+.bd-state__action--ghost:hover {
+  background: var(--surface-2);
+}
+
+.bd-state__error {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--danger);
+  background: var(--danger-subtle);
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  max-width: 480px;
+  word-break: break-word;
+  text-align: left;
+}
+
+.bd-spinner {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid var(--surface-3);
+  border-top-color: var(--accent);
+  animation: bd-spin 0.8s linear infinite;
+}
+
+.bd-spinner--inline {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.bd-state__label {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.bd-skeleton-row {
+  display: grid;
+  gap: var(--space-2);
+  width: 100%;
+}
+
+.bd-skeleton-row__bar {
+  height: 14px;
+  background: linear-gradient(
+    90deg,
+    var(--surface-2) 0%,
+    var(--surface-3) 50%,
+    var(--surface-2) 100%
+  );
+  background-size: 200% 100%;
+  border-radius: var(--radius-sm);
+  animation: bd-skeleton-shimmer 1.4s linear infinite;
+}
+
+/* ============ Animations ============ */
+
+@keyframes bd-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes bd-skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}

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

@@ -0,0 +1,31 @@
+/*
+ * index.ts — Barrel for the Data component family (Wave 2B).
+ *
+ * Imports data.css as a side-effect so consumers only need a single
+ * `import { StatTile } from '../ui/data'` to ship the styles. All 8
+ * components are exported by name + type so consumers can pick either.
+ */
+
+import './data.css';
+
+export { StatTile, type StatTileProps } from './StatTile';
+export { Sparkline, type SparklineProps } from './Sparkline';
+export {
+  BarChart,
+  type BarChartProps,
+  type BarChartDatum,
+} from './BarChart';
+export {
+  DataTable,
+  type DataTableProps,
+  type DataTableColumn,
+  type DataTableSort,
+} from './DataTable';
+export {
+  KeyValueList,
+  type KeyValueListProps,
+  type KeyValueItem,
+} from './KeyValueList';
+export { EmptyState, type EmptyStateProps } from './EmptyState';
+export { LoadingState, type LoadingStateProps } from './LoadingState';
+export { ErrorState, type ErrorStateProps } from './ErrorState';

package/bizar-dash/src/web/ui/feedback/Badge.tsx

@@ -0,0 +1,49 @@
+/*
+ * Badge.tsx — Small status label for the Bizar design system (Wave 2C).
+ *
+ * Six semantic variants (neutral / info / success / warning / danger /
+ * accent) × two sizes (sm / md). Renders inline-flex with a pill radius,
+ * 11px font, and the matching `--{variant}-subtle` background with the
+ * matching `--{variant}` text color. Stateless — no context provider, no
+ * effect — so drop one anywhere without ceremony.
+ */
+
+import type { ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type BadgeVariant =
+  | 'neutral'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'accent';
+
+export type BadgeSize = 'sm' | 'md';
+
+export type BadgeProps = {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  children: ReactNode;
+  className?: string;
+};
+
+export function Badge({
+  variant = 'neutral',
+  size = 'md',
+  children,
+  className,
+}: BadgeProps): React.JSX.Element {
+  return (
+    <span
+      className={cx(
+        'bizar-badge',
+        `bizar-badge--${variant}`,
+        `bizar-badge--${size}`,
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}