@polderlabs/bizar 7.0.4 → 8.1.0

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

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