@yarcl/react 0.1.0 → 0.2.0

package/src/components/Popover.tsx

@@ -1,140 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

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