@yarcl/react 0.1.0 → 0.2.0

package/src/components/HoverCard.tsx

@@ -1,108 +0,0 @@
-import {
-  autoUpdate,
-  FloatingPortal,
-  safePolygon,
-  useDismiss,
-  useFloating,
-  useFocus,
-  useHover,
-  useInteractions,
-  type Placement,
-} from '@floating-ui/react';
-import { useState, type ReactElement, type ReactNode } from 'react';
-import { cx, paddingClass, radiusClass } from '../classes';
-import { floatingMiddleware, useTrigger } from '../floating';
-import type { Radius, Spacing } from '../types';
-import { useConfig, useDefaults } from '../runtime';
-
-
-/** Props for {@link HoverCard}. */
-export interface HoverCardProps {
-  /** Rich preview content. Can contain links; the pointer can move into the card without closing it. */
-  content: ReactNode;
-  /** A single focusable element, usually a {@link Link}. */
-  children: ReactElement;
-  /**
-   * Preferred side. Flips when there isn't room.
-   * @default 'bottom'
-   */
-  placement?: Placement;
-  /**
-   * Delay before opening, in ms.
-   * @default config.timing.hoverOpenDelay
-   */
-  openDelay?: number;
-  /**
-   * Delay before closing after the pointer leaves, in ms.
-   * @default config.timing.hoverCloseDelay
-   */
-  closeDelay?: number;
-  /**
-   * Inner padding, from the `spacing` config.
-   * @default config.defaults.padding
-   */
-  padding?: Spacing;
-  /**
-   * Corner radius, from the `radii` config.
-   * @default config.defaults.radius
-   */
-  radius?: Radius;
-}
-
-/**
- * A preview card shown on hover or focus, e.g. for a user or a link.
- * Supplementary only: don't put content here that isn't reachable elsewhere.
- *
- * @example
- * ```tsx
- * <HoverCard content={<UserPreview id="ada" />}>
- *   <Link href="/users/ada">@ada</Link>
- * </HoverCard>
- * ```
- */
-export function HoverCard({
-  content,
-  children,
-  placement = 'bottom',
-  openDelay,
-  closeDelay,
-  padding,
-  radius,
-}: HoverCardProps) {
-  const own = useDefaults('HoverCard');
-  const config = useConfig();
-  const delay = { open: openDelay ?? config.timing.hoverOpenDelay, close: closeDelay ?? config.timing.hoverCloseDelay };
-  const [open, setOpen] = useState(false);
-  const { refs, floatingStyles, context } = useFloating({
-    open,
-    onOpenChange: setOpen,
-    placement,
-    transform: false,
-    whileElementsMounted: autoUpdate,
-    middleware: floatingMiddleware({ gap: 8 }),
-  });
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    useHover(context, { delay, handleClose: safePolygon() }),
-    useFocus(context),
-    useDismiss(context),
-  ]);
-  const trigger = useTrigger(children, refs.setReference, getReferenceProps);
-
-  return (
-    <>
-      {trigger}
-      {open && (
-        <FloatingPortal>
-          <div
-            ref={refs.setFloating}
-            style={floatingStyles}
-            className={cx('yarcl-floating yarcl-panel yarcl-hover-card', paddingClass(padding ?? own.padding), radiusClass(radius ?? own.radius))}
-            {...getFloatingProps()}
-          >
-            {content}
-          </div>
-        </FloatingPortal>
-      )}
-    </>
-  );
-}

package/src/components/IconButton.tsx

@@ -1,59 +0,0 @@
-import type { ComponentProps } from 'react';
-import { colorClass, cx, radiusClass, sizeClass, variantClass } from '../classes';
-import type { TokenProps, VariantProps } from '../types';
-import { useButtonGroup } from './ButtonGroup';
-import { Spinner } from './Spinner';
-import { useDefaults } from '../runtime';
-
-
-/** Props for {@link IconButton}. `aria-label` is required because the button has no visible text. */
-export interface IconButtonProps extends Omit<ComponentProps<'button'>, 'color'>, TokenProps, VariantProps {
-  /** Shows a {@link Spinner}, disables the button and sets `aria-busy`. */
-  loading?: boolean;
-  /** Accessible name, announced by screen readers in place of visible text. */
-  'aria-label': string;
-}
-
-/**
- * A square button containing only an icon.
- * Width equals the control height, so it lines up with {@link Button} and {@link Input} of the same size.
- *
- * @example
- * ```tsx
- * <IconButton aria-label="Search" variant="ghost"><SearchIcon /></IconButton>
- * ```
- */
-export function IconButton({
-  size,
-  radius,
-  color,
-  variant,
-  loading,
-  disabled,
-  className,
-  type = 'button',
-  children,
-  ...props
-}: IconButtonProps) {
-  const own = useDefaults('IconButton');
-  const group = useButtonGroup();
-  return (
-    <button
-      type={type}
-      className={cx(
-        'yarcl-button yarcl-icon-button',
-        sizeClass(size ?? group?.size ?? own.size),
-        radiusClass(radius ?? group?.radius ?? own.radius, size ?? group?.size ?? own.size),
-        colorClass(color ?? group?.color ?? own.color),
-        variantClass(variant ?? group?.variant ?? own.variant),
-        className,
-      )}
-      disabled={disabled || loading}
-      aria-busy={loading || undefined}
-      {...props}
-    >
-      {loading && <Spinner label="" aria-hidden="true" />}
-      {!loading && children}
-    </button>
-  );
-}

