@yarcl/react 0.1.0 → 0.2.0

package/dist/components/Text.js

@@ -0,0 +1,28 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { colorClass, cx, typeClass } from "../classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Text.tsx
+/**
+* Text in one of the consumer's text styles.
+*
+* @example
+* ```tsx
+* <Text as="p" textStyle="caption" muted>Updated 2 minutes ago</Text>
+* ```
+*/
+function Text({ as = "span", textStyle, color, muted, truncate, className, style, ...props }) {
+	const config = useConfig();
+	const own = useDefaults("Text");
+	const Tag = as;
+	const lines = truncate === true ? 1 : truncate || 0;
+	return /* @__PURE__ */ jsx(Tag, {
+		className: cx("yarcl-text", typeClass(textStyle ?? own.textStyle ?? config.defaults.textStyle), (color ?? own.color) && cx("yarcl-text-colored", colorClass(color ?? own.color)), muted && "yarcl-text-muted", lines === 1 && "yarcl-text-truncate", lines > 1 && "yarcl-text-clamp", className),
+		style: lines > 1 ? {
+			"--yarcl-lines": lines,
+			...style
+		} : style,
+		...props
+	});
+}
+//#endregion
+export { Text };

package/dist/components/Textarea.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+import type { TokenProps } from '../types';
+/** Props for {@link Textarea}. Accepts all native `<textarea>` attributes except `color`. */
+export interface TextareaProps extends Omit<ComponentProps<'textarea'>, 'color'>, TokenProps<'Textarea'> {
+}
+/**
+ * A multi-line text input. Uses the size's font size and padding, and grows from
+ * a minimum of one control height. Inside a {@link Field}, it is labelled and described automatically.
+ *
+ * @example
+ * ```tsx
+ * <Textarea rows={4} placeholder="Message" />
+ * ```
+ */
+export declare function Textarea(props: TextareaProps): import("react").JSX.Element;

package/dist/components/Textarea.js

@@ -0,0 +1,24 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass } from "../classes.js";
+import { useFieldProps } from "../field-context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Textarea.tsx
+/**
+* A multi-line text input. Uses the size's font size and padding, and grows from
+* a minimum of one control height. Inside a {@link Field}, it is labelled and described automatically.
+*
+* @example
+* ```tsx
+* <Textarea rows={4} placeholder="Message" />
+* ```
+*/
+function Textarea(props) {
+	const own = useDefaults("Textarea");
+	const { size, radius, color, className, ...rest } = useFieldProps(props);
+	return /* @__PURE__ */ jsx("textarea", {
+		className: cx("yarcl-textarea", sizeClass(size ?? own.size, "Textarea"), radiusClass(radius ?? own.radius, size ?? own.size), colorClass(color ?? own.color), className),
+		...rest
+	});
+}
+//#endregion
+export { Textarea };

package/dist/components/Toast.d.ts

