@yarcl/react 0.1.0 → 0.2.0

package/src/components/Accordion.tsx

@@ -1,274 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useId,
-  type ComponentProps,
-  type KeyboardEvent,
-  type ReactNode,
-} from 'react';
-import { colorClass, cx, radiusClass, sizeClass } from '../classes';
-import { ChevronIcon } from '../floating';
-import { useControllable } from '../hooks';
-import type { Color, Radius, Size } from '../types';
-import { useDefaults } from '../runtime';
-
-interface AccordionContextValue {
-  open: string[];
-  toggle: (value: string) => void;
-  disabled?: boolean;
-  idFor: (kind: 'trigger' | 'content', value: string) => string;
-}
-
-interface AccordionItemContextValue {
-  value: string;
-  open: boolean;
-  disabled?: boolean;
-}
-
-const AccordionContext = createContext<AccordionContextValue | null>(null);
-const AccordionItemContext = createContext<AccordionItemContextValue | null>(null);
-
-function useAccordionContext(component: string) {
-  const context = useContext(AccordionContext);
-  if (!context) throw new Error(`yarcl: <${component}> must be inside <Accordion>`);
-  return context;
-}
-
-function useItemContext(component: string) {
-  const context = useContext(AccordionItemContext);
-  if (!context) throw new Error(`yarcl: <${component}> must be inside <Accordion.Item>`);
-  return context;
-}
-
-/** Props shared by both forms of {@link AccordionProps}. */
-export interface AccordionBaseProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'color'> {
-  /**
-   * Trigger height, padding and font size, from the `sizes` config.
-   * @default config.defaults.size
-   */
-  size?: Size;
-  /**
-   * Corner radius of the outer frame, from the `radii` config, or `'size'` to match the size.
-   * @default config.defaults.radius
-   */
-  radius?: Radius | 'size';
-  /**
-   * Color of the open item's indicator, from the `colors` config.
-   * @default config.defaults.color
-   */
-  color?: Color;
-  /** Disables every item. */
-  disabled?: boolean;
-  /** `Accordion.Item`s. */
-  children?: ReactNode;
-}
-
-/** Props for {@link Accordion}. `type` decides whether one or many items can be open. */
-export type AccordionProps = AccordionBaseProps &
-  (
-    | {
-        /** One item open at a time. */
-        type: 'single';
-        /** Open item (controlled), or `null` when all are closed. */
-        value?: string | null;
-        /** Initially open item (uncontrolled). */
-        defaultValue?: string | null;
-        /** Called with the open item, or `null` when it closes. */
-        onValueChange?: (value: string | null) => void;
-        /**
-         * Lets the open item close, leaving all closed. When `false`, one item always stays open.
-         * @default true
-         */
-        collapsible?: boolean;
-      }
-    | {
-        /** Any number of items open. */
-        type: 'multiple';
-        /** Open items (controlled). */
-        value?: string[];
-        /** Initially open items (uncontrolled). */
-        defaultValue?: string[];
-        /** Called with all open items. */
-        onValueChange?: (value: string[]) => void;
-        collapsible?: never;
-      }
-  );
-
-const toArray = (value: string | string[] | null | undefined) => (value == null ? [] : Array.isArray(value) ? value : [value]);
-
-function AccordionRoot(props: AccordionProps) {
-  const own = useDefaults('Accordion');
-  const {
-    type,
-    value,
-    defaultValue,
-    onValueChange,
-    collapsible = true,
-    size,
-    radius,
-    color,
-    disabled,
-    className,
-    onKeyDown,
-    ...rest
-  } = props;
-
-  const [open, setOpen] = useControllable<string[]>(
-    value === undefined ? undefined : toArray(value),
-    toArray(defaultValue),
-    (next) =>
-      type === 'multiple'
-        ? (onValueChange as (v: string[]) => void)?.(next)
-        : (onValueChange as (v: string | null) => void)?.(next[0] ?? null),
-  );
-
-  const baseId = useId();
-  const idFor = (kind: 'trigger' | 'content', v: string) => `${baseId}-${kind}-${v.replace(/[^\w-]/g, '_')}`;
-
-  function toggle(item: string) {
-    const on = open.includes(item);
-    if (type === 'multiple') setOpen(on ? open.filter((v) => v !== item) : [...open, item]);
-    else if (!on) setOpen([item]);
-    else if (collapsible) setOpen([]);
-  }
-
-  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
-    onKeyDown?.(event);
-    const root = event.currentTarget;
-    const triggers = [...root.querySelectorAll<HTMLButtonElement>('.yarcl-accordion-trigger:not(:disabled)')].filter(
-      (trigger) => trigger.closest('.yarcl-accordion') === root,
-    );
-    const current = triggers.indexOf(document.activeElement as HTMLButtonElement);
-    if (current === -1) return;
-    const next = {
-      ArrowDown: (current + 1) % triggers.length,
-      ArrowUp: (current - 1 + triggers.length) % triggers.length,
-      Home: 0,
-      End: triggers.length - 1,
-    }[event.key];
-    if (next === undefined) return;
-    event.preventDefault();
-    triggers[next].focus();
-  }
-
-  const resolvedSize = size ?? own.size;
-  return (
-    <AccordionContext.Provider value={{ open, toggle, disabled, idFor }}>
-      <div
-        className={cx(
-          'yarcl-accordion',
-          sizeClass(resolvedSize),
-          radiusClass(radius ?? own.radius, resolvedSize),
-          colorClass(color ?? own.color),
-          className,
-        )}
-        onKeyDown={handleKeyDown}
-        {...rest}
-      />
-    </AccordionContext.Provider>
-  );
-}
-
-/** Props for `Accordion.Item`. */
-export interface AccordionItemProps extends Omit<ComponentProps<'div'>, 'value'> {
-  /** Identifies the item in the accordion's value. */
-  value: string;
-  /** Prevents opening or closing this item. */
-  disabled?: boolean;
-}
-
-function AccordionItem({ value, disabled, className, ...props }: AccordionItemProps) {
-  const context = useAccordionContext('Accordion.Item');
-  const open = context.open.includes(value);
-  const itemDisabled = disabled || context.disabled;
-  return (
-    <AccordionItemContext.Provider value={{ value, open, disabled: itemDisabled }}>
-      <div
-        data-state={open ? 'open' : 'closed'}
-        data-disabled={itemDisabled || undefined}
-        className={cx('yarcl-accordion-item', className)}
-        {...props}
-      />
-    </AccordionItemContext.Provider>
-  );
-}
-
-/** Props for `Accordion.Trigger`. */
-export interface AccordionTriggerProps extends ComponentProps<'button'> {
-  /**
-   * Level of the heading that wraps the button, to fit the page outline.
-   * @default 3
-   */
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-}
-
-function AccordionTrigger({ level = 3, className, onClick, children, ...props }: AccordionTriggerProps) {
-  const context = useAccordionContext('Accordion.Trigger');
-  const item = useItemContext('Accordion.Trigger');
-  const Heading = `h${level}` as 'h3';
-  return (
-    <Heading className="yarcl-accordion-heading">
-      <button
-        type="button"
-        id={context.idFor('trigger', item.value)}
-        aria-controls={context.idFor('content', item.value)}
-        aria-expanded={item.open}
-        disabled={item.disabled}
-        className={cx('yarcl-accordion-trigger', className)}
-        onClick={(event) => {
-          onClick?.(event);
-          if (!event.defaultPrevented) context.toggle(item.value);
-        }}
-        {...props}
-      >
-        <span className="yarcl-accordion-label">{children}</span>
-        <ChevronIcon />
-      </button>
-    </Heading>
-  );
-}
-
-/** Props for `Accordion.Content`. */
-export type AccordionContentProps = ComponentProps<'div'>;
-
-function AccordionContent({ className, children, ...props }: AccordionContentProps) {
-  const context = useAccordionContext('Accordion.Content');
-  const item = useItemContext('Accordion.Content');
-  return (
-    <div
-      role="region"
-      id={context.idFor('content', item.value)}
-      aria-labelledby={context.idFor('trigger', item.value)}
-      data-state={item.open ? 'open' : 'closed'}
-      className={cx('yarcl-accordion-content', className)}
-      {...props}
-    >
-      <div className="yarcl-accordion-body">{children}</div>
-    </div>
-  );
-}
-
-/**
- * Stacked sections that expand and collapse. Each trigger is a button inside a heading;
- * Up and Down move between triggers, Home and End jump to the ends. The panel height animates
- * with the `motion` tokens, and snaps when reduced motion is preferred.
- *
- * @example
- * ```tsx
- * <Accordion type="single" defaultValue="shipping">
- *   <Accordion.Item value="shipping">
- *     <Accordion.Trigger>Shipping</Accordion.Trigger>
- *     <Accordion.Content>Orders ship within two working days.</Accordion.Content>
- *   </Accordion.Item>
- *   <Accordion.Item value="returns">
- *     <Accordion.Trigger>Returns</Accordion.Trigger>
- *     <Accordion.Content>Free returns within 30 days.</Accordion.Content>
- *   </Accordion.Item>
- * </Accordion>
- * ```
- */
-export const Accordion = Object.assign(AccordionRoot, {
-  Item: AccordionItem,
-  Trigger: AccordionTrigger,
-  Content: AccordionContent,
-});