package/src/components/Inline.tsx

@@ -1,42 +0,0 @@
-import { cx, gapClass } from '../classes';
-import type { LayoutProps } from './Stack';
-import { useDefaults } from '../runtime';
-
-
-/** Props for {@link Inline}. */
-export interface InlineProps extends LayoutProps {
-  /**
-   * Wraps children onto new lines when they don't fit.
-   * @default true
-   */
-  wrap?: boolean;
-}
-
-/**
- * Lays out children horizontally with a gap from the spacing scale. Centers children vertically by default.
- *
- * @example
- * ```tsx
- * <Inline gap="tight" justify="end">
- *   <Button variant="outline">Cancel</Button>
- *   <Button>Save</Button>
- * </Inline>
- * ```
- */
-export function Inline({ as = 'div', gap, align = 'center', justify, wrap = true, className, ...props }: InlineProps) {
-  const own = useDefaults('Inline');
-  const Tag = as as 'div';
-  return (
-    <Tag
-      className={cx(
-        'yarcl-inline',
-        gapClass(gap ?? own.gap),
-        `yarcl-align-${align}`,
-        justify && `yarcl-justify-${justify}`,
-        !wrap && 'yarcl-inline-nowrap',
-        className,
-      )}
-      {...props}
-    />
-  );
-}

package/src/components/Input.tsx

@@ -1,28 +0,0 @@
-import type { ComponentProps } from 'react';
-import { colorClass, cx, radiusClass, sizeClass } from '../classes';
-import { useFieldProps } from '../field-context';
-import type { TokenProps } from '../types';
-import { useDefaults } from '../runtime';
-
-
-/**
- * Props for {@link Input}. Accepts all native `<input>` attributes except
- * `color` and `size`, which are replaced by design tokens.
- */
-export interface InputProps extends Omit<ComponentProps<'input'>, 'color' | 'size'>, TokenProps {}
-
-/**
- * A text input styled from the consumer's design tokens.
- * Shares the size scale with {@link Button}, so both have the same height at the same size.
- * `color` sets the focus border and ring. Inside a {@link Field}, it is labelled and described automatically.
- *
- * @example
- * ```tsx
- * <Input size="lg" placeholder="Email" />
- * ```
- */
-export function Input(props: InputProps) {
-  const own = useDefaults('Input');
-  const { size, radius, color, className, ...rest } = useFieldProps(props);
-  return <input className={cx('yarcl-input', sizeClass(size ?? own.size), radiusClass(radius ?? own.radius, size ?? own.size), colorClass(color ?? own.color), className)} {...rest} />;
-}

package/src/components/Label.tsx