@@ -0,0 +1,90 @@
+import { type ReactNode } from 'react';
+import type { Color, Radius, Spacing, TextStyle } from '../types';
+/** Options for {@link toast}. */
+export interface ToastOptions {
+    /** Main message. */
+    title: ReactNode;
+    /** Supporting text. */
+    description?: ReactNode;
+    /**
+     * Accent color, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /**
+     * Corner radius, from the `radii` config.
+     * @default config.components.Toast.radius ?? config.defaults.radius
+     */
+    radius?: Radius;
+    /**
+     * Space between the message, action and dismiss button, from the `spacing` config.
+     * @default config.components.Toast.gap ?? config.defaults.gap
+     */
+    gap?: Spacing;
+    /**
+     * Inner spacing, from the `spacing` config.
+     * @default config.components.Toast.padding ?? config.defaults.padding
+     */
+    padding?: Spacing;
+    /**
+     * Typography style, from the `typography.styles` config.
+     * @default config.components.Toast.textStyle ?? config.defaults.labelStyle
+     */
+    textStyle?: TextStyle;
+    /**
+     * Time before it dismisses itself, in ms. Paused while hovered or focused. `0` keeps it until dismissed.
+     * @default config.timing.toastDuration
+     */
+    duration?: number;
+    /** A single action, e.g. Undo. Choosing it dismisses the toast. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Announces immediately (`role="alert"`) instead of politely. Use for errors that need attention. */
+    urgent?: boolean;
+}
+/**
+ * Shows a toast notification. Requires one {@link Toaster} rendered in the app.
+ * Returns the toast's id, for {@link toast.dismiss}.
+ *
+ * @example
+ * ```ts
+ * toast({ title: 'Saved', color: 'success' });
+ * toast({ title: 'Message deleted', action: { label: 'Undo', onClick: restore } });
+ * ```
+ */
+export declare function toast(options: ToastOptions): string;
+export declare namespace toast {
+    var dismiss: (id?: string) => void;
+}
+/** Props for {@link Toaster}. */
+export interface ToasterProps {
+    /**
+     * Screen corner or edge where toasts appear.
+     * @default 'bottom-right'
+     */
+    placement?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+    /**
+     * Maximum toasts shown at once. When exceeded, the oldest are dismissed.
+     * @default 4
+     */
+    limit?: number;
+    /**
+     * Accessible name of the notifications region.
+     * @default 'Notifications'
+     */
+    label?: string;
+}
+/**
+ * Renders toasts created with {@link toast}. Render once, near the app root.
+ * Lives in the browser's top layer, so toasts show above everything. While a modal
+ * {@link Dialog} or {@link Drawer} is open, toasts render inside it so they stay interactive.
+ *
+ * @example
+ * ```tsx
+ * <App />
+ * <Toaster placement="top-right" />
+ * ```
+ */
+export declare function Toaster({ placement, limit, label }: ToasterProps): import("react").JSX.Element;

package/dist/components/Toast.js

