@polderlabs/bizar 7.0.4 → 8.0.0

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

@@ -1,95 +0,0 @@
-/*
- * Checkbox.tsx — tri-state checkbox (Wave 2A).
- *
- * Three visual states: unchecked, checked, indeterminate (set the
- * `indeterminate` boolean when partial selection applies — e.g. a
- * parent whose children are partially selected). Built as a label +
- * visually-hidden input pattern so the entire row is clickable and
- * keyboard activatable (space).
- *
- * Wrapper-level props (data-testid, id, aria-*, className) flow to the
- * <label>; the inner <input> only takes its own concerns.
- */
-
-import {
-  forwardRef,
-  useEffect,
-  useRef,
-  type HTMLAttributes,
-  type ReactNode,
-} from 'react';
-import { Check, Minus } from 'lucide-react';
-import { cx } from '../utils/cx';
-
-export type CheckboxProps = Omit<
-  HTMLAttributes<HTMLLabelElement>,
-  'onChange' | 'children'
-> & {
-  checked: boolean;
-  onChange: (next: boolean) => void;
-  label?: ReactNode;
-  indeterminate?: boolean;
-  disabled?: boolean;
-  name?: string;
-  autoFocus?: boolean;
-  required?: boolean;
-};
-
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  function Checkbox(
-    {
-      checked,
-      onChange,
-      label,
-      indeterminate = false,
-      disabled,
-      name,
-      autoFocus,
-      required,
-      className,
-      ...labelProps
-    },
-    ref,
-  ) {
-    const innerRef = useRef<HTMLInputElement | null>(null);
-    useEffect(() => {
-      if (innerRef.current) innerRef.current.indeterminate = indeterminate;
-    }, [indeterminate]);
-    const setRef = (el: HTMLInputElement | null) => {
-      innerRef.current = el;
-      if (typeof ref === 'function') ref(el);
-      else if (ref) ref.current = el;
-    };
-    return (
-      <label
-        {...labelProps}
-        className={cx(
-          'checkbox',
-          checked && 'checkbox-checked',
-          indeterminate && 'checkbox-indeterminate',
-          className,
-        )}
-      >
-        <input
-          ref={setRef}
-          type="checkbox"
-          name={name}
-          checked={checked}
-          disabled={disabled}
-          required={required}
-          autoFocus={autoFocus}
-          onChange={(e) => onChange(e.target.checked)}
-          className="checkbox-input"
-        />
-        <span className="checkbox-box" aria-hidden>
-          {indeterminate ? (
-            <Minus strokeWidth={3} />
-          ) : checked ? (
-            <Check strokeWidth={3} />
-          ) : null}
-        </span>
-        {label !== undefined && <span className="checkbox-label">{label}</span>}
-      </label>
-    );
-  },
-);

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

@@ -1,66 +0,0 @@
-/*
- * IconButton.tsx — square icon-only button (Wave 2A).
- *
- * Use for toolbar actions, dialog close buttons, and other in-line controls
- * that need only a glyph. Always pair with `aria-label` (or `aria-labelledby`)
- * — the rendered children are the icon, so sighted-only labels are absent.
- * Mirrors Button's variant taxonomy (primary/secondary/ghost/danger/subtle)
- * with sizes sm/md/lg (24/32/40 px squares).
- */
-
-import {
-  forwardRef,
-  type ButtonHTMLAttributes,
-  type ReactNode,
-} from 'react';
-import { cx } from '../utils/cx';
-
-export type IconButtonVariant =
-  | 'primary'
-  | 'secondary'
-  | 'ghost'
-  | 'danger'
-  | 'subtle';
-export type IconButtonSize = 'sm' | 'md' | 'lg';
-
-export type IconButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'children'
-> & {
-  variant?: IconButtonVariant;
-  size?: IconButtonSize;
-  icon: ReactNode;
-  'aria-label': string;
-};
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  function IconButton(
-    {
-      variant = 'secondary',
-      size = 'md',
-      icon,
-      disabled,
-      className,
-      type = 'button',
-      ...rest
-    },
-    ref,
-  ) {
-    return (
-      <button
-        ref={ref}
-        type={type}
-        disabled={disabled}
-        className={cx(
-          'icon-btn',
-          `icon-btn-${variant}`,
-          `icon-btn-size-${size}`,
-          className,
-        )}
-        {...rest}
-      >
-        {icon}
-      </button>
-    );
-  },
-);

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

