@polderlabs/bizar 7.0.4 → 8.0.0

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

@@ -0,0 +1,49 @@
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import * as RxCheckbox from '@radix-ui/react-checkbox';
+import { Check, Minus } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Checkbox — controlled or uncontrolled boolean input.
+ *
+ * Built on Radix Checkbox for keyboard + screen reader correctness.
+ * Use inside <Field> for label/hint/error.
+ */
+
+export type CheckboxProps = ComponentPropsWithoutRef<typeof RxCheckbox.Root>;
+
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(
+  props,
+  ref,
+) {
+  const { className, disabled, ...rest } = props;
+  return (
+    <RxCheckbox.Root
+      ref={ref}
+      disabled={disabled}
+      className={cx('v8-checkbox', className)}
+      style={{
+        width: 16,
+        height: 16,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'var(--input-bg)',
+        border: '1px solid var(--border-strong)',
+        borderRadius: 'var(--radius-sm)',
+        cursor: disabled === true ? 'not-allowed' : 'pointer',
+        opacity: disabled === true ? 0.55 : 1,
+        transition: 'background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out)',
+      }}
+      {...rest}
+    >
+      <RxCheckbox.Indicator>
+        {rest.checked === 'indeterminate' ? (
+          <Minus size={12} aria-hidden="true" style={{ color: 'var(--fg-on-accent)' }} />
+        ) : (
+          <Check size={12} aria-hidden="true" style={{ color: 'var(--fg-on-accent)' }} />
+        )}
+      </RxCheckbox.Indicator>
+    </RxCheckbox.Root>
+  );
+});

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

@@ -0,0 +1,78 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Field — form field wrapper that pairs a label with a control and optional
+ * hint / error message.
+ *
+ * Use for any form input so labels, hints, and errors render consistently.
+ * Accessibility: the label is properly associated with the control via
+ * `htmlFor` + `id`. The hint and error share `aria-describedby`.
+ */
+export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Unique id used for the input + label-for relationship. */
+  id: string;
+  /** Visible label text. */
+  label: ReactNode;
+  /** Optional descriptive hint below the control. */
+  hint?: ReactNode;
+  /** Optional error message. When present, the field renders the error tone. */
+  error?: ReactNode;
+  /** Whether the field is required (adds a red asterisk). */
+  required?: boolean;
+  /** The form control. Field renders the label and styling around it. */
+  children: ReactNode;
+}
+
+export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(props, ref) {
+  const { id, label, hint, error, required, children, className, ...rest } = props;
+  const hintId = hint !== undefined ? `${id}-hint` : undefined;
+  const errorId = error !== undefined ? `${id}-error` : undefined;
+
+  return (
+    <div
+      ref={ref}
+      className={cx('v8-field', error !== undefined && 'has-error', className)}
+      style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}
+      {...rest}
+    >
+      <label
+        htmlFor={id}
+        style={{
+          fontSize: 'var(--fs-13)',
+          fontWeight: 500,
+          color: 'var(--fg)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-1)',
+        }}
+      >
+        {label}
+        {required === true && (
+          <span aria-hidden="true" style={{ color: 'var(--danger)' }}>
+            *
+          </span>
+        )}
+      </label>
+      {/* Children must wire `id={id}` to their input for the label to work. */}
+      {children}
+      {hint !== undefined && error === undefined && (
+        <div
+          id={hintId}
+          style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}
+        >
+          {hint}
+        </div>
+      )}
+      {error !== undefined && (
+        <div
+          id={errorId}
+          role="alert"
+          style={{ fontSize: 'var(--fs-12)', color: 'var(--danger)' }}
+        >
+          {error}
+        </div>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,23 @@
+import { forwardRef, type FormHTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Form — top-level form surface. Currently a thin styled wrapper around <form>.
+ *
+ * The v8 dashboard forms are intentionally minimal — most fields are wired
+ * via <Field> + native input events. For complex forms (Settings pages,
+ * kanban quick-add) use react-hook-form in the consumer; this primitive
+ * just provides consistent layout + a handle for future form-level tooling.
+ */
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  children: ReactNode;
+}
+
+export const Form = forwardRef<HTMLFormElement, FormProps>(function Form(props, ref) {
+  const { children, className, ...rest } = props;
+  return (
+    <form ref={ref} className={cx('v8-form', className)} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }} {...rest}>
+      {children}
+    </form>
+  );
+});

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

