@polderlabs/bizar 7.0.2 → 8.0.0

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

@@ -1,56 +0,0 @@
-/*
- * Textarea.tsx — multi-line text field (F-041).
- *
- * Sibling of TextInput. Wraps a native <textarea> so vertical resize,
- * mobile keyboard avoidance, and selection behave natively. Same focus
- * ring, error state, and disabled treatment as TextInput via the shared
- * .field wrapper in controls.css. Use for any free-form multi-line input
- * (prompts, descriptions, system prompts).
- */
-
-import {
-  forwardRef,
-  type TextareaHTMLAttributes,
-  type ReactNode,
-} from 'react';
-import { cx } from '../utils/cx';
-
-export type TextareaSize = 'sm' | 'md' | 'lg';
-
-export type TextareaProps = Omit<
-  TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'children'
-> & {
-  inputSize?: TextareaSize;
-  error?: string | null;
-  hint?: ReactNode;
-};
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  function Textarea(
-    {
-      inputSize = 'md',
-      error,
-      hint,
-      disabled,
-      className,
-      rows = 4,
-      ...rest
-    },
-    ref,
-  ) {
-    return (
-      <span className={cx('field', 'field-textarea', `field-size-${inputSize}`, className)}>
-        <textarea
-          ref={ref}
-          rows={rows}
-          disabled={disabled}
-          aria-invalid={error ? true : undefined}
-          className={cx('field-input', 'field-input-textarea', error && 'field-error')}
-          {...rest}
-        />
-        {hint && <span className="field-hint">{hint}</span>}
-      </span>
-    );
-  },
-);

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

@@ -1,79 +0,0 @@
-/*
- * Toggle.tsx — boolean switch (Wave 2A).
- *
- * Built as a label-wrapping-input pattern (visually hidden checkbox) so
- * screen readers announce role=switch without extra ARIA. The CSS track +
- * thumb are absolutely positioned inside the label; checked/disabled states
- * toggle classes on the wrapping label. `size` sm/md governs the track.
- *
- * Wrapper-level props (data-testid, id, aria-*, className) flow to the
- * <label>; the inner <input> only takes its own concerns (name, form,
- * autoFocus, etc).
- */
-
-import {
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
-} from 'react';
-import { cx } from '../utils/cx';
-
-export type ToggleSize = 'sm' | 'md';
-
-export type ToggleProps = Omit<
-  HTMLAttributes<HTMLLabelElement>,
-  'onChange' | 'children'
-> & {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  label?: ReactNode;
-  size?: ToggleSize;
-  name?: string;
-  disabled?: boolean;
-  autoFocus?: boolean;
-};
-
-export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
-  function Toggle(
-    {
-      checked,
-      onChange,
-      label,
-      disabled,
-      size = 'md',
-      name,
-      autoFocus,
-      className,
-      ...labelProps
-    },
-    ref,
-  ) {
-    return (
-      <label
-        {...labelProps}
-        className={cx(
-          'toggle',
-          size === 'sm' && 'toggle-sm',
-          checked && 'toggle-checked',
-          className,
-        )}
-      >
-        <input
-          ref={ref}
-          type="checkbox"
-          role="switch"
-          name={name}
-          checked={checked}
-          disabled={disabled}
-          autoFocus={autoFocus}
-          onChange={(e) => onChange(e.target.checked)}
-          className="toggle-input"
-        />
-        <span className="toggle-track" aria-hidden>
-          <span className="toggle-thumb" />
-        </span>
-        {label !== undefined && <span className="toggle-label">{label}</span>}
-      </label>
-    );
-  },
-);

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