@@ -1,24 +0,0 @@
-/*
- * Kbd.tsx — keyboard-shortcut affordance (Wave 2A).
- *
- * Renders a single key glyph (or short label) inside a <kbd> element
- * styled with a hairline border + monospace font. Use for inline
- * shortcut hints next to menu items, command palette entries, or any
- * place a user needs to see "this is a keyboard shortcut". Stacking
- * multiple Kbds inline renders a "⌘ K" / "Ctrl K" style hint.
- */
-
-import type { HTMLAttributes, ReactNode } from 'react';
-import { cx } from '../utils/cx';
-
-export type KbdProps = HTMLAttributes<HTMLElement> & {
-  children?: ReactNode;
-};
-
-export function Kbd({ children, className, ...rest }: KbdProps): React.JSX.Element {
-  return (
-    <kbd className={cx('kbd', className)} {...rest}>
-      {children}
-    </kbd>
-  );
-}

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

@@ -1,77 +0,0 @@
-/*
- * NumberInput.tsx — numeric input (Wave 2A).
- *
- * Wraps <input type="number"> and accepts string | number for `value`
- * (the native input gives back a string from typing but consumers
- * typically want to work with numbers). `onChange` normalises: if the
- * field is empty, emit ''; otherwise coerce to Number. When the parsed
- * number is NaN we emit the raw string so the consumer can decide.
- */
-
-import { forwardRef, type InputHTMLAttributes } from 'react';
-import { cx } from '../utils/cx';
-
-export type NumberInputSize = 'sm' | 'md' | 'lg';
-
-export type NumberInputProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'type' | 'value' | 'onChange' | 'size' | 'children'
-> & {
-  inputSize?: NumberInputSize;
-  error?: string | null;
-  value: string | number;
-  onChange: (next: string | number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-};
-
-export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
-  function NumberInput(
-    {
-      inputSize = 'md',
-      error,
-      value,
-      onChange,
-      min,
-      max,
-      step,
-      disabled,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    return (
-      <span
-        className={cx(
-          'field',
-          `field-size-${inputSize}`,
-          className,
-        )}
-      >
-        <input
-          ref={ref}
-          type="number"
-          disabled={disabled}
-          value={value}
-          min={min}
-          max={max}
-          step={step}
-          aria-invalid={error ? true : undefined}
-          className={cx('field-input', error && 'field-error')}
-          onChange={(e) => {
-            const raw = e.target.value;
-            if (raw === '') {
-              onChange('');
-              return;
-            }
-            const n = Number(raw);
-            onChange(Number.isFinite(n) ? n : raw);
-          }}
-          {...rest}
-        />
-      </span>
-    );
-  },
-);

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

@@ -1,109 +0,0 @@
-/*
- * RadioGroup.tsx — single-select radio group (Wave 2A).
- *
- * Renders a radiogroup shell and lays out one label-wrapping-input per
- * option. Keyboard navigation (arrow keys) is inherited from native
- * <input type="radio"> inside a single name group. `orientation`
- * controls horizontal vs vertical layout; CSS handles the actual flex
- * direction. Wrapper-level props (data-testid, id, aria-*, className)
- * land on the radiogroup container, not on each input.
- */
-
-import {
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
-} from 'react';
-import { cx } from '../utils/cx';
-
-export type RadioOption = {
-  value: string;
-  label: ReactNode;
-  description?: ReactNode;
-  disabled?: boolean;
-};
-
-export type RadioOrientation = 'horizontal' | 'vertical';
-
-export type RadioGroupProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'onChange' | 'children'
-> & {
-  name: string;
-  value: string;
-  onChange: (next: string) => void;
-  options: RadioOption[];
-  orientation?: RadioOrientation;
-  legend?: ReactNode;
-  disabled?: boolean;
-  required?: boolean;
-};
-
-export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  function RadioGroup(
-    {
-      name,
-      value,
-      onChange,
-      options,
-      orientation = 'vertical',
-      legend,
-      disabled: groupDisabled,
-      required,
-      className,
-      ...wrapperProps
-    },
-    ref,
-  ) {
-    return (
-      <div
-        ref={ref}
-        role="radiogroup"
-        {...wrapperProps}
-        className={cx(
-          'radio-group',
-          orientation === 'horizontal' && 'radio-group-horizontal',
-          className,
-        )}
-      >
-        {legend !== undefined && (
-          <p className="radio-option-label" style={{ marginBottom: 4 }}>
-            {legend}
-          </p>
-        )}
-        {options.map((opt) => {
-          const isChecked = opt.value === value;
-          return (
-            <label
-              key={opt.value}
-              className={cx(
-                'radio-option',
-                isChecked && 'radio-option-checked',
-              )}
-            >
-              <input
-                type="radio"
-                name={name}
-                value={opt.value}
-                checked={isChecked}
-                disabled={groupDisabled || opt.disabled}
-                required={required}
-                onChange={() => onChange(opt.value)}
-                className="radio-option-input"
-              />
-              <span className="radio-option-box" aria-hidden>
-                <span className="radio-option-dot" />
-              </span>
-              <span className="radio-option-content">
-                <span className="radio-option-label">{opt.label}</span>
-                {opt.description !== undefined && (
-                  <span className="radio-option-desc">{opt.description}</span>
-                )}
-              </span>
-            </label>
-          );
-        })}
-      </div>
-    );
-  },
-);

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

