@yarcl/react 0.1.0

package/src/components/Popover.tsx

@@ -0,0 +1,140 @@
+import {
+  autoUpdate,
+  FloatingFocusManager,
+  FloatingPortal,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+  type Placement,
+} from '@floating-ui/react';
+import { createContext, useContext, type ComponentProps, type ReactElement, type ReactNode, type RefObject } from 'react';
+import { cx, paddingClass, radiusClass } from '../classes';
+import { floatingMiddleware, useTrigger } from '../floating';
+import { useControllable } from '../hooks';
+import type { Radius, Spacing } from '../types';
+import { useDefaults } from '../runtime';
+
+
+type PopoverContextValue = ReturnType<typeof usePopoverState>;
+
+const PopoverContext = createContext<PopoverContextValue | null>(null);
+
+function usePopoverContext(component: string) {
+  const context = useContext(PopoverContext);
+  if (!context) throw new Error(`yarcl: <${component}> must be inside <Popover>`);
+  return context;
+}
+
+function usePopoverState({ open: openProp, defaultOpen = false, onOpenChange, placement = 'bottom', modal = false }: PopoverProps) {
+  const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
+  const floating = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    transform: false,
+    whileElementsMounted: autoUpdate,
+    middleware: floatingMiddleware(),
+  });
+  const interactions = useInteractions([
+    useClick(floating.context),
+    useDismiss(floating.context),
+    useRole(floating.context, { role: 'dialog' }),
+  ]);
+  return { open, setOpen, modal, ...floating, ...interactions };
+}
+
+/** Props for {@link Popover}. */
+export interface PopoverProps {
+  /** `Popover.Trigger` and `Popover.Content`. */
+  children?: ReactNode;
+  /** Controlled open state. */
+  open?: boolean;
+  /**
+   * Initial open state when uncontrolled.
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /** Called when the popover opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Preferred side. Flips when there isn't room.
+   * @default 'bottom'
+   */
+  placement?: Placement;
+  /**
+   * Traps focus inside the content while open.
+   * @default false
+   */
+  modal?: boolean;
+}
+
+function PopoverRoot(props: PopoverProps) {
+  const state = usePopoverState(props);
+  return <PopoverContext.Provider value={state}>{props.children}</PopoverContext.Provider>;
+}
+
+/** Props for `Popover.Trigger`. */
+export interface PopoverTriggerProps {
+  /** A single element, usually a {@link Button}. It receives the click handler and ARIA attributes. */
+  children: ReactElement;
+}
+
+function PopoverTrigger({ children }: PopoverTriggerProps) {
+  const { refs, getReferenceProps } = usePopoverContext('Popover.Trigger');
+  return useTrigger(children, refs.setReference, getReferenceProps);
+}
+
+/** Props for `Popover.Content`. */
+export interface PopoverContentProps extends ComponentProps<'div'> {
+  /**
+   * Inner padding, from the `spacing` config.
+   * @default config.defaults.padding
+   */
+  padding?: Spacing;
+  /**
+   * Corner radius, from the `radii` config.
+   * @default config.defaults.radius
+   */
+  radius?: Radius;
+  /**
+   * Element focused when the content opens: an index into its tabbable elements, or a ref.
+   * @default 0
+   */
+  initialFocus?: number | RefObject<HTMLElement | null>;
+}
+
+function PopoverContent({ padding, radius, initialFocus, className, style, ...props }: PopoverContentProps) {
+  const own = useDefaults('Popover');
+  const { open, modal, refs, floatingStyles, context, getFloatingProps } = usePopoverContext('Popover.Content');
+  if (!open) return null;
+  return (
+    <FloatingPortal>
+      <FloatingFocusManager context={context} modal={modal} initialFocus={initialFocus}>
+        <div
+          ref={refs.setFloating}
+          style={{ ...floatingStyles, ...style }}
+          className={cx('yarcl-floating yarcl-panel yarcl-popover', paddingClass(padding ?? own.padding), radiusClass(radius ?? own.radius), className)}
+          {...getFloatingProps(props)}
+        />
+      </FloatingFocusManager>
+    </FloatingPortal>
+  );
+}
+
+/**
+ * A floating panel anchored to a trigger, opened by click. Closes on Esc or outside click.
+ * The base for custom floating UI; use {@link Menu}, {@link Select} or {@link Combobox} for lists.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <Popover.Trigger><Button variant="outline">Filters</Button></Popover.Trigger>
+ *   <Popover.Content>
+ *     <Stack><Checkbox>Archived</Checkbox></Stack>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ */
+export const Popover = Object.assign(PopoverRoot, { Trigger: PopoverTrigger, Content: PopoverContent });