@@ -0,0 +1,156 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { colorClass, cx, gapClass, paddingClass, radiusClass, typeClass } from "../classes.js";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/Toast.tsx
+var entries = [];
+var counter = 0;
+var listeners = /* @__PURE__ */ new Set();
+function emit(next) {
+	entries = next;
+	listeners.forEach((listener) => listener());
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+/**
+* Shows a toast notification. Requires one {@link Toaster} rendered in the app.
+* Returns the toast's id, for {@link toast.dismiss}.
+*
+* @example
+* ```ts
+* toast({ title: 'Saved', color: 'success' });
+* toast({ title: 'Message deleted', action: { label: 'Undo', onClick: restore } });
+* ```
+*/
+function toast(options) {
+	const id = `yarcl-toast-${++counter}`;
+	emit([...entries, {
+		id,
+		...options
+	}]);
+	return id;
+}
+/** Dismisses a toast by id, or all toasts when called without one. */
+toast.dismiss = (id) => emit(id ? entries.filter((entry) => entry.id !== id) : []);
+function useModalHost() {
+	const [host, setHost] = useState(null);
+	useEffect(() => {
+		const update = () => {
+			const modals = [...document.querySelectorAll("dialog")].filter((dialog) => dialog.matches(":modal"));
+			setHost(modals.at(-1) ?? null);
+		};
+		const observer = new MutationObserver(update);
+		observer.observe(document.body, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: ["open"]
+		});
+		update();
+		return () => observer.disconnect();
+	}, []);
+	return host;
+}
+/**
+* Renders toasts created with {@link toast}. Render once, near the app root.
+* Lives in the browser's top layer, so toasts show above everything. While a modal
+* {@link Dialog} or {@link Drawer} is open, toasts render inside it so they stay interactive.
+*
+* @example
+* ```tsx
+* <App />
+* <Toaster placement="top-right" />
+* ```
+*/
+function Toaster({ placement = "bottom-right", limit = 4, label = "Notifications" }) {
+	const all = useSyncExternalStore(subscribe, () => entries, () => entries);
+	const visible = all.slice(-limit);
+	const ref = useRef(null);
+	const host = useModalHost();
+	useEffect(() => {
+		if (all.length > limit) emit(all.slice(-limit));
+	}, [all, limit]);
+	useEffect(() => {
+		const region = ref.current;
+		if (!region?.showPopover) return;
+		if (region.matches(":popover-open")) region.hidePopover();
+		if (visible.length > 0) region.showPopover();
+	}, [
+		visible.length,
+		all,
+		host
+	]);
+	const region = /* @__PURE__ */ jsx("section", {
+		ref,
+		popover: "manual",
+		"aria-label": label,
+		className: cx("yarcl-toaster", `yarcl-toaster-${placement}`),
+		children: (placement.startsWith("top") ? [...visible].reverse() : visible).map((entry) => /* @__PURE__ */ jsx(ToastItem, { entry }, entry.id))
+	});
+	return host ? createPortal(region, host) : region;
+}
+function ToastItem({ entry }) {
+	const own = useDefaults("Toast");
+	const config = useConfig();
+	const { id, title, description, color, radius, gap, padding, textStyle, action, urgent } = entry;
+	const duration = entry.duration ?? config.timing.toastDuration;
+	const [paused, setPaused] = useState(false);
+	useEffect(() => {
+		if (paused || duration <= 0) return;
+		const timer = setTimeout(() => toast.dismiss(id), duration);
+		return () => clearTimeout(timer);
+	}, [
+		id,
+		duration,
+		paused
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		role: urgent ? "alert" : "status",
+		className: cx("yarcl-toast", colorClass(color ?? own.color), radiusClass(radius ?? own.radius), gapClass(gap ?? own.gap), paddingClass(padding ?? own.padding), typeClass(textStyle ?? own.textStyle ?? config.defaults.labelStyle)),
+		onMouseEnter: () => setPaused(true),
+		onMouseLeave: () => setPaused(false),
+		onFocus: () => setPaused(true),
+		onBlur: () => setPaused(false),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "yarcl-toast-text",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "yarcl-toast-title",
+					children: title
+				}), description != null && /* @__PURE__ */ jsx("div", {
+					className: "yarcl-toast-description",
+					children: description
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "yarcl-toast-action",
+				onClick: () => {
+					action.onClick();
+					toast.dismiss(id);
+				},
+				children: action.label
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "yarcl-toast-close",
+				"aria-label": "Dismiss",
+				onClick: () => toast.dismiss(id),
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6 6 18" })
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { Toaster, toast };

package/dist/components/ToggleGroup.d.ts

@@ -0,0 +1,79 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Color, ComponentSize, Radius, Variant } from '../types';
+/** Props shared by both forms of {@link ToggleGroupProps}. */
+export interface ToggleGroupBaseProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange' | 'color'> {
+    /** Size of every item, from the `sizes` config. */
+    size?: ComponentSize<'ToggleGroup'>;
+    /** Color of every item, from the `colors` config. */
+    color?: Color;
+    /** Radius of every item, from the `radii` config, or `'size'` to match the item size. */
+    radius?: Radius | 'size';
+    /**
+     * Variant of unselected items, from the `variants` config.
+     * @default config.defaults.softVariant
+     */
+    variant?: Variant;
+    /**
+     * Variant of selected items, from the `variants` config.
+     * @default config.defaults.variant
+     */
+    selectedVariant?: Variant;
+    /**
+     * Joins the items into one segmented control.
+     * @default true
+     */
+    attached?: boolean;
+    /** Disables every item. */
+    disabled?: boolean;
+    /** `ToggleGroup.Item`s. */
+    children?: ReactNode;
+}
+/** Props for {@link ToggleGroup}. `type` decides whether one or many items can be on. */
+export type ToggleGroupProps = ToggleGroupBaseProps & ({
+    /** One item on at a time, like a segmented control. */
+    type: 'single';
+    /** Controlled selected value. */
+    value?: string | null;
+    /** Initially selected value when uncontrolled. */
+    defaultValue?: string | null;
+    /** Called with the selected value, or `null` when the selected item is turned off. */
+    onValueChange?: (value: string | null) => void;
+    /** Prevents turning the selected item off, so one is always on. */
+    required?: boolean;
+} | {
+    /** Any number of items on, like formatting buttons. */
+    type: 'multiple';
+    /** Controlled selected values. */
+    value?: string[];
+    /** Initially selected values when uncontrolled. */
+    defaultValue?: string[];
+    /** Called with all selected values. */
+    onValueChange?: (value: string[]) => void;
+    required?: never;
+});
+declare function ToggleGroupRoot(props: ToggleGroupProps): import("react").JSX.Element;
+/** Props for `ToggleGroup.Item`. */
+export interface ToggleGroupItemProps extends Omit<ComponentProps<'button'>, 'value' | 'color'> {
+    /** Identifies the item in the group's value. */
+    value: string;
+    /** Makes the item square, for icon-only items. Give it an `aria-label`. */
+    icon?: boolean;
+}
+declare function ToggleGroupItem({ value, icon, disabled, className, onClick, ...props }: ToggleGroupItemProps): import("react").JSX.Element;
+/**
+ * A set of toggle buttons. `type="single"` behaves like a segmented control,
+ * `type="multiple"` like formatting buttons. Items use `aria-pressed`; arrow keys move focus.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup type="single" defaultValue="week" aria-label="Range" required>
+ *   <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
+ * </ToggleGroup>
+ * ```
+ */
+export declare const ToggleGroup: typeof ToggleGroupRoot & {
+    Item: typeof ToggleGroupItem;
+};
+export {};

package/dist/components/ToggleGroup.js

@@ -0,0 +1,101 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { cx, sizeClass } from "../classes.js";
+import { Button } from "./Button.js";
+import { useControllable } from "../hooks.js";
+import { createContext, useContext, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ToggleGroup.tsx
+var ToggleGroupContext = createContext(null);
+var toArray = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+function ToggleGroupRoot(props) {
+	const config = useConfig();
+	const own = useDefaults("ToggleGroup");
+	const { type, value, defaultValue, onValueChange, required, size = own.size, color = own.color, radius = own.radius, variant = own.variant ?? config.defaults.softVariant, selectedVariant = own.selectedVariant ?? config.defaults.variant, attached = true, disabled, className, onKeyDown, children, ...rest } = props;
+	const [selected, setSelected] = useControllable(value === void 0 ? void 0 : toArray(value), toArray(defaultValue), (next) => type === "multiple" ? onValueChange?.(next) : onValueChange?.(next[0] ?? null));
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const items = [...ref.current?.querySelectorAll(".yarcl-toggle-item") ?? []];
+		const stop = items.find((item) => item.getAttribute("aria-pressed") === "true" && !item.disabled) ?? items.find((item) => !item.disabled);
+		items.forEach((item) => item.tabIndex = item === stop ? 0 : -1);
+	});
+	function toggle(item) {
+		const on = selected.includes(item);
+		if (type === "multiple") setSelected(on ? selected.filter((v) => v !== item) : [...selected, item]);
+		else if (!on) setSelected([item]);
+		else if (!required) setSelected([]);
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		const items = [...event.currentTarget.querySelectorAll(".yarcl-toggle-item:not(:disabled)")];
+		const current = items.indexOf(document.activeElement);
+		if (current === -1) return;
+		const next = {
+			ArrowRight: (current + 1) % items.length,
+			ArrowDown: (current + 1) % items.length,
+			ArrowLeft: (current - 1 + items.length) % items.length,
+			ArrowUp: (current - 1 + items.length) % items.length,
+			Home: 0,
+			End: items.length - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		items.forEach((item, i) => item.tabIndex = i === next ? 0 : -1);
+		items[next].focus();
+	}
+	return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+		value: {
+			selected,
+			toggle,
+			size,
+			color,
+			radius,
+			variant,
+			selectedVariant,
+			disabled
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			role: "group",
+			className: cx("yarcl-button-group yarcl-button-group-horizontal yarcl-toggle-group", sizeClass(size, "ToggleGroup"), attached && "yarcl-button-group-attached", className),
+			onKeyDown: handleKeyDown,
+			...rest,
+			children
+		})
+	});
+}
+function ToggleGroupItem({ value, icon, disabled, className, onClick, ...props }) {
+	const context = useContext(ToggleGroupContext);
+	if (!context) throw new Error("yarcl: <ToggleGroup.Item> must be inside <ToggleGroup>");
+	const on = context.selected.includes(value);
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-pressed": on,
+		"data-value": value,
+		disabled: disabled || context.disabled,
+		size: context.size,
+		color: context.color,
+		radius: context.radius,
+		variant: on ? context.selectedVariant : context.variant,
+		className: cx("yarcl-toggle-item", icon && "yarcl-icon-button", className),
+		onClick: (event) => {
+			onClick?.(event);
+			context.toggle(value);
+		},
+		...props
+	});
+}
+/**
+* A set of toggle buttons. `type="single"` behaves like a segmented control,
+* `type="multiple"` like formatting buttons. Items use `aria-pressed`; arrow keys move focus.
+*
+* @example
+* ```tsx
+* <ToggleGroup type="single" defaultValue="week" aria-label="Range" required>
+*   <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
+*   <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
+*   <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
+* </ToggleGroup>
+* ```
+*/
+var ToggleGroup = Object.assign(ToggleGroupRoot, { Item: ToggleGroupItem });
+//#endregion
+export { ToggleGroup };

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,46 @@
+import { type Placement } from '@floating-ui/react';
+import { type ReactElement, type ReactNode } from 'react';
+import type { Radius, Spacing, TextStyle } from '../types';
+/** Props for {@link Tooltip}. */
+export interface TooltipProps {
+    /** Short text describing the trigger. Keep it plain; tooltips can't contain interactive content. */
+    content: ReactNode;
+    /** A single focusable element, e.g. an {@link IconButton}. */
+    children: ReactElement;
+    /**
+     * Preferred side. Flips when there isn't room.
+     * @default 'top'
+     */
+    placement?: Placement;
+    /**
+     * Delay before opening on hover, in ms. Opens immediately on keyboard focus.
+     * @default config.timing.tooltipDelay
+     */
+    delay?: number;
+    /**
+     * Corner radius, from the `radii` config.
+     * @default config.components.Tooltip.radius ?? config.defaults.radius
+     */
+    radius?: Radius;
+    /**
+     * Inner spacing, from the `spacing` config.
+     * @default config.components.Tooltip.padding ?? config.defaults.padding
+     */
+    padding?: Spacing;
+    /**
+     * Typography style, from the `typography.styles` config.
+     * @default config.components.Tooltip.textStyle ?? config.defaults.helperStyle
+     */
+    textStyle?: TextStyle;
+}
+/**
+ * A short label shown on hover and keyboard focus.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Search">
+ *   <IconButton aria-label="Search"><SearchIcon /></IconButton>
+ * </Tooltip>
+ * ```
+ */
+export declare function Tooltip({ content, children, placement, delay, radius, padding, textStyle }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip.js

@@ -0,0 +1,62 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { cx, paddingClass, radiusClass, typeClass } from "../classes.js";
+import { floatingMiddleware, useTrigger } from "../floating.js";
+import { useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingArrow, FloatingPortal, autoUpdate, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
+//#region src/components/Tooltip.tsx
+/**
+* A short label shown on hover and keyboard focus.
+*
+* @example
+* ```tsx
+* <Tooltip content="Search">
+*   <IconButton aria-label="Search"><SearchIcon /></IconButton>
+* </Tooltip>
+* ```
+*/
+function Tooltip({ content, children, placement = "top", delay, radius, padding, textStyle }) {
+	const config = useConfig();
+	const own = useDefaults("Tooltip");
+	const [open, setOpen] = useState(false);
+	const arrowRef = useRef(null);
+	const { refs, floatingStyles, context } = useFloating({
+		open,
+		onOpenChange: setOpen,
+		placement,
+		transform: false,
+		whileElementsMounted: autoUpdate,
+		middleware: floatingMiddleware({
+			gap: 8,
+			arrowRef
+		})
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useHover(context, {
+			move: false,
+			delay: {
+				open: delay ?? config.timing.tooltipDelay,
+				close: 0
+			}
+		}),
+		useFocus(context),
+		useDismiss(context),
+		useRole(context, { role: "tooltip" })
+	]);
+	const trigger = useTrigger(children, refs.setReference, getReferenceProps);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [trigger, open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs("div", {
+		ref: refs.setFloating,
+		style: floatingStyles,
+		className: cx("yarcl-floating yarcl-tooltip", radiusClass(radius ?? own.radius), paddingClass(padding ?? own.padding), typeClass(textStyle ?? own.textStyle ?? config.defaults.helperStyle)),
+		...getFloatingProps(),
+		children: [content, /* @__PURE__ */ jsx(FloatingArrow, {
+			ref: arrowRef,
+			context,
+			className: "yarcl-tooltip-arrow",
+			width: 10,
+			height: 5
+		})]
+	}) })] });
+}
+//#endregion
+export { Tooltip };