@@ -1,58 +0,0 @@
-import type { ComponentProps } from 'react';
-import { colorClass, cx, typeClass } from '../classes';
-import type { Color, TextStyle } from '../types';
-import { useConfig, useDefaults } from '../runtime';
-
-/** Props for {@link Label}. */
-export interface LabelProps extends Omit<ComponentProps<'label'>, 'color'> {
-  /**
-   * Text style, from the `typography.styles` config.
-   * @default config.defaults.labelStyle
-   */
-  textStyle?: TextStyle;
-  /** Semantic color, from the `colors` config. Uses the default text color when omitted. */
-  color?: Color;
-  /**
-   * Shows a required marker in `defaults.errorColor`. The marker is hidden from screen readers,
-   * so also set `required` (or `aria-required`) on the control.
-   */
-  required?: boolean;
-  /** Uses the muted color, to match a disabled control. */
-  disabled?: boolean;
-}
-
-/**
- * A standalone form label, for layouts {@link Field} doesn't cover: a label beside its control,
- * one label for several controls, or a custom control. Connect it with `htmlFor`, or give it an
- * `id` and point the control's `aria-labelledby` at it.
- *
- * @example
- * ```tsx
- * <Label htmlFor="email" required>Email</Label>
- * <Input id="email" type="email" required />
- * ```
- */
-export function Label({ textStyle, color, required, disabled, className, children, ...props }: LabelProps) {
-  const config = useConfig();
-  const own = useDefaults('Label');
-  const resolvedColor = color ?? own.color;
-  return (
-    <label
-      className={cx(
-        'yarcl-label',
-        typeClass(textStyle ?? own.textStyle ?? config.defaults.labelStyle),
-        resolvedColor && cx('yarcl-label-colored', colorClass(resolvedColor)),
-        disabled && 'yarcl-label-disabled',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      {required && (
-        <span className="yarcl-label-required" aria-hidden="true">
-          {' *'}
-        </span>
-      )}
-    </label>
-  );
-}

package/src/components/Link.tsx

@@ -1,41 +0,0 @@
-import type { ComponentProps } from 'react';
-import { colorClass, cx } from '../classes';
-import type { Color } from '../types';
-import { useDefaults } from '../runtime';
-
-
-/** Props for {@link Link}. Accepts all native `<a>` attributes except `color`. */
-export interface LinkProps extends Omit<ComponentProps<'a'>, 'color'> {
-  /**
-   * Link color, from the `colors` config.
-   * @default config.defaults.color
-   */
-  color?: Color;
-  /**
-   * When to underline. Keep `'always'` for links inside running text, so they don't rely on color alone.
-   * @default 'always'
-   */
-  underline?: 'always' | 'hover' | 'none';
-  /** Opens in a new tab with `rel="noopener noreferrer"`. */
-  external?: boolean;
-}
-
-/**
- * A text link that inherits the surrounding text style.
- *
- * @example
- * ```tsx
- * <Link href="/docs">Read the docs</Link>
- * <Link href="https://example.com" external>Example</Link>
- * ```
- */
-export function Link({ color, underline = 'always', external, className, ...props }: LinkProps) {
-  const own = useDefaults('Link');
-  return (
-    <a
-      className={cx('yarcl-link', `yarcl-link-underline-${underline}`, colorClass(color ?? own.color), className)}
-      {...(external && { target: '_blank', rel: 'noopener noreferrer' })}
-      {...props}
-    />
-  );
-}

package/src/components/Menu.tsx

@@ -1,207 +0,0 @@
-import {
-  autoUpdate,
-  FloatingFocusManager,
-  FloatingList,
-  FloatingPortal,
-  useClick,
-  useDismiss,
-  useFloating,
-  useInteractions,
-  useListItem,
-  useListNavigation,
-  useRole,
-  useTypeahead,
-  type Placement,
-} from '@floating-ui/react';
-import {
-  createContext,
-  useContext,
-  useRef,
-  useState,
-  type ComponentProps,
-  type ReactElement,
-  type ReactNode,
-} from 'react';
-import { colorClass, cx, sizeClass } from '../classes';
-import { floatingMiddleware, useTrigger } from '../floating';
-import { useControllable } from '../hooks';
-import type { Color, Size } from '../types';
-import { useDefaults } from '../runtime';
-
-
-type MenuContextValue = ReturnType<typeof useMenuState>;
-
-const MenuContext = createContext<MenuContextValue | null>(null);
-
-function useMenuContext(component: string) {
-  const context = useContext(MenuContext);
-  if (!context) throw new Error(`yarcl: <${component}> must be inside <Menu>`);
-  return context;
-}
-
-function useMenuState({ open: openProp, defaultOpen = false, onOpenChange, placement = 'bottom-start', size }: MenuProps) {
-  const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
-  const [activeIndex, setActiveIndex] = useState<number | null>(null);
-  const elementsRef = useRef<(HTMLElement | null)[]>([]);
-  const labelsRef = useRef<(string | null)[]>([]);
-
-  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: 'menu' }),
-    useListNavigation(floating.context, {
-      listRef: elementsRef,
-      activeIndex,
-      onNavigate: setActiveIndex,
-      loop: true,
-    }),
-    useTypeahead(floating.context, {
-      listRef: labelsRef,
-      activeIndex,
-      onMatch: open ? setActiveIndex : undefined,
-    }),
-  ]);
-
-  return { open, setOpen, activeIndex, setActiveIndex, elementsRef, labelsRef, size, ...floating, ...interactions };
-}
-
-/** Props for {@link Menu}. */
-export interface MenuProps {
-  /** `Menu.Trigger` and `Menu.Content`. */
-  children?: ReactNode;
-  /** Controlled open state. */
-  open?: boolean;
-  /**
-   * Initial open state when uncontrolled.
-   * @default false
-   */
-  defaultOpen?: boolean;
-  /** Called when the menu opens or closes. */
-  onOpenChange?: (open: boolean) => void;
-  /**
-   * Preferred side. Flips when there isn't room.
-   * @default 'bottom-start'
-   */
-  placement?: Placement;
-  /**
-   * Item size, from the `sizes` config.
-   * @default config.defaults.size
-   */
-  size?: Size;
-}
-
-function MenuRoot(props: MenuProps) {
-  const state = useMenuState(props);
-  return <MenuContext.Provider value={state}>{props.children}</MenuContext.Provider>;
-}
-
-/** Props for `Menu.Trigger`. */
-export interface MenuTriggerProps {
-  /** A single element, usually a {@link Button}. */
-  children: ReactElement;
-}
-
-function MenuTrigger({ children }: MenuTriggerProps) {
-  const { refs, getReferenceProps } = useMenuContext('Menu.Trigger');
-  return useTrigger(children, refs.setReference, getReferenceProps);
-}
-
-/** Props for `Menu.Content`. */
-export interface MenuContentProps extends ComponentProps<'div'> {}
-
-function MenuContent({ className, style, children, ...props }: MenuContentProps) {
-  const own = useDefaults('Menu');
-  const { open, size, refs, floatingStyles, context, getFloatingProps, elementsRef, labelsRef } =
-    useMenuContext('Menu.Content');
-  if (!open) return null;
-  return (
-    <FloatingPortal>
-      <FloatingFocusManager context={context} modal={false} initialFocus={0}>
-        <div
-          ref={refs.setFloating}
-          style={{ ...floatingStyles, ...style }}
-          className={cx('yarcl-floating yarcl-panel yarcl-listbox', sizeClass(size ?? own.size), colorClass(), className)}
-          {...getFloatingProps(props)}
-        >
-          <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
-            {children}
-          </FloatingList>
-        </div>
-      </FloatingFocusManager>
-    </FloatingPortal>
-  );
-}
-
-/** Props for `Menu.Item`. */
-export interface MenuItemProps extends Omit<ComponentProps<'button'>, 'color' | 'onSelect'> {
-  /** Called when the item is chosen by click, Enter or Space. The menu closes afterwards. */
-  onSelect?: () => void;
-  /** Semantic color for the item, e.g. a destructive action. From the `colors` config. */
-  color?: Color;
-  /** Text used for type-to-select. Defaults to `children` when it is a string. */
-  textValue?: string;
-}
-
-function MenuItem({ onSelect, color, textValue, disabled, className, children, ...props }: MenuItemProps) {
-  const { activeIndex, setOpen, getItemProps } = useMenuContext('Menu.Item');
-  const { ref, index } = useListItem({
-    label: disabled ? null : (textValue ?? (typeof children === 'string' ? children : null)),
-  });
-  const active = activeIndex === index;
-  return (
-    <button
-      ref={ref}
-      type="button"
-      role="menuitem"
-      tabIndex={active ? 0 : -1}
-      disabled={disabled}
-      data-active={active || undefined}
-      className={cx('yarcl-option', color && cx('yarcl-option-colored', colorClass(color)), className)}
-      {...getItemProps({
-        ...props,
-        onClick() {
-          onSelect?.();
-          setOpen(false);
-        },
-      })}
-    >
-      {children}
-    </button>
-  );
-}
-
-/** A line between groups of `Menu.Item`s. */
-function MenuSeparator() {
-  return <div role="separator" className="yarcl-listbox-separator" />;
-}
-
-/**
- * A list of actions opened from a trigger. Arrow keys move between items,
- * typing jumps to a matching item, Esc closes.
- *
- * @example
- * ```tsx
- * <Menu>
- *   <Menu.Trigger><Button variant="outline">Actions</Button></Menu.Trigger>
- *   <Menu.Content>
- *     <Menu.Item onSelect={rename}>Rename</Menu.Item>
- *     <Menu.Separator />
- *     <Menu.Item color="danger" onSelect={remove}>Delete</Menu.Item>
- *   </Menu.Content>
- * </Menu>
- * ```
- */
-export const Menu = Object.assign(MenuRoot, {
-  Trigger: MenuTrigger,
-  Content: MenuContent,
-  Item: MenuItem,
-  Separator: MenuSeparator,
-});