@polderlabs/bizar 6.3.0 → 7.0.0

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

@@ -0,0 +1,91 @@
+/*
+ * 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

@@ -0,0 +1,92 @@
+/*
+ * 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

@@ -0,0 +1,70 @@
+/*
+ * 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

@@ -0,0 +1,67 @@
+/*
+ * 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>
+    );
+  },
+);

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

@@ -0,0 +1,79 @@
+/*
+ * 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>
+    );
+  },
+);