@@ -1,476 +0,0 @@
-/* controls.css — Visual styles for form controls (Wave 2A). */
-
-/* ===== Button ===== */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  font-family: var(--font-sans);
-  font-weight: var(--weight-medium);
-  border-radius: var(--radius-md);
-  border: 1px solid transparent;
-  cursor: pointer;
-  white-space: nowrap;
-  transition:
-    background-color var(--duration-fast) var(--ease-out),
-    border-color var(--duration-fast) var(--ease-out),
-    color var(--duration-fast) var(--ease-out);
-}
-.btn:focus-visible {
-  outline: 2px solid var(--border-focus);
-  outline-offset: 2px;
-}
-.btn:disabled,
-.btn[aria-disabled='true'] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* sizes */
-.btn-size-xs { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); height: 22px; }
-.btn-size-sm { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); height: 28px; }
-.btn-size-md { font-size: var(--text-base); padding: var(--space-2) var(--space-4); height: 32px; }
-.btn-size-lg { font-size: var(--text-md); padding: var(--space-3) var(--space-5); height: 38px; }
-
-/* variants */
-.btn-primary { background-color: var(--accent); color: var(--accent-fg); }
-.btn-primary:hover:not(:disabled) { background-color: var(--accent-hover); }
-.btn-primary:active:not(:disabled) { background-color: var(--accent-active); }
-.btn-secondary { background-color: var(--surface-2); color: var(--text-primary); border-color: var(--border-default); }
-.btn-secondary:hover:not(:disabled) { background-color: var(--surface-3); }
-.btn-ghost { background-color: transparent; color: var(--text-primary); }
-.btn-ghost:hover:not(:disabled) { background-color: var(--surface-2); }
-.btn-subtle { background-color: var(--accent-subtle); color: var(--accent); }
-.btn-subtle:hover:not(:disabled) { background-color: var(--accent); color: var(--accent-fg); }
-.btn-danger { background-color: var(--danger); color: #ffffff; }
-.btn-danger:hover:not(:disabled) { filter: brightness(0.93); }
-.btn-full { width: 100%; }
-
-.btn-loading > :not(.btn-spinner) { opacity: 0.6; }
-
-.btn-spinner {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: btn-spin 0.6s linear infinite;
-}
-@keyframes btn-spin { to { transform: rotate(360deg); } }
-
-/* ===== IconButton ===== */
-.icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-md);
-  border: 1px solid transparent;
-  cursor: pointer;
-  transition:
-    background-color var(--duration-fast) var(--ease-out),
-    border-color var(--duration-fast) var(--ease-out),
-    color var(--duration-fast) var(--ease-out);
-}
-.icon-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
-.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.icon-btn-size-sm { width: 24px; height: 24px; }
-.icon-btn-size-md { width: 32px; height: 32px; }
-.icon-btn-size-lg { width: 40px; height: 40px; }
-.icon-btn-size-sm > svg { width: 14px; height: 14px; }
-.icon-btn-size-md > svg { width: 16px; height: 16px; }
-.icon-btn-size-lg > svg { width: 20px; height: 20px; }
-.icon-btn-primary { background-color: var(--accent); color: var(--accent-fg); }
-.icon-btn-secondary { background-color: var(--surface-2); color: var(--text-primary); border-color: var(--border-default); }
-.icon-btn-ghost { background-color: transparent; color: var(--text-primary); }
-.icon-btn-ghost:hover { background-color: var(--surface-2); }
-.icon-btn-danger { background-color: var(--danger); color: #ffffff; }
-.icon-btn-subtle { background-color: var(--accent-subtle); color: var(--accent); }
-
-/* ===== Toggle (switch) ===== */
-.toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  vertical-align: middle;
-  gap: var(--space-2);
-}
-.toggle-input {
-  position: absolute;
-  opacity: 0;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  margin: 0;
-}
-.toggle-input:focus-visible + .toggle-track {
-  outline: 2px solid var(--border-focus);
-  outline-offset: 2px;
-}
-.toggle-input:disabled {
-  cursor: not-allowed;
-}
-.toggle-track {
-  position: relative;
-  width: 32px;
-  height: 18px;
-  background-color: var(--surface-3);
-  border-radius: var(--radius-full);
-  border: 1px solid var(--border-default);
-  transition:
-    background-color var(--duration-fast) var(--ease-out),
-    border-color var(--duration-fast) var(--ease-out);
-}
-.toggle-sm .toggle-track { width: 26px; height: 14px; }
-.toggle-thumb {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 14px;
-  height: 14px;
-  background-color: var(--surface-0);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px var(--border-default);
-  transition: transform var(--duration-fast) var(--ease-out);
-}
-.toggle-sm .toggle-thumb { width: 10px; height: 10px; }
-.toggle-checked .toggle-track {
-  background-color: var(--accent);
-  border-color: var(--accent);
-}
-.toggle-checked .toggle-thumb {
-  transform: translateX(14px);
-}
-.toggle-sm.toggle-checked .toggle-thumb {
-  transform: translateX(12px);
-}
-.toggle:has(.toggle-input:disabled) { opacity: 0.5; cursor: not-allowed; }
-.toggle-label {
-  color: var(--text-primary);
-  font-size: var(--text-base);
-}
-
-/* ===== Text / Number / Search Input ===== */
-.field {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  font-family: var(--font-sans);
-}
-.field-input {
-  width: 100%;
-  font-family: inherit;
-  font-size: var(--text-base);
-  color: var(--text-primary);
-  background-color: var(--surface-1);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-3);
-  line-height: var(--leading-normal);
-  transition: border-color var(--duration-fast) var(--ease-out),
-    box-shadow var(--duration-fast) var(--ease-out);
-}
-.field-input::placeholder {
-  color: var(--text-tertiary);
-}
-.field-input:focus {
-  outline: none;
-  border-color: var(--border-focus);
-  box-shadow: 0 0 0 2px var(--accent-subtle);
-}
-.field-input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.field-input.field-error {
-  border-color: var(--danger);
-}
-.field-input.field-error:focus {
-  box-shadow: 0 0 0 2px var(--danger-subtle);
-}
-/* sizes */
-.field-size-sm .field-input { font-size: var(--text-sm); padding: var(--space-1) var(--space-2); height: 28px; }
-.field-size-md .field-input { font-size: var(--text-base); padding: var(--space-2) var(--space-3); height: 32px; }
-.field-size-lg .field-input { font-size: var(--text-md); padding: var(--space-2) var(--space-4); height: 40px; }
-
-/* icons */
-.field-icon-left,
-.field-icon-right {
-  position: absolute;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-tertiary);
-  pointer-events: none;
-}
-.field-icon-left { left: var(--space-2); }
-.field-icon-right { right: var(--space-2); }
-.field-size-sm .field-icon-left,
-.field-size-sm .field-icon-right {
-  width: 14px; height: 14px;
-}
-.field-size-md .field-icon-left,
-.field-size-md .field-icon-right {
-  width: 16px; height: 16px;
-}
-.field-size-lg .field-icon-left,
-.field-size-lg .field-icon-right {
-  width: 18px; height: 18px;
-}
-.field-has-left .field-input { padding-left: calc(var(--space-6) + var(--space-1)); }
-.field-has-right .field-input { padding-right: calc(var(--space-6) + var(--space-1)); }
-.field-size-sm.field-has-left .field-input { padding-left: calc(var(--space-5) + var(--space-1)); }
-.field-size-sm.field-has-right .field-input { padding-right: calc(var(--space-5) + var(--space-1)); }
-
-.field-clear {
-  position: absolute;
-  right: var(--space-2);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: var(--radius-sm);
-  background-color: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  border: 0;
-}
-.field-clear:hover { color: var(--text-primary); background-color: var(--surface-3); }
-
-/* ===== Textarea (F-041) ===== */
-.field-textarea {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-.field-input-textarea {
-  /* Resets the single-line .field-input height so the textarea can grow. */
-  height: auto;
-  min-height: 80px;
-  resize: vertical;
-  font-family: var(--font-sans);
-  line-height: var(--leading-normal);
-}
-.field-size-sm .field-input-textarea { font-size: var(--text-sm); min-height: 60px; }
-.field-size-md .field-input-textarea { font-size: var(--text-base); min-height: 80px; }
-.field-size-lg .field-input-textarea { font-size: var(--text-md); min-height: 120px; }
-.field-hint {
-  font-size: var(--text-xs);
-  color: var(--text-tertiary);
-}
-
-/* ===== Select ===== */
-.select {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-}
-.select-native {
-  width: 100%;
-  font-family: inherit;
-  font-size: var(--text-base);
-  color: var(--text-primary);
-  background-color: var(--surface-1);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-md);
-  padding: var(--space-2) calc(var(--space-6) + var(--space-2)) var(--space-2) var(--space-3);
-  line-height: var(--leading-normal);
-  appearance: none;
-  cursor: pointer;
-  transition: border-color var(--duration-fast) var(--ease-out),
-    box-shadow var(--duration-fast) var(--ease-out);
-}
-.select-native:focus {
-  outline: none;
-  border-color: var(--border-focus);
-  box-shadow: 0 0 0 2px var(--accent-subtle);
-}
-.select-native:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.select-native.select-error {
-  border-color: var(--danger);
-}
-.select-caret {
-  position: absolute;
-  right: var(--space-2);
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: var(--text-tertiary);
-}
-.select-size-sm .select-native { font-size: var(--text-sm); padding: var(--space-1) calc(var(--space-5) + var(--space-1)) var(--space-1) var(--space-2); height: 28px; }
-.select-size-md .select-native { height: 32px; }
-.select-size-lg .select-native { font-size: var(--text-md); padding: var(--space-3) calc(var(--space-7) + var(--space-1)) var(--space-3) var(--space-4); height: 40px; }
-
-/* ===== Checkbox ===== */
-.checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  cursor: pointer;
-  user-select: none;
-}
-.checkbox-input {
-  position: absolute;
-  opacity: 0;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  cursor: pointer;
-}
-.checkbox-input:focus-visible + .checkbox-box {
-  outline: 2px solid var(--border-focus);
-  outline-offset: 2px;
-}
-.checkbox-input:disabled { cursor: not-allowed; }
-.checkbox:has(.checkbox-input:disabled) { opacity: 0.5; }
-.checkbox-box {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-sm);
-  background-color: var(--surface-0);
-  color: var(--accent-fg);
-  transition: background-color var(--duration-fast) var(--ease-out),
-    border-color var(--duration-fast) var(--ease-out);
-}
-.checkbox-checked .checkbox-box {
-  background-color: var(--accent);
-  border-color: var(--accent);
-}
-.checkbox-indeterminate .checkbox-box {
-  background-color: var(--accent);
-  border-color: var(--accent);
-}
-.checkbox-box svg { width: 12px; height: 12px; }
-.checkbox-label { color: var(--text-primary); font-size: var(--text-base); }
-
-/* ===== RadioGroup ===== */
-.radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-.radio-group-horizontal { flex-direction: row; gap: var(--space-5); }
-.radio-option {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: var(--space-2);
-  cursor: pointer;
-  user-select: none;
-}
-.radio-option-input {
-  position: absolute;
-  opacity: 0;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  cursor: pointer;
-}
-.radio-option-input:focus-visible + .radio-option-box {
-  outline: 2px solid var(--border-focus);
-  outline-offset: 2px;
-}
-.radio-option:has(.radio-option-input:disabled) { opacity: 0.5; cursor: not-allowed; }
-.radio-option-box {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border: 1px solid var(--border-default);
-  border-radius: 50%;
-  background-color: var(--surface-0);
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-.radio-option-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: transparent;
-  transition: background-color var(--duration-fast) var(--ease-out);
-}
-.radio-option-checked .radio-option-box {
-  border-color: var(--accent);
-}
-.radio-option-checked .radio-option-dot {
-  background-color: var(--accent);
-}
-.radio-option-content { display: inline-flex; flex-direction: column; gap: var(--space-1); }
-.radio-option-label { color: var(--text-primary); font-size: var(--text-base); }
-.radio-option-desc { color: var(--text-tertiary); font-size: var(--text-sm); }
-
-/* ===== Slider ===== */
-.slider {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  width: 100%;
-}
-.slider-input {
-  width: 100%;
-  height: 4px;
-  appearance: none;
-  background-color: var(--surface-3);
-  border-radius: var(--radius-full);
-  outline: none;
-  cursor: pointer;
-}
-.slider-input:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
-.slider-input::-webkit-slider-thumb {
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background-color: var(--accent);
-  border: 2px solid var(--surface-0);
-  box-shadow: 0 0 0 1px var(--accent);
-  cursor: pointer;
-}
-.slider-input::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background-color: var(--accent);
-  border: 2px solid var(--surface-0);
-  box-shadow: 0 0 0 1px var(--accent);
-  cursor: pointer;
-}
-.slider-input:disabled { opacity: 0.5; cursor: not-allowed; }
-.slider-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.slider-label { color: var(--text-primary); font-size: var(--text-base); }
-.slider-value { color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
-
-/* ===== Kbd ===== */
-.kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 var(--space-1);
-  font-family: var(--font-mono);
-  font-size: var(--text-xs);
-  line-height: 1;
-  color: var(--text-secondary);
-  background-color: var(--surface-1);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--shadow-hairline);
-}