package/dist/components/VisuallyHidden.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps, ReactNode } from 'react';
+/** Props for {@link VisuallyHidden}. */
+export interface VisuallyHiddenProps extends ComponentProps<'span'> {
+    /** Content exposed to assistive technology. */
+    children?: ReactNode;
+}
+/**
+ * Keeps content available to assistive technology while removing it from the visual layout.
+ *
+ * @example
+ * ```tsx
+ * <Button>
+ *   <SearchIcon />
+ *   <VisuallyHidden>Search</VisuallyHidden>
+ * </Button>
+ * ```
+ */
+export declare function VisuallyHidden({ className, ...props }: VisuallyHiddenProps): import("react").JSX.Element;

package/dist/components/VisuallyHidden.js

@@ -0,0 +1,22 @@
+import { cx } from "../classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/VisuallyHidden.tsx
+/**
+* Keeps content available to assistive technology while removing it from the visual layout.
+*
+* @example
+* ```tsx
+* <Button>
+*   <SearchIcon />
+*   <VisuallyHidden>Search</VisuallyHidden>
+* </Button>
+* ```
+*/
+function VisuallyHidden({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("yarcl-visually-hidden", className),
+		...props
+	});
+}
+//#endregion
+export { VisuallyHidden };

package/dist/contrast.d.ts

