@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/v8/ui/data/Card.tsx

@@ -0,0 +1,140 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Card — the v8 surface primitive.
+ *
+ * Variants:
+ *   - default: bordered, --surface-1 background, used for kanban cards, settings groups.
+ *   - elevated: --surface-1 background + shadow, used for popovers/dropdowns hovering over content.
+ *   - ghost:    no border, transparent background, used inside other Cards (nested).
+ *   - outlined: thicker border, --surface-0 background, used for group containers.
+ *
+ * All variants have a consistent --radius-lg corner and pad via --density-card-pad.
+ * The header / body / footer slots are conventions — pass any children you want.
+ */
+export type CardVariant = 'default' | 'elevated' | 'ghost' | 'outlined';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant;
+  /** Removes padding so the child fills the card edge-to-edge. */
+  flush?: boolean;
+  /** Adds hover lift + cursor pointer for clickable cards. */
+  interactive?: boolean;
+  children?: ReactNode;
+}
+
+const VARIANT_STYLE: Record<CardVariant, React.CSSProperties> = {
+  default: {
+    background: 'var(--surface-1)',
+    border: '1px solid var(--border)',
+    boxShadow: 'none',
+  },
+  elevated: {
+    background: 'var(--surface-1)',
+    border: '1px solid var(--border)',
+    boxShadow: 'var(--shadow-2)',
+  },
+  ghost: {
+    background: 'transparent',
+    border: '1px solid transparent',
+    boxShadow: 'none',
+  },
+  outlined: {
+    background: 'var(--surface-0)',
+    border: '1px solid var(--border)',
+    boxShadow: 'none',
+  },
+};
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {
+  const { variant = 'default', flush, interactive, className, style, ...rest } = props;
+  return (
+    <div
+      ref={ref}
+      className={cx('v8-card', `v8-card--${variant}`, interactive && 'is-interactive', className)}
+      style={{
+        borderRadius: 'var(--radius-lg)',
+        padding: flush === true ? 0 : 'var(--density-card-pad)',
+        cursor: interactive === true ? 'pointer' : undefined,
+        transition: interactive === true
+          ? 'border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out)'
+          : undefined,
+        ...VARIANT_STYLE[variant],
+        ...style,
+      }}
+      {...rest}
+    />
+  );
+});
+
+/** Card header — title row + optional actions. */
+export interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(
+  props,
+  ref,
+) {
+  const { title, description, action, className, style, ...rest } = props;
+  return (
+    <div
+      ref={ref}
+      className={cx('v8-card__header', className)}
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        gap: 'var(--space-3)',
+        marginBottom: 'var(--space-3)',
+        ...style,
+      }}
+      {...rest}
+    >
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontSize: 'var(--fs-14)', fontWeight: 600, color: 'var(--fg)' }}>{title}</div>
+        {description !== undefined && (
+          <div style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)', marginTop: 2 }}>
+            {description}
+          </div>
+        )}
+      </div>
+      {action !== undefined && <div style={{ flexShrink: 0 }}>{action}</div>}
+    </div>
+  );
+});
+
+/** Card body — main content slot. */
+export const CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function CardBody(props, ref) {
+    const { className, ...rest } = props;
+    return <div ref={ref} className={cx('v8-card__body', className)} {...rest} />;
+  },
+);
+
+/** Card footer — typically action buttons right-aligned. */
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function CardFooter(props, ref) {
+    const { className, style, ...rest } = props;
+    return (
+      <div
+        ref={ref}
+        className={cx('v8-card__footer', className)}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          gap: 'var(--space-2)',
+          marginTop: 'var(--space-3)',
+          paddingTop: 'var(--space-3)',
+          borderTop: '1px solid var(--border)',
+          ...style,
+        }}
+        {...rest}
+      />
+    );
+  },
+);

package/bizar-dash/src/web/v8/ui/data/Chip.tsx

