@polderlabs/bizar 7.0.2 → 8.0.0

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

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

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

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