@yarcl/react 0.1.0

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,239 @@
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useContext,
+  useRef,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+import { colorClass, cx, typeClass } from '../classes';
+import type { Color, TextStyle } from '../types';
+import { useConfig, useDefaults } from '../runtime';
+import type { LinkProps } from './Link';
+
+interface BreadcrumbItemContextValue {
+  current: boolean;
+  separator: ReactNode;
+  color: Color;
+  underline: NonNullable<LinkProps['underline']>;
+  itemRef?: (node: HTMLElement | null) => void;
+}
+
+const BreadcrumbItemContext = createContext<BreadcrumbItemContextValue | null>(null);
+
+function ChevronIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="m9 6 6 6-6 6" />
+    </svg>
+  );
+}
+
+function Separator({ children }: { children: ReactNode }) {
+  return (
+    <span className="yarcl-breadcrumb-separator" aria-hidden="true">
+      {children}
+    </span>
+  );
+}
+
+/** Props for {@link Breadcrumb}. Accepts all native `<nav>` attributes except `color`. */
+export interface BreadcrumbProps extends Omit<ComponentProps<'nav'>, 'color'> {
+  /** `Breadcrumb.Item`s, from the root to the current page. */
+  children?: ReactNode;
+  /**
+   * Content between items. Hidden from screen readers.
+   * @default a chevron icon
+   * @example
+   * ```tsx
+   * <Breadcrumb separator="/">…</Breadcrumb>
+   * ```
+   */
+  separator?: ReactNode;
+  /** Collapses the middle of the trail into an expandable ellipsis when there are more items than this. Without it, the trail never collapses. */
+  maxItems?: number;
+  /**
+   * Items shown before the ellipsis when collapsed.
+   * @default 1
+   */
+  itemsBeforeCollapse?: number;
+  /**
+   * Items shown after the ellipsis when collapsed.
+   * @default 2
+   */
+  itemsAfterCollapse?: number;
+  /**
+   * Accessible label of the ellipsis button.
+   * @default 'Show all breadcrumbs'
+   */
+  expandLabel?: string;
+  /**
+   * Text style, from the `typography.styles` config.
+   * @default config.defaults.textStyle
+   */
+  textStyle?: TextStyle;
+  /**
+   * Link color, from the `colors` config.
+   * @default config.defaults.color
+   */
+  color?: Color;
+  /**
+   * When to underline the links.
+   * @default 'hover'
+   */
+  underline?: LinkProps['underline'];
+}
+
+function BreadcrumbRoot({
+  children,
+  separator = <ChevronIcon />,
+  maxItems,
+  itemsBeforeCollapse = 1,
+  itemsAfterCollapse = 2,
+  expandLabel = 'Show all breadcrumbs',
+  textStyle,
+  color,
+  underline = 'hover',
+  className,
+  'aria-label': ariaLabel = 'Breadcrumb',
+  ...props
+}: BreadcrumbProps) {
+  const config = useConfig();
+  const own = useDefaults('Breadcrumb');
+  const [expanded, setExpanded] = useState(false);
+  const focusNext = useRef(false);
+  const items = Children.toArray(children).filter(isValidElement);
+  const resolvedColor = color ?? own.color ?? config.defaults.color;
+  const before = Math.max(0, itemsBeforeCollapse);
+  const after = Math.max(1, itemsAfterCollapse);
+  const collapsible = maxItems !== undefined && items.length > maxItems && before + after < items.length;
+  const collapsed = collapsible && !expanded;
+  const hiddenEnd = items.length - after;
+
+  const context = (index: number): BreadcrumbItemContextValue => ({
+    current: index === items.length - 1,
+    separator,
+    color: resolvedColor,
+    underline,
+    itemRef:
+      collapsible && index === before
+        ? (node) => {
+            if (node && focusNext.current) {
+              focusNext.current = false;
+              node.focus();
+            }
+          }
+        : undefined,
+  });
+
+  const rendered: ReactNode[] = [];
+  items.forEach((item, index) => {
+    if (collapsed && index >= before && index < hiddenEnd) {
+      if (index === before) {
+        rendered.push(
+          <li key="yarcl-breadcrumb-ellipsis" className="yarcl-breadcrumb-item">
+            <button
+              type="button"
+              className="yarcl-breadcrumb-ellipsis"
+              aria-label={expandLabel}
+              onClick={() => {
+                focusNext.current = true;
+                setExpanded(true);
+              }}
+            >
+              <span aria-hidden="true">…</span>
+            </button>
+            <Separator>{separator}</Separator>
+          </li>,
+        );
+      }
+      return;
+    }
+    rendered.push(
+      <BreadcrumbItemContext.Provider key={item.key ?? index} value={context(index)}>
+        {item}
+      </BreadcrumbItemContext.Provider>,
+    );
+  });
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={cx(
+        'yarcl-breadcrumb',
+        typeClass(textStyle ?? own.textStyle ?? config.defaults.textStyle),
+        colorClass(resolvedColor),
+        className,
+      )}
+      {...props}
+    >
+      <ol className="yarcl-breadcrumb-list">{rendered}</ol>
+    </nav>
+  );
+}
+
+/** Props for `Breadcrumb.Item`. Accepts all native `<a>` attributes except `color`. */
+export interface BreadcrumbItemProps extends Omit<ComponentProps<'a'>, 'color'> {
+  /** The item's label. */
+  children?: ReactNode;
+  /** Where the item links to. Without it, the item renders as plain text. */
+  href?: string;
+}
+
+function BreadcrumbItem({ href, className, children, ...props }: BreadcrumbItemProps) {
+  const context = useContext(BreadcrumbItemContext);
+  if (!context) throw new Error('yarcl: <Breadcrumb.Item> must be inside <Breadcrumb>');
+  const { current, separator, color, underline, itemRef } = context;
+  return (
+    <li className="yarcl-breadcrumb-item">
+      {href ? (
+        <a
+          ref={itemRef}
+          href={href}
+          aria-current={current ? 'page' : undefined}
+          className={cx(
+            'yarcl-link',
+            current ? 'yarcl-breadcrumb-current yarcl-link-underline-none' : `yarcl-link-underline-${underline}`,
+            colorClass(color),
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </a>
+      ) : (
+        <span
+          ref={itemRef}
+          tabIndex={itemRef ? -1 : undefined}
+          aria-current={current ? 'page' : undefined}
+          className={cx('yarcl-breadcrumb-text', current && 'yarcl-breadcrumb-current', className)}
+          {...(props as ComponentProps<'span'>)}
+        >
+          {children}
+        </span>
+      )}
+      {!current && <Separator>{separator}</Separator>}
+    </li>
+  );
+}
+
+/**
+ * Shows where the current page sits in a hierarchy. The last item is the current page
+ * and gets `aria-current="page"`. Set `maxItems` to collapse long trails into an ellipsis
+ * that expands the full trail.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb maxItems={4}>
+ *   <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+ *   <Breadcrumb.Item href="/projects">Projects</Breadcrumb.Item>
+ *   <Breadcrumb.Item href="/projects/apollo">Apollo</Breadcrumb.Item>
+ *   <Breadcrumb.Item>Settings</Breadcrumb.Item>
+ * </Breadcrumb>
+ * ```
+ */
+export const Breadcrumb = Object.assign(BreadcrumbRoot, {
+  Item: BreadcrumbItem,
+});

package/src/components/Button.tsx

@@ -0,0 +1,58 @@
+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 Button}. Accepts all native `<button>` attributes except `color`. */
+export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color'>, TokenProps, VariantProps {
+  /** Shows a {@link Spinner}, disables the button and sets `aria-busy`. */
+  loading?: boolean;
+}
+
+/**
+ * A button styled from the consumer's design tokens.
+ * Shares the size scale with {@link Input}, so both have the same height at the same size.
+ * Icons (`<svg>`) inside are sized from the size's `iconSize`.
+ *
+ * @example
+ * ```tsx
+ * <Button size="lg" color="danger" variant="outline" radius="pill">Delete</Button>
+ * ```
+ */
+export function Button({
+  size,
+  radius,
+  color,
+  variant,
+  loading,
+  disabled,
+  className,
+  type = 'button',
+  children,
+  ...props
+}: ButtonProps) {
+  const own = useDefaults('Button');
+  const group = useButtonGroup();
+  return (
+    <button
+      type={type}
+      className={cx(
+        'yarcl-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" />}
+      {children}
+    </button>
+  );
+}

package/src/components/ButtonGroup.tsx

@@ -0,0 +1,61 @@
+import { createContext, useContext, type ComponentProps } from 'react';
+import { cx } from '../classes';
+import type { TokenProps, VariantProps } from '../types';
+
+const ButtonGroupContext = createContext<(TokenProps & VariantProps) | null>(null);
+
+export function useButtonGroup() {
+  return useContext(ButtonGroupContext);
+}
+
+/** Props for {@link ButtonGroup}. Token props are passed down to every button inside. */
+export interface ButtonGroupProps extends Omit<ComponentProps<'div'>, 'color'>, TokenProps, VariantProps {
+  /**
+   * Joins the buttons into one control with shared borders.
+   * @default true
+   */
+  attached?: boolean;
+  /**
+   * Direction of the buttons.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+}
+
+/**
+ * Groups related {@link Button}s and {@link IconButton}s. Buttons inherit `size`, `color`,
+ * `variant` and `radius` from the group unless they set their own. Give the group an `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup aria-label="Pagination" variant="outline">
+ *   <Button>Previous</Button>
+ *   <Button>Next</Button>
+ * </ButtonGroup>
+ * ```
+ */
+export function ButtonGroup({
+  size,
+  color,
+  variant,
+  radius,
+  attached = true,
+  orientation = 'horizontal',
+  className,
+  ...props
+}: ButtonGroupProps) {
+  return (
+    <ButtonGroupContext.Provider value={{ size, color, variant, radius }}>
+      <div
+        role="group"
+        className={cx(
+          'yarcl-button-group',
+          `yarcl-button-group-${orientation}`,
+          attached && 'yarcl-button-group-attached',
+          className,
+        )}
+        {...props}
+      />
+    </ButtonGroupContext.Provider>
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,50 @@
+import type { ComponentProps } from 'react';
+import { cx, paddingClass, radiusClass, shadowClass } from '../classes';
+import type { Radius, Shadow, Spacing } from '../types';
+import { useDefaults } from '../runtime';
+
+
+/** Props for {@link Card}. */
+export interface CardProps extends ComponentProps<'div'> {
+  /**
+   * Element to render.
+   * @default 'div'
+   */
+  as?: 'div' | 'section' | 'article' | 'aside';
+  /**
+   * Inner padding, from the `spacing` config.
+   * @default config.defaults.padding
+   */
+  padding?: Spacing;
+  /**
+   * Corner radius, from the `radii` config.
+   * @default config.defaults.radius
+   */
+  radius?: Radius;
+  /** Elevation, from the `shadows` config. No shadow when omitted. */
+  shadow?: Shadow;
+}
+
+/**
+ * A bordered surface for grouping content.
+ *
+ * @example
+ * ```tsx
+ * <Card shadow="md">
+ *   <Stack>
+ *     <Heading level={3}>Plan</Heading>
+ *     <Text muted>Pro, billed yearly</Text>
+ *   </Stack>
+ * </Card>
+ * ```
+ */
+export function Card({ as = 'div', padding, radius, shadow, className, ...props }: CardProps) {
+  const own = useDefaults('Card');
+  const Tag = as as 'div';
+  return (
+    <Tag
+      className={cx('yarcl-card', paddingClass(padding ?? own.padding), radiusClass(radius ?? own.radius), shadowClass(shadow ?? own.shadow), className)}
+      {...props}
+    />
+  );
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useImperativeHandle, useRef, type ComponentProps, type ReactNode } from 'react';
+import { colorClass, cx, sizeClass } from '../classes';
+import { useFieldProps } from '../field-context';
+import type { Color, Size } from '../types';
+import { useDefaults } from '../runtime';
+
+
+/** Props for {@link Checkbox}. Accepts all native `<input>` attributes except `type`, `color` and `size`. */
+export interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type' | 'color' | 'size' | 'children'> {
+  /** Label shown next to the box. */
+  children?: ReactNode;
+  /**
+   * Box size, from the `sizes` config (uses the size's `iconSize`).
+   * @default config.defaults.size
+   */
+  size?: Size;
+  /**
+   * Color of the checked box, from the `colors` config.
+   * @default config.defaults.color
+   */
+  color?: Color;
+  /** Shows a mixed state. Cleared by the browser when the user toggles the box. */
+  indeterminate?: boolean;
+}
+
+/**
+ * A checkbox with an optional label.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox defaultChecked>Remember me</Checkbox>
+ * ```
+ */
+export function Checkbox(props: CheckboxProps) {
+  const own = useDefaults('Checkbox');
+  const { children, size, color, indeterminate = false, className, style, ref, ...rest } = useFieldProps(props);
+  const inner = useRef<HTMLInputElement>(null);
+  useImperativeHandle(ref, () => inner.current!, []);
+  useEffect(() => {
+    if (inner.current) inner.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  return (
+    <label className={cx('yarcl-checkbox', sizeClass(size ?? own.size), colorClass(color ?? own.color), className)} style={style}>
+      <input ref={inner} type="checkbox" className="yarcl-checkbox-input" {...rest} />
+      {children != null && <span className="yarcl-checkbox-label">{children}</span>}
+    </label>
+  );
+}