@@ -1,91 +0,0 @@
-/*
- * SearchInput.tsx — text field with search affordances (Wave 2A).
- *
- * Composes TextInput: bakes in a left Search icon and a conditional
- * Clear button on the right when `value` is non-empty. `onClear` fires
- * only when the user activates the explicit Clear button — not on
- * backspace keystrokes, which are reported through the regular
- * `onChange` callback. `aria-label` should be supplied by the caller
- * (visual label is optional).
- */
-
-import {
-  forwardRef,
-  useCallback,
-  type ChangeEvent,
-} from 'react';
-import { Search, X } from 'lucide-react';
-import { cx } from '../utils/cx';
-import { TextInput } from './TextInput';
-
-export type SearchInputSize = 'sm' | 'md' | 'lg';
-
-export type SearchInputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'size' | 'children' | 'type'
-> & {
-  inputSize?: SearchInputSize;
-  value: string;
-  onChange: (next: string) => void;
-  onClear?: () => void;
-  placeholder?: string;
-  disabled?: boolean;
-  'aria-label'?: string;
-};
-
-export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  function SearchInput(
-    {
-      inputSize = 'md',
-      value,
-      onChange,
-      onClear,
-      placeholder = 'Search…',
-      disabled,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    const handleClear = useCallback(() => {
-      onChange('');
-      onClear?.();
-    }, [onChange, onClear]);
-    const handleChange = useCallback(
-      (e: ChangeEvent<HTMLInputElement>) => {
-        onChange(e.target.value);
-      },
-      [onChange],
-    );
-    return (
-      <span className={cx('field', className)}>
-        <Search
-          size={14}
-          className="field-icon-left"
-          aria-hidden
-        />
-        <input
-          ref={ref}
-          type="search"
-          value={value}
-          onChange={handleChange}
-          placeholder={placeholder}
-          disabled={disabled}
-          className="field-input field-has-left"
-          {...rest}
-        />
-        {value !== '' && !disabled && (
-          <button
-            type="button"
-            onClick={handleClear}
-            className="field-clear"
-            aria-label="Clear search"
-            tabIndex={-1}
-          >
-            <X size={12} aria-hidden />
-          </button>
-        )}
-      </span>
-    );
-  },
-);

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

