@polderlabs/bizar 7.0.4 → 8.0.0

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

@@ -0,0 +1,56 @@
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import * as RxSwitch from '@radix-ui/react-switch';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Switch — boolean toggle (vs Checkbox which selects).
+ *
+ * Use for: enable/disable settings, on/off toggles.
+ * Built on Radix Switch for a11y.
+ */
+
+export type SwitchProps = ComponentPropsWithoutRef<typeof RxSwitch.Root>;
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(props, ref) {
+  const { className, ...rest } = props;
+  return (
+    <RxSwitch.Root
+      ref={ref}
+      className={cx('v8-switch', className)}
+      style={{
+        width: 32,
+        height: 18,
+        background: 'var(--surface-2)',
+        borderRadius: 'var(--radius-pill)',
+        position: 'relative',
+        border: '1px solid var(--border)',
+        cursor: 'pointer',
+        transition: 'background var(--motion-fast) var(--ease-out)',
+      }}
+      {...rest}
+    >
+      <RxSwitch.Thumb
+        style={{
+          display: 'block',
+          width: 12,
+          height: 12,
+          background: 'var(--fg)',
+          borderRadius: 'var(--radius-pill)',
+          transform: 'translateX(2px)',
+          transition: 'transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out)',
+          willChange: 'transform',
+        }}
+      />
+      <style>{`
+        .v8-switch[data-state='checked'] {
+          background: var(--accent);
+          border-color: var(--accent);
+        }
+        .v8-switch[data-state='checked'] > span {
+          transform: translateX(16px);
+          background: var(--fg-on-accent);
+        }
+      `}</style>
+    </RxSwitch.Root>
+  );
+});

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

@@ -0,0 +1,64 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Textarea — multi-line input.
+ *
+ * Use for: descriptions, comments, chat input.
+ * Pair with <Field> for label + hint + error.
+ */
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  invalid?: boolean;
+  autoResize?: boolean;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(props, ref) {
+  const {
+    invalid,
+    autoResize,
+    disabled,
+    rows = 4,
+    className,
+    style,
+    onInput,
+    ...rest
+  } = props;
+
+  const computedStyle = {
+    width: '100%',
+    minHeight: 64,
+    padding: 'var(--space-3)',
+    fontSize: 'var(--fs-13)',
+    lineHeight: 'var(--lh-base)',
+    color: 'var(--fg)',
+    background: 'var(--input-bg)',
+    border: '1px solid',
+    borderColor: invalid === true ? 'var(--danger)' : 'var(--border)',
+    borderRadius: 'var(--radius-sm)',
+    outline: 0,
+    resize: autoResize === true ? 'none' : 'vertical',
+    opacity: disabled === true ? 0.55 : 1,
+    fontFamily: 'inherit',
+    ...style,
+  } as const;
+
+  return (
+    <textarea
+      ref={ref}
+      rows={rows}
+      disabled={disabled}
+      aria-invalid={invalid === true ? 'true' : undefined}
+      className={cx('v8-textarea', className)}
+      style={computedStyle}
+      onInput={(e) => {
+        if (autoResize === true) {
+          const el = e.currentTarget;
+          el.style.height = 'auto';
+          el.style.height = `${el.scrollHeight}px`;
+        }
+        onInput?.(e);
+      }}
+      {...rest}
+    />
+  );
+});

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

@@ -0,0 +1,36 @@
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import * as RxToggle from '@radix-ui/react-toggle';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Toggle — pressed/unpressed button (single, not grouped).
+ *
+ * Use for: "favorite", "pin", "watch" toolbar buttons.
+ * For grouped selections (single or multi) use ToggleGroup.
+ */
+export type ToggleProps = ComponentPropsWithoutRef<typeof RxToggle.Root>;
+
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(props, ref) {
+  const { className, ...rest } = props;
+  return (
+    <RxToggle.Root
+      ref={ref}
+      className={cx('v8-toggle', className)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 32,
+        padding: '0 var(--space-3)',
+        background: 'transparent',
+        color: 'var(--fg-muted)',
+        border: '1px solid transparent',
+        borderRadius: 'var(--radius-sm)',
+        fontSize: 'var(--fs-13)',
+        cursor: 'pointer',
+        transition: 'background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out)',
+      }}
+      {...rest}
+    />
+  );
+});

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