@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/v8/ui/controls/ToggleGroup.tsx

@@ -0,0 +1,85 @@
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import * as RxToggleGroup from '@radix-ui/react-toggle-group';
+import { cx } from '../utils/cx.js';
+
+/**
+ * ToggleGroup — group of toggle buttons with single or multi selection.
+ *
+ * Use cases:
+ *   - View switcher (Kanban / List / Calendar)
+ *   - Filter pills (status: All / Active / Done)
+ *   - Density toggle (Comfortable / Compact)
+ */
+export type ToggleGroupType = 'single' | 'multiple';
+
+export interface ToggleGroupProps
+  extends Omit<ComponentPropsWithoutRef<typeof RxToggleGroup.Root>, 'type'> {
+  type: ToggleGroupType;
+}
+
+export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(function ToggleGroup(
+  props,
+  ref,
+) {
+  const { type, className, ...rest } = props;
+  return (
+    <RxToggleGroup.Root
+      ref={ref}
+      type={type as 'single' | 'multiple'}
+      className={cx('v8-toggle-group', className)}
+      style={{
+        display: 'inline-flex',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-sm)',
+        overflow: 'hidden',
+        background: 'var(--surface-1)',
+      }}
+      {...(rest as Record<string, unknown>)}
+    />
+  );
+});
+
+export interface ToggleGroupItemProps extends ComponentPropsWithoutRef<typeof RxToggleGroup.Item> {}
+
+export const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemItemProps>(
+  function ToggleGroupItem(props, ref) {
+    const { className, children, ...rest } = props;
+    return (
+      <RxToggleGroup.Item
+        ref={ref}
+        className={cx('v8-toggle-group__item', className)}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: 28,
+          padding: '0 var(--space-3)',
+          background: 'transparent',
+          color: 'var(--fg-muted)',
+          border: 0,
+          borderRight: '1px solid var(--border)',
+          fontSize: 'var(--fs-13)',
+          cursor: 'pointer',
+          transition: 'background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out)',
+        }}
+        {...rest}
+      >
+        {children}
+        <style>{`
+          .v8-toggle-group__item:last-child { border-right: 0; }
+          .v8-toggle-group__item[data-state='on'] {
+            background: var(--accent-soft);
+            color: var(--accent);
+            font-weight: 500;
+          }
+        `}</style>
+      </RxToggleGroup.Item>
+    );
+  },
+);
+
+interface ToggleGroupItemItemProps extends ToggleGroupItemProps {}
+
+// Note: the empty interface above is intentional — we want ToggleGroupItemProps
+// to be the public API surface. The duplicate `ToggleGroupItemItemProps` keeps
+// the JSDoc happy without forcing callers to import both names.

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

@@ -0,0 +1,134 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import * as RxAccordion from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Accordion — collapsible content groups. Built on Radix for keyboard nav.
+ *
+ * Use for: Settings sections, long form grouping, FAQ-like content.
+ */
+
+export interface AccordionProps {
+  /** 'single' opens one at a time, 'multiple' allows many. */
+  type: 'single' | 'multiple';
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(props, ref) {
+  const { type, defaultValue, value, onValueChange, children, className, ...rest } = props;
+  if (type === 'single') {
+    return (
+      <RxAccordion.Root
+        ref={ref as React.Ref<HTMLDivElement>}
+        type="single"
+        collapsible
+        defaultValue={defaultValue as string | undefined}
+        value={value as string | undefined}
+        onValueChange={onValueChange as ((value: string) => void) | undefined}
+        className={cx('v8-accordion', className)}
+        {...rest}
+      >
+        {children}
+      </RxAccordion.Root>
+    );
+  }
+  return (
+    <RxAccordion.Root
+      ref={ref as React.Ref<HTMLDivElement>}
+      type="multiple"
+      defaultValue={defaultValue as string[] | undefined}
+      value={value as string[] | undefined}
+      onValueChange={onValueChange as ((value: string[]) => void) | undefined}
+      className={cx('v8-accordion', className)}
+      {...rest}
+    >
+      {children}
+    </RxAccordion.Root>
+  );
+});
+
+export interface AccordionItemProps {
+  value: string;
+  title: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(
+  props,
+  ref,
+) {
+  const { value, title, description, children, disabled, className } = props;
+  return (
+    <RxAccordion.Item
+      ref={ref}
+      value={value}
+      disabled={disabled}
+      className={cx('v8-accordion__item', className)}
+      style={{
+        borderBottom: '1px solid var(--border)',
+      }}
+    >
+      <RxAccordion.Header asChild>
+        <h3 style={{ margin: 0 }}>
+          <RxAccordion.Trigger
+            style={{
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 'var(--space-3)',
+              padding: 'var(--space-4) 0',
+              background: 'transparent',
+              border: 0,
+              cursor: disabled === true ? 'not-allowed' : 'pointer',
+              fontFamily: 'inherit',
+              fontSize: 'var(--fs-14)',
+              fontWeight: 500,
+              color: 'var(--fg)',
+              textAlign: 'left',
+            }}
+          >
+            <span style={{ flex: 1, minWidth: 0 }}>
+              <span style={{ display: 'block' }}>{title}</span>
+              {description !== undefined && (
+                <span style={{ display: 'block', fontSize: 'var(--fs-13)', color: 'var(--fg-muted)', marginTop: 2 }}>
+                  {description}
+                </span>
+              )}
+            </span>
+            <ChevronDown
+              size={16}
+              aria-hidden="true"
+              className="v8-accordion__chevron"
+              style={{
+                color: 'var(--fg-muted)',
+                flexShrink: 0,
+                transition: 'transform var(--motion-fast) var(--ease-out)',
+              }}
+            />
+            <style>{`
+              .v8-accordion__item button[data-state='open'] .v8-accordion__chevron { transform: rotate(180deg); }
+            `}</style>
+          </RxAccordion.Trigger>
+        </h3>
+      </RxAccordion.Header>
+      <RxAccordion.Content
+        style={{
+          overflow: 'hidden',
+          fontSize: 'var(--fs-13)',
+          color: 'var(--fg-muted)',
+        }}
+      >
+        <div style={{ paddingBottom: 'var(--space-4)' }}>{children}</div>
+      </RxAccordion.Content>
+    </RxAccordion.Item>
+  );
+});

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

