@yarcl/react 0.1.0

package/src/color.ts

@@ -0,0 +1,48 @@
+type Rgb = [number, number, number];
+
+export function parseHex(value: string): Rgb | null {
+  const hex = value.trim().replace(/^#/, '');
+  if (!/^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex)) return null;
+  const full = hex.length === 3 ? [...hex].map((c) => c + c).join('') : hex;
+  return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16)) as Rgb;
+}
+
+function luminance([r, g, b]: Rgb): number {
+  const [lr, lg, lb] = [r, g, b].map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+}
+
+export function contrast(a: Rgb, b: Rgb): number {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+const WHITE: Rgb = [255, 255, 255];
+const BLACK: Rgb = [0, 0, 0];
+
+export function mix(a: Rgb, b: Rgb, amount: number): Rgb {
+  return a.map((channel, i) => Math.round(channel + (b[i] - channel) * amount)) as Rgb;
+}
+
+export function toHex(rgb: Rgb): string {
+  return `#${rgb.map((c) => c.toString(16).padStart(2, '0')).join('')}`;
+}
+
+/**
+ * The color, mixed toward `toward` in small steps until it reaches `min` contrast
+ * against every background. Returns the color unchanged when it already passes.
+ */
+export function readableText(color: Rgb, backgrounds: Rgb[], toward: Rgb, min: number): Rgb {
+  for (let step = 0; step <= 20; step++) {
+    const candidate = mix(color, toward, step / 20);
+    if (backgrounds.every((bg) => contrast(candidate, bg) >= min)) return candidate;
+  }
+  return toward;
+}
+
+export function readableOn(background: Rgb): string {
+  return contrast(background, WHITE) >= contrast(background, BLACK) ? '#ffffff' : '#000000';
+}

package/src/components/Accordion.tsx

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

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

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