package/src/components/Progress.tsx

@@ -0,0 +1,122 @@
+import { useId, type ComponentProps, type CSSProperties, type ReactNode } from 'react';
+import { colorClass, cx, radiusClass, sizeClass } from '../classes';
+import type { Color, Radius, Size } from '../types';
+import { useDefaults } from '../runtime';
+
+/** Props for {@link Progress}. */
+export interface ProgressProps extends Omit<ComponentProps<'div'>, 'color' | 'children'> {
+  /**
+   * Current value, from 0 to `max`. Leave undefined for an indeterminate bar that animates until the work is measurable.
+   * @example
+   * ```tsx
+   * <Progress value={40} label="Uploading" />
+   * ```
+   */
+  value?: number;
+  /**
+   * The value that means complete.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Visible label above the bar. It also names the progress bar for screen readers;
+   * without it, pass `aria-label` or `aria-labelledby`.
+   */
+  label?: ReactNode;
+  /** Shows the value next to the label, as a percentage unless `formatValue` is set. Ignored when indeterminate. */
+  showValue?: boolean;
+  /**
+   * Formats the value for the visible text and `aria-valuetext`.
+   * @example
+   * ```tsx
+   * <Progress value={3} max={8} showValue formatValue={(v, max) => `${v} of ${max} files`} />
+   * ```
+   */
+  formatValue?: (value: number, max: number) => string;
+  /**
+   * Track height, scaled from the size's `iconSize` in the `sizes` config. Also sets the label's font size.
+   * @default config.defaults.size
+   */
+  size?: Size;
+  /**
+   * Bar color, from the `colors` config.
+   * @default config.defaults.color
+   */
+  color?: Color;
+  /**
+   * Corner radius of the track and bar, from the `radii` config.
+   * @default config.defaults.radius
+   */
+  radius?: Radius | 'size';
+}
+
+/**
+ * A progress bar. Determinate when `value` is set, indeterminate otherwise.
+ * Renders `role="progressbar"` with `aria-valuenow`, `aria-valuemin` and `aria-valuemax`
+ * (omitted when indeterminate), named by `label` or `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={64} label="Storage used" showValue color="warning" />
+ * <Progress aria-label="Loading results" />
+ * ```
+ */
+export function Progress({
+  value,
+  max = 100,
+  label,
+  showValue,
+  formatValue,
+  size,
+  color,
+  radius,
+  className,
+  style,
+  ...props
+}: ProgressProps) {
+  const own = useDefaults('Progress');
+  const labelId = useId();
+  const indeterminate = value == null;
+  const limit = max > 0 ? max : 100;
+  const current = indeterminate ? 0 : Math.min(Math.max(value, 0), limit);
+  const text = formatValue ? formatValue(current, limit) : `${Math.round((current / limit) * 100)}%`;
+  const hasLabel = label != null;
+  const named = hasLabel || props['aria-label'] != null || props['aria-labelledby'] != null;
+  const valueVisible = showValue && !indeterminate;
+
+  return (
+    <div
+      role="progressbar"
+      aria-labelledby={hasLabel ? labelId : undefined}
+      aria-label={named ? undefined : 'Progress'}
+      aria-valuemin={indeterminate ? undefined : 0}
+      aria-valuemax={indeterminate ? undefined : limit}
+      aria-valuenow={indeterminate ? undefined : current}
+      aria-valuetext={indeterminate || !formatValue ? undefined : text}
+      data-indeterminate={indeterminate || undefined}
+      className={cx(
+        'yarcl-progress',
+        sizeClass(size ?? own.size),
+        colorClass(color ?? own.color),
+        radiusClass(radius ?? own.radius, size ?? own.size),
+        className,
+      )}
+      style={{ ...(indeterminate ? null : { '--yarcl-progress': current / limit }), ...style } as CSSProperties}
+      {...props}
+    >
+      {(hasLabel || valueVisible) && (
+        <div className="yarcl-progress-header">
+          {hasLabel && (
+            <span id={labelId} className="yarcl-progress-label">
+              {label}
+            </span>
+          )}
+          {valueVisible && <span className="yarcl-progress-value">{text}</span>}
+        </div>
+      )}
+      <div className="yarcl-progress-track">
+        <div className="yarcl-progress-bar" />
+      </div>
+    </div>
+  );
+}

