@polderlabs/bizar 7.0.2 → 8.0.0

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

@@ -0,0 +1,101 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * BarList — horizontal bar list for distributions (e.g. tasks per agent,
+ * memory by category). Renders each row as a label + animated bar + value.
+ */
+
+export interface BarListItem {
+  /** Unique key for React. */
+  id: string;
+  label: ReactNode;
+  value: number;
+  /** Optional secondary text (e.g. percentage). */
+  hint?: ReactNode;
+  /** Optional leading slot (e.g. avatar, icon). */
+  leading?: ReactNode;
+  /** Override the bar color. */
+  color?: string;
+}
+
+export interface BarListProps extends HTMLAttributes<HTMLDivElement> {
+  items: readonly BarListItem[];
+  /** Show numeric values on the right (default true). */
+  showValue?: boolean;
+  /** Bar height in px (default 6). */
+  barHeight?: number;
+  /** Cap so the longest bar doesn't visually overwhelm. */
+  cap?: number;
+}
+
+export const BarList = forwardRef<HTMLDivElement, BarListProps>(function BarList(props, ref) {
+  const { items, showValue = true, barHeight = 6, cap, className, style, ...rest } = props;
+  const max = cap ?? Math.max(1, ...items.map((i) => i.value));
+
+  return (
+    <div
+      ref={ref}
+      className={cx('v8-bar-list', className)}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-3)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {items.map((item) => {
+        const pct = Math.min(100, (item.value / max) * 100);
+        return (
+          <div key={item.id} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+            {item.leading !== undefined && (
+              <span style={{ flexShrink: 0 }}>{item.leading}</span>
+            )}
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-2)', marginBottom: 4 }}>
+                <span style={{ fontSize: 'var(--fs-13)', color: 'var(--fg)', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {item.label}
+                </span>
+                {showValue === true && (
+                  <span
+                    style={{
+                      fontSize: 'var(--fs-12)',
+                      color: 'var(--fg-muted)',
+                      fontVariantNumeric: 'tabular-nums',
+                      flexShrink: 0,
+                    }}
+                  >
+                    {item.hint ?? item.value}
+                  </span>
+                )}
+              </div>
+              <div
+                style={{
+                  position: 'relative',
+                  height: barHeight,
+                  background: 'var(--surface-2)',
+                  borderRadius: 'var(--radius-pill)',
+                  overflow: 'hidden',
+                }}
+              >
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    height: '100%',
+                    width: `${pct}%`,
+                    background: item.color ?? 'var(--accent)',
+                    borderRadius: 'var(--radius-pill)',
+                    transition: 'width var(--motion-base) var(--ease-out)',
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});

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>
+  );
+});