@@ -0,0 +1,175 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Avatar — user/agent representation. Falls back to initials when no image.
+ *
+ * Sizes: xs (20) | sm (24) | md (32) | lg (40) | xl (56).
+ * Renders a <span> by default; use `asChild` to swap for a button/link.
+ */
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+  name: string;
+  src?: string;
+  size?: AvatarSize;
+  /** Override the generated initials. */
+  initials?: string;
+  /** Optional status dot (online/offline/busy). */
+  status?: 'online' | 'offline' | 'busy' | 'away';
+}
+
+const SIZE_PX: Record<AvatarSize, number> = { xs: 20, sm: 24, md: 32, lg: 40, xl: 56 };
+const SIZE_FS: Record<AvatarSize, string> = {
+  xs: 'var(--fs-12)',
+  sm: 'var(--fs-12)',
+  md: 'var(--fs-13)',
+  lg: 'var(--fs-14)',
+  xl: 'var(--fs-18)',
+};
+
+const STATUS_FG = {
+  online: 'var(--success)',
+  offline: 'var(--fg-subtle)',
+  busy: 'var(--danger)',
+  away: 'var(--warning)',
+} as const;
+
+function deriveInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0 || parts[0] === undefined) return '?';
+  if (parts.length === 1) {
+    const first = parts[0] ?? '';
+    return first.slice(0, 2).toUpperCase();
+  }
+  const first = parts[0]?.[0] ?? '';
+  const last = parts[parts.length - 1]?.[0] ?? '';
+  return `${first}${last}`.toUpperCase();
+}
+
+// Deterministic color from name — used as fallback when no image.
+function hashName(name: string): number {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) | 0;
+  return Math.abs(h);
+}
+
+const FALLBACK_PALETTE = [
+  'oklch(0.65 0.15 240)',
+  'oklch(0.65 0.15 30)',
+  'oklch(0.65 0.15 140)',
+  'oklch(0.65 0.15 320)',
+  'oklch(0.65 0.15 80)',
+  'oklch(0.65 0.15 200)',
+];
+
+export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(props, ref) {
+  const { name, src, size = 'md', initials, status, className, style, ...rest } = props;
+  const px = SIZE_PX[size];
+  const init = initials ?? deriveInitials(name);
+  const fallbackBg = FALLBACK_PALETTE[hashName(name) % FALLBACK_PALETTE.length];
+
+  return (
+    <span
+      ref={ref}
+      className={cx('v8-avatar', `v8-avatar--${size}`, className)}
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: px,
+        height: px,
+        borderRadius: 'var(--radius-pill)',
+        overflow: 'hidden',
+        background: fallbackBg,
+        color: 'white',
+        fontSize: SIZE_FS[size],
+        fontWeight: 600,
+        flexShrink: 0,
+        userSelect: 'none',
+        ...style,
+      }}
+      aria-label={name}
+      {...rest}
+    >
+      {src !== undefined ? (
+        <img
+          src={src}
+          alt=""
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        />
+      ) : (
+        init
+      )}
+      {status !== undefined && (
+        <span
+          aria-hidden="true"
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            width: Math.max(6, Math.floor(px * 0.28)),
+            height: Math.max(6, Math.floor(px * 0.28)),
+            borderRadius: 'var(--radius-pill)',
+            background: STATUS_FG[status],
+            border: '2px solid var(--surface-0)',
+          }}
+        />
+      )}
+    </span>
+  );
+});
+
+/**
+ * AvatarStack — overlapping avatars. Use for "assigned to N people" lists.
+ */
+export interface AvatarStackProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  size?: AvatarSize;
+  max?: number;
+}
+
+export const AvatarStack = forwardRef<HTMLDivElement, AvatarStackProps>(function AvatarStack(
+  props,
+  ref,
+) {
+  const { children, size = 'sm', className, style, ...rest } = props;
+  return (
+    <div
+      ref={ref}
+      className={cx('v8-avatar-stack', className)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        ...style,
+      }}
+      {...rest}
+    >
+      <StackedChildren size={size}>{children}</StackedChildren>
+    </div>
+  );
+});
+
+function StackedChildren({ children, size }: { children: ReactNode; size: AvatarSize }) {
+  const px = SIZE_PX[size];
+  return (
+    <>
+      {Array.isArray(children)
+        ? children.map((child, i) => (
+            <span
+              key={i}
+              style={{
+                marginLeft: i === 0 ? 0 : -Math.floor(px * 0.3),
+                border: '2px solid var(--surface-0)',
+                borderRadius: 'var(--radius-pill)',
+                display: 'inline-flex',
+              }}
+            >
+              {child}
+            </span>
+          ))
+        : <span style={{ border: '2px solid var(--surface-0)', borderRadius: 'var(--radius-pill)' }}>{children}</span>}
+    </>
+  );
+}

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