@@ -0,0 +1,112 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cx } from '../utils/cx.js';
+
+/**
+ * IconButton — square button for icon-only actions.
+ *
+ * Always pair with an accessible label via `aria-label` or `<VisuallyHidden>`.
+ * The `variant` mirrors Button's so they compose visually.
+ *
+ * Use cases: topbar toolbars, kanban card actions, sidebar collapse, etc.
+ */
+
+export type IconButtonVariant = 'ghost' | 'secondary' | 'primary' | 'danger' | 'outline';
+export type IconButtonSize = 'sm' | 'md' | 'lg';
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Required for a11y. The button is meaningless without a name. */
+  'aria-label': string;
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+  asChild?: boolean;
+  active?: boolean;
+  children: ReactNode;
+}
+
+const SIZE: Record<IconButtonSize, number> = { sm: 24, md: 32, lg: 40 };
+
+const VARIANT_BG: Record<IconButtonVariant, string> = {
+  primary: 'var(--accent)',
+  secondary: 'var(--surface-1)',
+  ghost: 'transparent',
+  danger: 'var(--danger)',
+  outline: 'transparent',
+};
+
+const VARIANT_FG: Record<IconButtonVariant, string> = {
+  primary: 'var(--fg-on-accent)',
+  secondary: 'var(--fg)',
+  ghost: 'var(--fg-muted)',
+  danger: 'var(--fg-on-accent)',
+  outline: 'var(--fg)',
+};
+
+const VARIANT_BORDER: Record<IconButtonVariant, string> = {
+  primary: 'transparent',
+  secondary: 'var(--border)',
+  ghost: 'transparent',
+  danger: 'transparent',
+  outline: 'var(--border)',
+};
+
+const VARIANT_ACTIVE_BG: Record<IconButtonVariant, string> = {
+  primary: 'var(--accent-hover)',
+  secondary: 'var(--surface-2)',
+  ghost: 'var(--surface-1)',
+  danger: 'color-mix(in oklch, var(--danger), black 10%)',
+  outline: 'var(--surface-2)',
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  props,
+  ref,
+) {
+  const {
+    variant = 'ghost',
+    size = 'md',
+    asChild,
+    active,
+    disabled,
+    children,
+    className,
+    style,
+    type,
+    ...rest
+  } = props;
+
+  const Comp = (asChild ? Slot : 'button') as React.ElementType;
+  const dim = SIZE[size];
+
+  const computedStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: dim,
+    height: dim,
+    flexShrink: 0,
+    background: active === true ? VARIANT_ACTIVE_BG[variant] : VARIANT_BG[variant],
+    color: VARIANT_FG[variant],
+    border: '1px solid',
+    borderColor: VARIANT_BORDER[variant],
+    borderRadius: 'var(--radius-sm)',
+    cursor: disabled === true ? 'not-allowed' : 'pointer',
+    opacity: disabled === true ? 0.55 : 1,
+    transition: 'background var(--motion-fast) var(--ease-out)',
+    ...style,
+  } as const;
+
+  return (
+    <Comp
+      ref={ref as React.Ref<HTMLElement>}
+      type={asChild ? undefined : type ?? 'button'}
+      disabled={disabled}
+      data-active={active === true ? 'true' : undefined}
+      className={cx('v8-icon-btn', `v8-icon-btn--${variant}`, `v8-icon-btn--${size}`, className)}
+      style={computedStyle}
+      {...rest}
+    >
+      {children}
+    </Comp>
+  );
+});

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