package/src/components/Radio.tsx

@@ -0,0 +1,59 @@
+import type { ChangeEvent, ComponentProps, ReactNode } from 'react';
+import { colorClass, cx, sizeClass } from '../classes';
+import type { Color, Size } from '../types';
+import { useRadioGroup } from './RadioGroup';
+import { useDefaults } from '../runtime';
+
+
+/** Props for {@link Radio}. Accepts all native `<input>` attributes except `type`, `color` and `size`. */
+export interface RadioProps extends Omit<ComponentProps<'input'>, 'type' | 'color' | 'size' | 'children' | 'value'> {
+  /** Label shown next to the radio. */
+  children?: ReactNode;
+  /** Value reported to the {@link RadioGroup} and submitted with forms. */
+  value?: string;
+  /**
+   * Radio size, from the `sizes` config (uses the size's `iconSize`). Inherited from a {@link RadioGroup}.
+   * @default config.defaults.size
+   */
+  size?: Size;
+  /**
+   * Color of the selected radio, from the `colors` config. Inherited from a {@link RadioGroup}.
+   * @default config.defaults.color
+   */
+  color?: Color;
+}
+
+/**
+ * A radio button with an optional label. Place inside a {@link RadioGroup}, or group standalone
+ * radios with the same `name`.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup label="Plan" defaultValue="pro">
+ *   <Radio value="free">Free</Radio>
+ *   <Radio value="pro">Pro</Radio>
+ * </RadioGroup>
+ * ```
+ */
+export function Radio({ children, size, color, value, className, style, onChange, ...props }: RadioProps) {
+  const own = useDefaults('Radio');
+  const group = useRadioGroup();
+  const groupProps = group && {
+    name: group.name,
+    checked: value !== undefined && group.value === value,
+    'aria-invalid': group.invalid || undefined,
+    onChange: (event: ChangeEvent<HTMLInputElement>) => {
+      onChange?.(event);
+      if (event.target.checked && value !== undefined) group.select(value);
+    },
+  };
+  return (
+    <label
+      className={cx('yarcl-radio', sizeClass(size ?? group?.size ?? own.size), colorClass(color ?? group?.color ?? own.color), className)}
+      style={style}
+    >
+      <input type="radio" className="yarcl-radio-input" value={value} onChange={onChange} {...props} {...groupProps} />
+      {children != null && <span className="yarcl-radio-label">{children}</span>}
+    </label>
+  );
+}

package/src/components/RadioGroup.tsx