@@ -0,0 +1,93 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Badge — small status pill.
+ *
+ * Tones: neutral | info | success | warning | danger | accent.
+ * Sizes: sm (16px) | md (20px).
+ * Optional `dot` renders a leading colored dot.
+ */
+export type BadgeTone =
+  | 'neutral'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'accent';
+export type BadgeSize = 'sm' | 'md';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: BadgeTone;
+  size?: BadgeSize;
+  dot?: boolean;
+  children: ReactNode;
+}
+
+const TONE_FG: Record<BadgeTone, string> = {
+  neutral: 'var(--fg-muted)',
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+  accent: 'var(--accent)',
+};
+
+const TONE_BG: Record<BadgeTone, string> = {
+  neutral: 'color-mix(in oklch, var(--fg-muted) 12%, transparent)',
+  info: 'color-mix(in oklch, var(--info) 14%, transparent)',
+  success: 'color-mix(in oklch, var(--success) 14%, transparent)',
+  warning: 'color-mix(in oklch, var(--warning) 14%, transparent)',
+  danger: 'color-mix(in oklch, var(--danger) 14%, transparent)',
+  accent: 'color-mix(in oklch, var(--accent) 14%, transparent)',
+};
+
+const TONE_DOT: Record<BadgeTone, string> = {
+  neutral: 'var(--fg-muted)',
+  info: 'var(--info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--danger)',
+  accent: 'var(--accent)',
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(props, ref) {
+  const { tone = 'neutral', size = 'md', dot, children, className, style, ...rest } = props;
+  const height = size === 'sm' ? 18 : 22;
+  return (
+    <span
+      ref={ref}
+      className={cx('v8-badge', `v8-badge--${tone}`, `v8-badge--${size}`, className)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 'var(--space-1)',
+        height,
+        padding: '0 8px',
+        borderRadius: 'var(--radius-pill)',
+        background: TONE_BG[tone],
+        color: TONE_FG[tone],
+        fontSize: size === 'sm' ? 'var(--fs-12)' : 'var(--fs-13)',
+        fontWeight: 500,
+        lineHeight: 1,
+        whiteSpace: 'nowrap',
+        ...style,
+      }}
+      {...rest}
+    >
+      {dot === true && (
+        <span
+          aria-hidden="true"
+          style={{
+            width: 6,
+            height: 6,
+            borderRadius: 'var(--radius-pill)',
+            background: TONE_DOT[tone],
+            flexShrink: 0,
+          }}
+        />
+      )}
+      {children}
+    </span>
+  );
+});

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