@@ -0,0 +1,32 @@
+import type { YarclShape } from './define';
+/** A color combination in a config that falls below the required contrast. */
+export interface ContrastIssue {
+    /** The config path of the text color, e.g. `colors.warning` or `neutrals.muted`. */
+    path: string;
+    /** The color scheme the issue occurs in. */
+    scheme: 'light' | 'dark';
+    /** The contrast ratio, or `null` when it can't be computed (non-hex values). */
+    ratio: number | null;
+    /** A readable description of the problem. */
+    message: string;
+}
+/**
+ * Checks a config for text that doesn't reach a contrast ratio (WCAG AA, 4.5:1, by default)
+ * in light or dark mode. Returns the problems instead of printing them, so you can run it in a
+ * test, a CI step or a script.
+ *
+ * Checks the text drawn on each semantic color (its computed or configured `on`), and the
+ * neutral `text` and `muted` colors on the `bg` and `surface` backgrounds. Colors drawn as text
+ * need no check: their readable shade is computed automatically.
+ *
+ * @example
+ * ```ts
+ * import { checkContrast } from '@yarcl/react/contrast';
+ * import config from './src/yarcl.config';
+ *
+ * test('design system is readable', () => {
+ *   expect(checkContrast(config)).toEqual([]);
+ * });
+ * ```
+ */
+export declare function checkContrast(config: YarclShape, min?: number): ContrastIssue[];