package/bizar-dash/src/web/ui/controls/index.ts

@@ -1,35 +0,0 @@
-/*
- * index.ts — Barrel for form controls (Wave 2A).
- *
- * Side-effect import of controls.css ships the stylesheet to any
- * consumer that imports from this module graph. Wave 2's ui/index.ts
- * re-exports the exports below — leaving the CSS wiring here means
- * styles arrive without an additional integration step.
- */
-
-import './controls.css';
-
-export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
-export { IconButton } from './IconButton';
-export type { IconButtonProps, IconButtonVariant, IconButtonSize } from './IconButton';
-export { Toggle } from './Toggle';
-export type { ToggleProps, ToggleSize } from './Toggle';
-export { TextInput } from './TextInput';
-export type { TextInputProps, TextInputSize } from './TextInput';
-export { Textarea } from './Textarea';
-export type { TextareaProps, TextareaSize } from './Textarea';
-export { NumberInput } from './NumberInput';
-export type { NumberInputProps, NumberInputSize } from './NumberInput';
-export { Select } from './Select';
-export type { SelectProps, SelectOption, SelectSize } from './Select';
-export { Checkbox } from './Checkbox';
-export type { CheckboxProps } from './Checkbox';
-export { RadioGroup } from './RadioGroup';
-export type { RadioGroupProps, RadioOption, RadioOrientation } from './RadioGroup';
-export { Slider } from './Slider';
-export type { SliderProps } from './Slider';
-export { SearchInput } from './SearchInput';
-export type { SearchInputProps, SearchInputSize } from './SearchInput';
-export { Kbd } from './Kbd';
-export type { KbdProps } from './Kbd';