@@ -0,0 +1,94 @@
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Input — single-line text input.
+ *
+ * Variants:
+ *   - default:    bordered, surface-1 background
+ *   - filled:     surface-2 background, no visible border until focus
+ *   - flushed:    no border except a bottom rule (used inside cards/forms)
+ *
+ * Pair with <Field> for label + hint + error.
+ */
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputVariant = 'default' | 'filled' | 'flushed';
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  size?: InputSize;
+  variant?: InputVariant;
+  invalid?: boolean;
+  leftAddon?: ReactNode;
+  rightAddon?: ReactNode;
+}
+
+const SIZE: Record<InputSize, { h: number; fs: string; px: number }> = {
+  sm: { h: 28, fs: 'var(--fs-12)', px: 10 },
+  md: { h: 32, fs: 'var(--fs-13)', px: 12 },
+  lg: { h: 40, fs: 'var(--fs-14)', px: 14 },
+};
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {
+  const {
+    size = 'md',
+    variant = 'default',
+    invalid,
+    leftAddon,
+    rightAddon,
+    disabled,
+    className,
+    style,
+    ...rest
+  } = props;
+  const sz = SIZE[size];
+
+  const wrapperStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 'var(--space-2)',
+    width: '100%',
+    height: sz.h,
+    paddingLeft: variant === 'flushed' ? 0 : sz.px,
+    paddingRight: variant === 'flushed' ? 0 : sz.px,
+    background:
+      variant === 'filled'
+        ? 'var(--surface-2)'
+        : variant === 'flushed'
+          ? 'transparent'
+          : 'var(--input-bg)',
+    border: variant === 'flushed' ? 'none' : '1px solid',
+    borderBottom: variant === 'flushed' ? '1px solid var(--border)' : undefined,
+    borderColor: invalid === true ? 'var(--danger)' : 'var(--border)',
+    borderRadius: variant === 'flushed' ? 0 : 'var(--radius-sm)',
+    opacity: disabled === true ? 0.55 : 1,
+    transition: 'border-color var(--motion-fast) var(--ease-out)',
+    ...style,
+  } as const;
+
+  return (
+    <div className={cx('v8-input-wrap', className)} style={wrapperStyle}>
+      {leftAddon !== undefined && (
+        <span style={{ color: 'var(--fg-muted)', display: 'inline-flex' }}>{leftAddon}</span>
+      )}
+      <input
+        ref={ref}
+        disabled={disabled}
+        aria-invalid={invalid === true ? 'true' : undefined}
+        className="v8-input"
+        style={{
+          flex: 1,
+          minWidth: 0,
+          background: 'transparent',
+          border: 0,
+          outline: 0,
+          fontSize: sz.fs,
+          color: 'var(--fg)',
+        }}
+        {...rest}
+      />
+      {rightAddon !== undefined && (
+        <span style={{ color: 'var(--fg-muted)', display: 'inline-flex' }}>{rightAddon}</span>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,74 @@
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import * as RxRadio from '@radix-ui/react-radio-group';
+import { cx } from '../utils/cx.js';
+
+/**
+ * RadioGroup — mutually exclusive single-choice input.
+ *
+ * Built on Radix RadioGroup for keyboard arrow navigation.
+ */
+export type RadioGroupProps = ComponentPropsWithoutRef<typeof RxRadio.Root>;
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(
+  props,
+  ref,
+) {
+  const { className, ...rest } = props;
+  return (
+    <RxRadio.Root
+      ref={ref}
+      className={cx('v8-radio-group', className)}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-2)',
+      }}
+      {...rest}
+    />
+  );
+});
+
+export interface RadioGroupItemProps extends ComponentPropsWithoutRef<typeof RxRadio.Item> {
+  label?: string;
+}
+
+export const RadioGroupItem = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+  function RadioGroupItem(props, ref) {
+    const { className, value, label, ...rest } = props;
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+        <RxRadio.Item
+          ref={ref}
+          value={value}
+          className={cx('v8-radio-group__item', className)}
+          style={{
+            width: 16,
+            height: 16,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'var(--input-bg)',
+            border: '1px solid var(--border-strong)',
+            borderRadius: 'var(--radius-pill)',
+            cursor: 'pointer',
+          }}
+          {...rest}
+        >
+          <RxRadio.Indicator
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: 'var(--radius-pill)',
+              background: 'var(--accent)',
+            }}
+          />
+        </RxRadio.Item>
+        {label !== undefined && (
+          <label htmlFor={rest.id} style={{ fontSize: 'var(--fs-13)', cursor: 'pointer' }}>
+            {label}
+          </label>
+        )}
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,171 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import * as RxSelect from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Select — native-feeling dropdown.
+ *
+ * Built on Radix Select for a11y (keyboard navigation, type-ahead, ARIA).
+ *
+ * Use cases: settings pickers, kanban filter dropdowns, table column filters.
+ * For autocomplete use Combobox (S3). For chips use MultiSelect (S3).
+ */
+
+export type SelectProps = ComponentPropsWithoutRef<typeof RxSelect.Root>;
+
+export const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(props, ref) {
+  const { children, ...rest } = props;
+  return (
+    <RxSelect.Root {...rest}>
+      {children}
+      {/* Trigger is rendered separately by the consumer via SelectTrigger. */}
+      <span hidden>
+        <RxSelect.Trigger ref={ref} />
+      </span>
+    </RxSelect.Root>
+  );
+});
+
+export interface SelectTriggerProps extends ComponentPropsWithoutRef<typeof RxSelect.Trigger> {
+  placeholder?: string;
+  size?: 'sm' | 'md';
+}
+
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(function SelectTrigger(
+  props,
+  ref,
+) {
+  const { className, placeholder, size = 'md', children, ...rest } = props;
+  return (
+    <RxSelect.Trigger
+      ref={ref}
+      className={cx('v8-select__trigger', className)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 'var(--space-2)',
+        minWidth: 120,
+        height: size === 'sm' ? 28 : 32,
+        padding: '0 var(--space-3)',
+        background: 'var(--input-bg)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-sm)',
+        fontSize: 'var(--fs-13)',
+        color: 'var(--fg)',
+        cursor: 'pointer',
+      }}
+      {...rest}
+    >
+      <RxSelect.Value placeholder={placeholder} />
+      <RxSelect.Icon>
+        <ChevronDown size={14} aria-hidden="true" style={{ color: 'var(--fg-muted)' }} />
+      </RxSelect.Icon>
+      {children}
+    </RxSelect.Trigger>
+  );
+});
+
+export interface SelectContentProps extends ComponentPropsWithoutRef<typeof RxSelect.Content> {
+  children: ReactNode;
+}
+
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(function SelectContent(
+  props,
+  ref,
+) {
+  const { className, children, position = 'popper', ...rest } = props;
+  return (
+    <RxSelect.Portal>
+      <RxSelect.Content
+        ref={ref}
+        position={position}
+        sideOffset={4}
+        className={cx('v8-select__content', className)}
+        style={{
+          background: 'var(--surface-popover)',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--radius)',
+          boxShadow: 'var(--shadow-3)',
+          padding: 'var(--space-1)',
+          minWidth: 'var(--radix-select-trigger-width)',
+          maxHeight: 'var(--radix-select-content-available-height, 320px)',
+          overflow: 'hidden',
+          zIndex: 'var(--z-popover)',
+        }}
+        {...rest}
+      >
+        <RxSelect.ScrollUpButton
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 20,
+            color: 'var(--fg-muted)',
+          }}
+        >
+          <ChevronUp size={14} aria-hidden="true" />
+        </RxSelect.ScrollUpButton>
+        <RxSelect.Viewport>{children}</RxSelect.Viewport>
+        <RxSelect.ScrollDownButton
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 20,
+            color: 'var(--fg-muted)',
+          }}
+        >
+          <ChevronDown size={14} aria-hidden="true" />
+        </RxSelect.ScrollDownButton>
+      </RxSelect.Content>
+    </RxSelect.Portal>
+  );
+});
+
+export interface SelectItemProps extends ComponentPropsWithoutRef<typeof RxSelect.Item> {
+  children: ReactNode;
+}
+
+export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(function SelectItem(props, ref) {
+  const { className, children, ...rest } = props;
+  return (
+    <RxSelect.Item
+      ref={ref}
+      className={cx('v8-select__item', className)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--space-2)',
+        height: 28,
+        padding: '0 var(--space-3) 0 var(--space-6)',
+        borderRadius: 'var(--radius-sm)',
+        fontSize: 'var(--fs-13)',
+        color: 'var(--fg)',
+        cursor: 'pointer',
+        outline: 0,
+        userSelect: 'none',
+        position: 'relative',
+      }}
+      {...rest}
+    >
+      <RxSelect.ItemIndicator
+        style={{
+          position: 'absolute',
+          left: 6,
+          display: 'inline-flex',
+          alignItems: 'center',
+          color: 'var(--accent)',
+        }}
+      >
+        <Check size={14} aria-hidden="true" />
+      </RxSelect.ItemIndicator>
+      <RxSelect.ItemText>{children}</RxSelect.ItemText>
+    </RxSelect.Item>
+  );
+});
+
+export const SelectGroup = RxSelect.Group;
+export const SelectLabel = RxSelect.Label;
+export const SelectSeparator = RxSelect.Separator;

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