@@ -0,0 +1,114 @@
+import { createContext, useContext, useId, type ComponentProps, type ReactNode } from 'react';
+import { cx, typeClass } from '../classes';
+import { useControllable } from '../hooks';
+import type { Color, Size } from '../types';
+import { useConfig } from '../runtime';
+
+interface RadioGroupContextValue {
+  name: string;
+  value: string | null;
+  select: (value: string) => void;
+  size?: Size;
+  color?: Color;
+  invalid: boolean;
+  disabled?: boolean;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+export function useRadioGroup() {
+  return useContext(RadioGroupContext);
+}
+
+/** Props for {@link RadioGroup}. */
+export interface RadioGroupProps extends Omit<ComponentProps<'fieldset'>, 'defaultValue' | 'onChange' | 'color'> {
+  /** Visible group label, rendered as the `<legend>`. */
+  label: ReactNode;
+  /** Helper text shown below the options. */
+  description?: ReactNode;
+  /** Error message. Marks the options invalid and styles them with `defaults.errorColor`. */
+  error?: ReactNode;
+  /** Form field name shared by the radios. Generated when omitted. */
+  name?: string;
+  /** Controlled selected value. */
+  value?: string | null;
+  /**
+   * Initially selected value when uncontrolled.
+   * @default null
+   */
+  defaultValue?: string | null;
+  /** Called with the selected radio's `value`. */
+  onValueChange?: (value: string) => void;
+  /** Size of every radio, from the `sizes` config. */
+  size?: Size;
+  /** Color of every radio, from the `colors` config. */
+  color?: Color;
+  /**
+   * Lays the radios out in a row or a column.
+   * @default 'vertical'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /** {@link Radio}s, each with a `value`. */
+  children: ReactNode;
+}
+
+/**
+ * A labelled group of {@link Radio}s. Renders a `<fieldset>` and `<legend>`, shares one `name`,
+ * and tracks the selected value. Radios inside don't need `name` or `checked`.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup label="Plan" defaultValue="pro" orientation="horizontal">
+ *   <Radio value="free">Free</Radio>
+ *   <Radio value="pro">Pro</Radio>
+ * </RadioGroup>
+ * ```
+ */
+export function RadioGroup({
+  label,
+  description,
+  error,
+  name,
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  size,
+  color,
+  orientation = 'vertical',
+  disabled,
+  className,
+  children,
+  ...props
+}: RadioGroupProps) {
+  const config = useConfig();
+  const id = useId();
+  const [value, setValue] = useControllable<string | null>(valueProp, defaultValue, (v) => v != null && onValueChange?.(v));
+  const descriptionId = description != null ? `${id}-description` : undefined;
+  const errorId = error != null && error !== false ? `${id}-error` : undefined;
+
+  return (
+    <RadioGroupContext.Provider
+      value={{ name: name ?? id, value, select: setValue, size, color, invalid: errorId != null, disabled }}
+    >
+      <fieldset
+        className={cx('yarcl-field yarcl-radio-group', className)}
+        aria-describedby={cx(descriptionId, errorId) || undefined}
+        disabled={disabled}
+        {...props}
+      >
+        <legend className={cx('yarcl-field-label', typeClass(config.defaults.labelStyle))}>{label}</legend>
+        <div className={cx('yarcl-radio-group-options', `yarcl-radio-group-${orientation}`)}>{children}</div>
+        {descriptionId && (
+          <p className={cx('yarcl-field-description', typeClass(config.defaults.helperStyle))} id={descriptionId}>
+            {description}
+          </p>
+        )}
+        {errorId && (
+          <p className={cx('yarcl-field-error', typeClass(config.defaults.helperStyle))} id={errorId}>
+            {error}
+          </p>
+        )}
+      </fieldset>
+    </RadioGroupContext.Provider>
+  );
+}

package/src/components/Select.tsx

@@ -0,0 +1,197 @@
+import {
+  autoUpdate,
+  FloatingFocusManager,
+  FloatingPortal,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+} from '@floating-ui/react';
+import { useRef, useState, type ComponentProps, type ReactNode } from 'react';
+import { colorClass, cx, radiusClass, sizeClass } from '../classes';
+import { useFieldProps } from '../field-context';
+import { CheckIcon, ChevronIcon, floatingMiddleware } from '../floating';
+import { useControllable } from '../hooks';
+import type { TokenProps } from '../types';
+import { useDefaults } from '../runtime';
+
+
+/** An option of a {@link Select} or {@link Combobox}. */
+export interface SelectOption<V extends string = string> {
+  /** Value reported by `onValueChange` and submitted with forms. */
+  value: V;
+  /** Text shown to the user. Also used for type-to-select and filtering. */
+  label: string;
+  /** Prevents choosing this option. */
+  disabled?: boolean;
+}
+
+/** Props for {@link Select}. */
+export interface SelectProps<V extends string = string>
+  extends TokenProps,
+    Omit<ComponentProps<'button'>, 'color' | 'value' | 'defaultValue' | 'onChange' | 'children'> {
+  /** The options to choose from. */
+  options: readonly SelectOption<V>[];
+  /** Controlled value. `null` means nothing is selected. */
+  value?: V | null;
+  /**
+   * Initial value when uncontrolled.
+   * @default null
+   */
+  defaultValue?: V | null;
+  /** Called with the chosen option's value. */
+  onValueChange?: (value: V | null) => void;
+  /** Text shown when nothing is selected. */
+  placeholder?: ReactNode;
+  /** Form field name. Renders a hidden input with the value. */
+  name?: string;
+}
+
+/**
+ * Picks one value from a list, like a native `<select>` but styled from the design tokens.
+ * Arrow keys and type-to-select work both open and closed.
+ * Shares the size scale with {@link Input} and {@link Button}. Works inside a {@link Field}.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   placeholder="Choose a plan"
+ *   options={[
+ *     { value: 'free', label: 'Free' },
+ *     { value: 'pro', label: 'Pro' },
+ *   ]}
+ *   onValueChange={setPlan}
+ * />
+ * ```
+ */
+export function Select<V extends string = string>(props: SelectProps<V>) {
+  const own = useDefaults('Select');
+  const {
+    options,
+    value: valueProp,
+    defaultValue = null,
+    onValueChange,
+    placeholder,
+    name,
+    size,
+    radius,
+    color,
+    className,
+    disabled,
+    ...rest
+  } = useFieldProps(props);
+
+  const [value, setValue] = useControllable<V | null>(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const listRef = useRef<(HTMLElement | null)[]>([]);
+  const labelsRef = useRef<(string | null)[]>([]);
+  const typingRef = useRef(false);
+
+  labelsRef.current = options.map((option) => (option.disabled ? null : option.label));
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const selected = selectedIndex >= 0 ? options[selectedIndex] : undefined;
+  const disabledIndices = options.flatMap((option, i) => (option.disabled ? [i] : []));
+
+  function choose(index: number) {
+    const option = options[index];
+    if (!option || option.disabled) return;
+    setValue(option.value);
+    setOpen(false);
+  }
+
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: 'bottom-start',
+    transform: false,
+    whileElementsMounted: autoUpdate,
+    middleware: floatingMiddleware({ gap: 4, matchWidth: true }),
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    useClick(context, { enabled: !disabled }),
+    useDismiss(context),
+    useRole(context, { role: 'select' }),
+    useListNavigation(context, {
+      listRef,
+      activeIndex,
+      selectedIndex: selectedIndex >= 0 ? selectedIndex : null,
+      onNavigate: setActiveIndex,
+      disabledIndices,
+      loop: true,
+    }),
+    useTypeahead(context, {
+      listRef: labelsRef,
+      activeIndex,
+      selectedIndex: selectedIndex >= 0 ? selectedIndex : null,
+      onMatch: open ? setActiveIndex : choose,
+      onTypingChange: (typing) => {
+        typingRef.current = typing;
+      },
+    }),
+  ]);
+
+  return (
+    <>
+      <button
+        ref={refs.setReference}
+        type="button"
+        disabled={disabled}
+        className={cx('yarcl-input yarcl-select', sizeClass(size ?? own.size), radiusClass(radius ?? own.radius, size ?? own.size), colorClass(color ?? own.color), className)}
+        {...getReferenceProps(rest)}
+      >
+        <span className={cx('yarcl-select-value', !selected && 'yarcl-select-placeholder')}>
+          {selected ? selected.label : placeholder}
+        </span>
+        <ChevronIcon />
+      </button>
+      {name && <input type="hidden" name={name} value={value ?? ''} />}
+      {open && (
+        <FloatingPortal>
+          <FloatingFocusManager context={context} modal={false}>
+            <div
+              ref={refs.setFloating}
+              style={floatingStyles}
+              className={cx('yarcl-floating yarcl-panel yarcl-listbox', sizeClass(size ?? own.size), colorClass(color ?? own.color))}
+              {...getFloatingProps()}
+            >
+              {options.map((option, i) => {
+                const isSelected = i === selectedIndex;
+                const isActive = i === activeIndex;
+                return (
+                  <div
+                    key={option.value}
+                    ref={(node) => {
+                      listRef.current[i] = node;
+                    }}
+                    tabIndex={isActive ? 0 : -1}
+                    aria-disabled={option.disabled || undefined}
+                    data-active={isActive || undefined}
+                    className="yarcl-option"
+                    {...getItemProps({
+                      active: isActive,
+                      selected: isSelected,
+                      onClick: () => choose(i),
+                      onKeyDown(event) {
+                        if (event.key === 'Enter' || (event.key === ' ' && !typingRef.current)) {
+                          event.preventDefault();
+                          choose(i);
+                        }
+                      },
+                    })}
+                  >
+                    <span className="yarcl-option-label">{option.label}</span>
+                    {isSelected && <CheckIcon />}
+                  </div>
+                );
+              })}
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      )}
+    </>
+  );
+}