package/bizar-dash/src/web/ui/data/BarChart.tsx

@@ -1,60 +0,0 @@
-/*
- * BarChart.tsx — Horizontal bar chart (Wave 2B).
- *
- * One row per data point: optional label + value header, then a thin
- * filled bar whose width is `value / maxValue * 100%`. Bar colour comes from
- * each datum (defaults to var(--chart-1)) so callers can colour by series
- * via e.g. colorTokens.chart2. No SVG, no chart library — CSS widths only.
- */
-
-import { cx } from '../utils/cx';
-
-export type BarChartDatum = {
-  label: string;
-  value: number;
-  color?: string;
-};
-
-export type BarChartProps = {
-  data: BarChartDatum[];
-  maxValue?: number;
-  showLabels?: boolean;
-  className?: string;
-};
-
-export function BarChart({
-  data,
-  maxValue,
-  showLabels = true,
-  className,
-}: BarChartProps): React.JSX.Element {
-  const computedMax =
-    maxValue ?? Math.max(1, ...data.map((d) => d.value));
-
-  return (
-    <div className={cx('bd-bar-chart', className)} role="list">
-      {data.map((d, i) => {
-        const pct = Math.max(0, Math.min(100, (d.value / computedMax) * 100));
-        return (
-          <div key={`${d.label}-${i}`} role="listitem" className="bd-bar-chart__row">
-            {showLabels && (
-              <div className="bd-bar-chart__header">
-                <span className="bd-bar-chart__label">{d.label}</span>
-                <span className="bd-bar-chart__value">{d.value}</span>
-              </div>
-            )}
-            <div className="bd-bar-chart__track" aria-hidden={!showLabels}>
-              <div
-                className="bd-bar-chart__bar"
-                style={{
-                  width: `${pct}%`,
-                  background: d.color ?? 'var(--chart-1)',
-                }}
-              />
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}