@@ -0,0 +1,96 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { X } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Chip — filter pill with an optional remove button.
+ *
+ * Different from Badge: Badge is a status indicator (read-only).
+ * Chip is interactive — clickable for selection, removable for filters.
+ */
+
+export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Visual tone. */
+  tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
+  /** When true, render with selected styling (used for filter chips). */
+  selected?: boolean;
+  /** When provided, render a close button that invokes this handler. */
+  onRemove?: () => void;
+  children: ReactNode;
+}
+
+const TONE_BG: Record<NonNullable<ChipProps['tone']>, string> = {
+  neutral: 'var(--surface-1)',
+  info: 'color-mix(in oklch, var(--info) 14%, var(--surface-1))',
+  success: 'color-mix(in oklch, var(--success) 14%, var(--surface-1))',
+  warning: 'color-mix(in oklch, var(--warning) 14%, var(--surface-1))',
+  danger: 'color-mix(in oklch, var(--danger) 14%, var(--surface-1))',
+  accent: 'color-mix(in oklch, var(--accent) 14%, var(--surface-1))',
+};
+
+const TONE_BORDER: Record<NonNullable<ChipProps['tone']>, string> = {
+  neutral: 'var(--border)',
+  info: 'color-mix(in oklch, var(--info) 30%, var(--border))',
+  success: 'color-mix(in oklch, var(--success) 30%, var(--border))',
+  warning: 'color-mix(in oklch, var(--warning) 30%, var(--border))',
+  danger: 'color-mix(in oklch, var(--danger) 30%, var(--border))',
+  accent: 'color-mix(in oklch, var(--accent) 30%, var(--border))',
+};
+
+export const Chip = forwardRef<HTMLSpanElement, ChipProps>(function Chip(props, ref) {
+  const { tone = 'neutral', selected, onRemove, children, className, style, ...rest } = props;
+  const isInteractive = selected !== undefined || onRemove !== undefined;
+  return (
+    <span
+      ref={ref}
+      className={cx('v8-chip', `v8-chip--${tone}`, selected === true && 'is-selected', className)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--space-1)',
+        height: 24,
+        padding: '0 8px',
+        background: selected === true ? `color-mix(in oklch, var(--accent) 18%, var(--surface-1))` : TONE_BG[tone],
+        border: '1px solid',
+        borderColor: selected === true ? 'var(--accent)' : TONE_BORDER[tone],
+        borderRadius: 'var(--radius-pill)',
+        fontSize: 'var(--fs-12)',
+        fontWeight: 500,
+        color: selected === true ? 'var(--accent)' : 'var(--fg)',
+        cursor: isInteractive === true ? 'pointer' : 'default',
+        whiteSpace: 'nowrap',
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+      {onRemove !== undefined && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          aria-label="Remove"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 14,
+            height: 14,
+            marginLeft: 2,
+            marginRight: -4,
+            padding: 0,
+            background: 'transparent',
+            border: 0,
+            borderRadius: 'var(--radius-sm)',
+            color: 'var(--fg-muted)',
+            cursor: 'pointer',
+          }}
+        >
+          <X size={10} aria-hidden="true" />
+        </button>
+      )}
+    </span>
+  );
+});

package/bizar-dash/src/web/v8/ui/data/Kbd.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Kbd — keyboard key chip. Use inside Tooltips, ContextMenu shortcuts,
+ * Settings — Keyboard page, etc.
+ */
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+  /** Use on a dark surface where the default light bg won't show. */
+  inverted?: boolean;
+}
+
+export const Kbd = forwardRef<HTMLElement, KbdProps>(function Kbd(props, ref) {
+  const { children, inverted, className, style, ...rest } = props;
+  return (
+    <kbd
+      ref={ref}
+      className={cx('v8-kbd', inverted && 'is-inverted', className)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: '1.4em',
+        height: '1.4em',
+        padding: '0 6px',
+        fontFamily: 'var(--font-mono)',
+        fontSize: 'var(--fs-12)',
+        fontWeight: 500,
+        color: inverted === true ? 'var(--bg)' : 'var(--fg-muted)',
+        background: inverted === true ? 'var(--fg)' : 'var(--surface-1)',
+        border: '1px solid var(--border)',
+        borderBottomWidth: 2,
+        borderRadius: 'var(--radius-sm)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </kbd>
+  );
+});

package/bizar-dash/src/web/v8/ui/data/ProgressBar.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * ProgressBar — linear progress indicator.
+ *
+ * Use cases: Goal progress, task completion, capacity usage.
+ * For circular progress use the inline circle ring (S9) or a third-party.
+ */
+
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+  /** 0..1 (or 0..100 if `max` is 100). */
+  value: number;
+  max?: number;
+  /** Tone color for the filled portion. */
+  tone?: 'accent' | 'info' | 'success' | 'warning' | 'danger';
+  /** Render the value as a percentage label on the right. */
+  showLabel?: boolean;
+  /** Bar height in px. */
+  height?: number;
+}
+
+const TONE_BG: Record<NonNullable<ProgressBarProps['tone']>, string> = {
+  accent: 'var(--accent)',
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+};
+
+export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(function ProgressBar(
+  props,
+  ref,
+) {
+  const {
+    value,
+    max = 1,
+    tone = 'accent',
+    showLabel,
+    height = 6,
+    className,
+    style,
+    ...rest
+  } = props;
+  const pct = Math.min(100, Math.max(0, (value / max) * 100));
+  return (
+    <div
+      ref={ref}
+      className={cx('v8-progress', className)}
+      style={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--space-2)',
+        ...style,
+      }}
+      {...rest}
+    >
+      <div
+        style={{
+          flex: 1,
+          height,
+          background: 'var(--surface-2)',
+          borderRadius: 'var(--radius-pill)',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            width: `${pct}%`,
+            height: '100%',
+            background: TONE_BG[tone],
+            borderRadius: 'var(--radius-pill)',
+            transition: 'width var(--motion-base) var(--ease-out)',
+          }}
+        />
+      </div>
+      {showLabel === true && (
+        <span
+          style={{
+            fontSize: 'var(--fs-12)',
+            color: 'var(--fg-muted)',
+            fontVariantNumeric: 'tabular-nums',
+            minWidth: 32,
+            textAlign: 'right',
+          }}
+        >
+          {Math.round(pct)}%
+        </span>
+      )}
+    </div>
+  );
+});