@@ -1,92 +0,0 @@
-/*
- * Select.tsx — native select dropdown (Wave 2A).
- *
- * Built on the native <select> for keyboard nav, mobile picker, and
- * free accessibility. The native control is wrapped in a span that
- * owns sizing + caret positioning. CSS paints a chevron via the
- * `select-caret` sibling. Wrapper-level props (data-testid, id, className)
- * land on the outer span; form-related props (name, form, required) go
- * to the inner <select>.
- */
-
-import {
-  forwardRef,
-  type HTMLAttributes,
-} from 'react';
-import { ChevronDown } from 'lucide-react';
-import { cx } from '../utils/cx';
-
-export type SelectOption = {
-  value: string;
-  label: string;
-  disabled?: boolean;
-};
-
-export type SelectSize = 'sm' | 'md' | 'lg';
-
-export type SelectProps = Omit<
-  HTMLAttributes<HTMLSpanElement>,
-  'children'
-> & {
-  inputSize?: SelectSize;
-  options: SelectOption[];
-  placeholder?: string;
-  error?: string | null;
-  value?: string;
-  defaultValue?: string;
-  disabled?: boolean;
-  name?: string;
-  required?: boolean;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-};
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  function Select(
-    {
-      inputSize = 'md',
-      options,
-      placeholder,
-      error,
-      value,
-      defaultValue,
-      disabled,
-      name,
-      required,
-      onChange,
-      className,
-      ...wrapperProps
-    },
-    ref,
-  ) {
-    return (
-      <span
-        {...wrapperProps}
-        className={cx('select', `select-size-${inputSize}`, className)}
-      >
-        <select
-          ref={ref}
-          disabled={disabled}
-          name={name}
-          required={required}
-          value={value}
-          defaultValue={defaultValue ?? (placeholder !== undefined ? '' : undefined)}
-          onChange={onChange}
-          aria-invalid={error ? true : undefined}
-          className={cx('select-native', error && 'select-error')}
-        >
-          {placeholder !== undefined && (
-            <option value="" disabled>
-              {placeholder}
-            </option>
-          )}
-          {options.map((opt) => (
-            <option key={opt.value} value={opt.value} disabled={opt.disabled}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-        <ChevronDown className="select-caret" size={14} aria-hidden />
-      </span>
-    );
-  },
-);

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

@@ -1,70 +0,0 @@
-/*
- * Slider.tsx — range input (Wave 2A).
- *
- * Thin wrapper around <input type="range"> that adds a labelled header
- * row and an optional value badge. The native range control delivers
- * keyboard arrow-keys / page-up / home / end for free. `showValue` adds
- * a tabular-numeric readout to the right of the label.
- */
-
-import { forwardRef, type InputHTMLAttributes } from 'react';
-import { cx } from '../utils/cx';
-
-export type SliderProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'type' | 'value' | 'onChange' | 'children'
-> & {
-  value: number;
-  onChange: (next: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  label?: string;
-  showValue?: boolean;
-  disabled?: boolean;
-};
-
-export const Slider = forwardRef<HTMLInputElement, SliderProps>(
-  function Slider(
-    {
-      value,
-      onChange,
-      min = 0,
-      max = 100,
-      step = 1,
-      label,
-      showValue = false,
-      disabled,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    return (
-      <div className={cx('slider', className)}>
-        {(label !== undefined || showValue) && (
-          <div className="slider-header">
-            {label !== undefined && (
-              <span className="slider-label">{label}</span>
-            )}
-            {showValue && (
-              <span className="slider-value">{String(value)}</span>
-            )}
-          </div>
-        )}
-        <input
-          ref={ref}
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          disabled={disabled}
-          onChange={(e) => onChange(Number(e.target.value))}
-          className="slider-input"
-          {...rest}
-        />
-      </div>
-    );
-  },
-);

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

@@ -1,67 +0,0 @@
-/*
- * TextInput.tsx — single-line text field (Wave 2A).
- *
- * Wraps the native <input type="text"> to keep autofocus / selection /
- * spellcheck / mobile keyboard behavior free of customization. Sizes sm/md/lg
- * match the rest of the controls' vertical rhythm. `error` paints the border
- * danger and shifts the focus ring to the danger-subtle tone. `leftIcon` and
- * `rightIcon` are ReactNode (typically a lucide-react icon) absolutely
- * positioned inside the field padding well.
- */
-
-import {
-  forwardRef,
-  type InputHTMLAttributes,
-  type ReactNode,
-} from 'react';
-import { cx } from '../utils/cx';
-
-export type TextInputSize = 'sm' | 'md' | 'lg';
-
-export type TextInputProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  'size' | 'children'
-> & {
-  inputSize?: TextInputSize;
-  error?: string | null;
-  leftIcon?: ReactNode;
-  rightIcon?: ReactNode;
-};
-
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-  function TextInput(
-    {
-      inputSize = 'md',
-      error,
-      leftIcon,
-      rightIcon,
-      disabled,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    return (
-      <span
-        className={cx(
-          'field',
-          `field-size-${inputSize}`,
-          leftIcon && 'field-has-left',
-          rightIcon && 'field-has-right',
-          className,
-        )}
-      >
-        {leftIcon && <span className="field-icon-left">{leftIcon}</span>}
-        <input
-          ref={ref}
-          type="text"
-          disabled={disabled}
-          aria-invalid={error ? true : undefined}
-          className={cx('field-input', error && 'field-error')}
-          {...rest}
-        />
-        {rightIcon && <span className="field-icon-right">{rightIcon}</span>}
-      </span>
-    );
-  },
-);