package/src/components/Alert.tsx

@@ -1,85 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import { colorClass, cx, radiusClass, softVariantClass } from '../classes';
-import type { Color, Radius, Variant } from '../types';
-import { useDefaults } from '../runtime';
-
-
-/** Props for {@link Alert}. */
-export interface AlertProps extends Omit<ComponentProps<'div'>, 'color' | 'title'> {
-  /** Bold first line. */
-  title?: ReactNode;
-  /** Icon shown before the text. */
-  icon?: ReactNode;
-  /** Actions shown after the text, e.g. a {@link Button} or {@link Link}. */
-  action?: ReactNode;
-  /**
-   * Semantic color, from the `colors` config.
-   * @default config.defaults.color
-   */
-  color?: Color;
-  /**
-   * Style recipe, from the `variants` config.
-   * @default config.defaults.softVariant
-   */
-  variant?: Variant;
-  /**
-   * Corner radius, from the `radii` config.
-   * @default config.defaults.radius
-   */
-  radius?: Radius;
-  /** Shows a dismiss button. Called when it is pressed; hide the alert in response. */
-  onDismiss?: () => void;
-  /**
-   * Announces the alert when it appears: `'polite'` (`role="status"`) or `'assertive'` (`role="alert"`).
-   * Leave unset for messages present on page load.
-   */
-  live?: 'polite' | 'assertive';
-}
-
-/**
- * An inline message that stays on the page, e.g. a warning above a form.
- * For transient messages use {@link toast}.
- *
- * @example
- * ```tsx
- * <Alert color="warning" title="Trial ends in 3 days" action={<Button size="sm">Upgrade</Button>}>
- *   Add a payment method to keep your projects.
- * </Alert>
- * ```
- */
-export function Alert({
-  title,
-  icon,
-  action,
-  color,
-  variant,
-  radius,
-  onDismiss,
-  live,
-  className,
-  children,
-  ...props
-}: AlertProps) {
-  const own = useDefaults('Alert');
-  return (
-    <div
-      role={live === 'assertive' ? 'alert' : live === 'polite' ? 'status' : undefined}
-      className={cx('yarcl-alert', colorClass(color ?? own.color), softVariantClass(variant ?? own.variant), radiusClass(radius ?? own.radius), className)}
-      {...props}
-    >
-      {icon != null && <span className="yarcl-alert-icon">{icon}</span>}
-      <div className="yarcl-alert-text">
-        {title != null && <div className="yarcl-alert-title">{title}</div>}
-        {children != null && <div className="yarcl-alert-body">{children}</div>}
-      </div>
-      {action != null && <div className="yarcl-alert-action">{action}</div>}
-      {onDismiss && (
-        <button type="button" className="yarcl-alert-dismiss" aria-label="Dismiss" onClick={onDismiss}>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
-            <path d="M6 6l12 12M18 6 6 18" />
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-}

package/src/components/Badge.tsx

@@ -1,79 +0,0 @@
-import type { ComponentProps } from 'react';
-import { colorClass, cx, radiusClass, sizeClass, softVariantClass } from '../classes';
-import type { Color, Radius, Size, Variant } from '../types';
-import { useDefaults } from '../runtime';
-
-
-/** Props for {@link Badge}. */
-export interface BadgeProps extends Omit<ComponentProps<'span'>, 'color'> {
-  /**
-   * Semantic color, from the `colors` config.
-   * @default config.defaults.color
-   */
-  color?: Color;
-  /**
-   * Style recipe, from the `variants` config.
-   * @default config.defaults.softVariant
-   */
-  variant?: Variant;
-  /**
-   * Scales with the size's font size, from the `sizes` config.
-   * @default config.defaults.size
-   */
-  size?: Size;
-  /**
-   * Corner radius, from the `radii` config.
-   * @default config.defaults.radius
-   */
-  radius?: Radius | 'size';
-  /** Shows a remove button, making the badge a removable tag. Called when it is pressed. */
-  onRemove?: () => void;
-  /**
-   * Accessible label of the remove button.
-   * @default 'Remove'
-   */
-  removeLabel?: string;
-}
-
-/**
- * A small label for status, counts or categories. With `onRemove`, a removable tag.
- * Uses the same variant recipes as {@link Button}.
- *
- * @example
- * ```tsx
- * <Badge color="success">Active</Badge>
- * <Badge onRemove={() => removeTag('react')}>react</Badge>
- * ```
- */
-export function Badge({
-  color,
-  variant,
-  size,
-  radius,
-  onRemove,
-  removeLabel = 'Remove',
-  className,
-  children,
-  ...props
-}: BadgeProps) {
-  const own = useDefaults('Badge');
-  return (
-    <span
-      className={cx('yarcl-badge', colorClass(color ?? own.color), softVariantClass(variant ?? own.variant), sizeClass(size ?? own.size), radiusClass(radius ?? own.radius, size ?? own.size), className)}
-      {...props}
-    >
-      {children}
-      {onRemove && <BadgeRemove aria-label={removeLabel} onClick={onRemove} />}
-    </span>
-  );
-}
-
-export function BadgeRemove(props: Omit<ComponentProps<'button'>, 'children'>) {
-  return (
-    <button type="button" className="yarcl-badge-remove" {...props}>
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden="true">
-        <path d="M7 7l10 10M17 7 7 17" />
-      </svg>
-    </button>
-  );
-}

package/src/components/Breadcrumb.tsx

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