package/bizar-dash/src/web/v8/ui/data/Sparkline.tsx

@@ -0,0 +1,98 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Sparkline — tiny inline line chart.
+ *
+ * Pure SVG so it composes inside StatTile, Table cells, Card headers
+ * without bringing in a chart library dependency.
+ */
+export interface SparklineProps extends Omit<HTMLAttributes<SVGSVGElement>, 'children'> {
+  data: readonly number[];
+  width?: number;
+  height?: number;
+  /** Stroke color (defaults to --accent). */
+  stroke?: string;
+  /** Optional fill color (defaults to a 14% mix of stroke). */
+  fill?: string;
+  /** Show the area under the line. */
+  area?: boolean;
+  /** Goal/expected value rendered as a dashed horizontal line. */
+  goal?: number;
+}
+
+export const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(function Sparkline(props, ref) {
+  const {
+    data,
+    width = 120,
+    height = 32,
+    stroke = 'var(--accent)',
+    fill,
+    area = true,
+    goal,
+    className,
+    style,
+    ...rest
+  } = props;
+
+  if (data.length < 2) {
+    return (
+      <svg
+        ref={ref}
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        className={cx('v8-sparkline', className)}
+        style={style}
+        aria-hidden="true"
+        {...rest}
+      />
+    );
+  }
+
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const pad = 2;
+  const stepX = (width - pad * 2) / (data.length - 1);
+
+  const points = data.map((v, i) => {
+    const x = pad + stepX * i;
+    const y = pad + (height - pad * 2) * (1 - (v - min) / range);
+    return { x, y };
+  });
+
+  const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+  const areaPath = area
+    ? `${linePath} L${points[points.length - 1]?.x.toFixed(1) ?? '0'},${(height - pad).toFixed(1)} L${points[0]?.x.toFixed(1) ?? '0'},${(height - pad).toFixed(1)} Z`
+    : '';
+
+  const fillColor = fill ?? `color-mix(in oklch, ${stroke} 14%, transparent)`;
+
+  return (
+    <svg
+      ref={ref}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      className={cx('v8-sparkline', className)}
+      style={style}
+      aria-hidden="true"
+      {...rest}
+    >
+      {area === true && <path d={areaPath} fill={fillColor} stroke="none" />}
+      <path d={linePath} fill="none" stroke={stroke} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+      {goal !== undefined && (
+        <line
+          x1={pad}
+          x2={width - pad}
+          y1={pad + (height - pad * 2) * (1 - (goal - min) / range)}
+          y2={pad + (height - pad * 2) * (1 - (goal - min) / range)}
+          stroke="var(--fg-subtle)"
+          strokeWidth={1}
+          strokeDasharray="2 2"
+        />
+      )}
+    </svg>
+  );
+});

package/bizar-dash/src/web/v8/ui/data/StatTile.tsx