@@ -0,0 +1,68 @@
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import * as RxSlider from '@radix-ui/react-slider';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Slider — single or range numeric input.
+ *
+ * Built on Radix Slider for keyboard arrow + home/end handling.
+ */
+export type SliderProps = ComponentPropsWithoutRef<typeof RxSlider.Root>;
+
+export const Slider = forwardRef<HTMLSpanElement, SliderProps>(function Slider(props, ref) {
+  const { className, ...rest } = props;
+  return (
+    <RxSlider.Root
+      ref={ref}
+      className={cx('v8-slider', className)}
+      style={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        userSelect: 'none',
+        touchAction: 'none',
+        width: '100%',
+        height: 20,
+      }}
+      {...rest}
+    >
+      <RxSlider.Track
+        style={{
+          background: 'var(--surface-2)',
+          position: 'relative',
+          flexGrow: 1,
+          borderRadius: 'var(--radius-pill)',
+          height: 4,
+        }}
+      >
+        <RxSlider.Range
+          style={{
+            position: 'absolute',
+            background: 'var(--accent)',
+            borderRadius: 'var(--radius-pill)',
+            height: '100%',
+          }}
+        />
+      </RxSlider.Track>
+      {(Array.isArray(props.value ?? props.defaultValue)
+        ? (props.value ?? props.defaultValue ?? [])
+        : [props.value ?? props.defaultValue ?? 0]
+      ).map((_, i) => (
+        <RxSlider.Thumb
+          key={i}
+          aria-label={props['aria-label'] ?? `Thumb ${i + 1}`}
+          style={{
+            display: 'block',
+            width: 14,
+            height: 14,
+            background: 'var(--fg)',
+            border: '2px solid var(--accent)',
+            borderRadius: 'var(--radius-pill)',
+            cursor: 'grab',
+            boxShadow: 'var(--shadow-1)',
+          }}
+        />
+      ))}
+    </RxSlider.Root>
+  );
+});