@@ -0,0 +1,150 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { TrendingDown, TrendingUp, Minus } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * StatTile — a single KPI tile for the overview.
+ *
+ * Pattern: `[label]   [trend-icon delta]`
+ *          `[BIG value]`
+ *          `[sparkline?]`
+ *
+ * Use cases: Overview dashboard, agent detail, goal detail.
+ */
+export type StatTrend = 'up' | 'down' | 'flat';
+
+export interface StatTileProps extends HTMLAttributes<HTMLDivElement> {
+  label: ReactNode;
+  value: ReactNode;
+  /** Optional delta with trend direction (e.g. "+12%" vs last week). */
+  delta?: ReactNode;
+  trend?: StatTrend;
+  /** Optional helper text under the value. */
+  hint?: ReactNode;
+  /** Optional icon for the top-right corner. */
+  icon?: ReactNode;
+  /** Inline sparkline rendered beneath the value (use the Sparkline component). */
+  sparkline?: ReactNode;
+  /** Loading state — replaces value with skeleton. */
+  loading?: boolean;
+}
+
+const TREND_FG: Record<StatTrend, string> = {
+  up: 'var(--success)',
+  down: 'var(--danger)',
+  flat: 'var(--fg-muted)',
+};
+
+const TREND_ICON: Record<StatTrend, typeof TrendingUp> = {
+  up: TrendingUp,
+  down: TrendingDown,
+  flat: Minus,
+};
+
+export const StatTile = forwardRef<HTMLDivElement, StatTileProps>(function StatTile(props, ref) {
+  const {
+    label,
+    value,
+    delta,
+    trend,
+    hint,
+    icon,
+    sparkline,
+    loading,
+    className,
+    style,
+    ...rest
+  } = props;
+  const TrendIcon = trend !== undefined ? TREND_ICON[trend] : null;
+  return (
+    <div
+      ref={ref}
+      className={cx('v8-stat-tile', className)}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-2)',
+        padding: 'var(--space-5)',
+        background: 'var(--surface-1)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-lg)',
+        ...style,
+      }}
+      {...rest}
+    >
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 'var(--space-2)' }}>
+        <div style={{ fontSize: 'var(--fs-13)', color: 'var(--fg-muted)', fontWeight: 500 }}>
+          {label}
+        </div>
+        {icon !== undefined && (
+          <span style={{ color: 'var(--fg-subtle)', display: 'inline-flex' }}>{icon}</span>
+        )}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-2)' }}>
+        <div
+          style={{
+            fontSize: 'var(--fs-24)',
+            fontWeight: 600,
+            color: 'var(--fg)',
+            fontVariantNumeric: 'tabular-nums',
+            lineHeight: 'var(--lh-tight)',
+          }}
+        >
+          {loading === true ? '—' : value}
+        </div>
+        {(delta !== undefined || TrendIcon !== null) && (
+          <div
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 2,
+              fontSize: 'var(--fs-12)',
+              fontWeight: 500,
+              color: trend !== undefined ? TREND_FG[trend] : 'var(--fg-muted)',
+              fontVariantNumeric: 'tabular-nums',
+            }}
+          >
+            {TrendIcon !== null && <TrendIcon size={12} aria-hidden="true" />}
+            {delta}
+          </div>
+        )}
+      </div>
+      {hint !== undefined && (
+        <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-subtle)' }}>{hint}</div>
+      )}
+      {sparkline !== undefined && <div style={{ marginTop: 'var(--space-1)' }}>{sparkline}</div>}
+    </div>
+  );
+});
+
+/**
+ * StatGrid — responsive grid for StatTiles. Auto-fits 1..4 columns.
+ */
+export interface StatGridProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  /** Min tile width (default 200px). */
+  minWidth?: number;
+  cols?: 2 | 3 | 4;
+}
+
+export const StatGrid = forwardRef<HTMLDivElement, StatGridProps>(function StatGrid(props, ref) {
+  const { children, cols, minWidth = 200, className, style, ...rest } = props;
+  const gridTemplate = cols !== undefined
+    ? `repeat(${cols}, minmax(0, 1fr))`
+    : `repeat(auto-fit, minmax(${minWidth}px, 1fr))`;
+  return (
+    <div
+      ref={ref}
+      className={cx('v8-stat-grid', className)}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: gridTemplate,
+        gap: 'var(--space-3)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});