@yarcl/react 0.1.0 → 0.2.0

package/dist/components/NumberInput.js

@@ -0,0 +1,130 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { useFieldProps } from "../field-context.js";
+import { ChevronIcon } from "../floating.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/NumberInput.tsx
+function decimals(n) {
+	const text = String(n);
+	const exp = text.match(/e-(\d+)$/);
+	if (exp) return Number(exp[1]);
+	return text.split(".")[1]?.length ?? 0;
+}
+function parse(text) {
+	const trimmed = text.trim();
+	if (trimmed === "") return null;
+	const n = Number(trimmed);
+	return Number.isFinite(n) ? n : void 0;
+}
+/**
+* A numeric input with increment and decrement buttons, exposed as a `spinbutton`.
+* Arrow keys step by `step`, `PageUp` and `PageDown` by ten steps, `Home` and `End` jump to `min` and `max`.
+* Shares the base size scale with {@link Input}; component size overrides can adjust either one. Works inside a {@link Field}.
+*
+* @example
+* ```tsx
+* <Field label="Guests">
+*   <NumberInput min={1} max={10} defaultValue={2} onValueChange={setGuests} />
+* </Field>
+* ```
+*/
+function NumberInput(props) {
+	const own = useDefaults("NumberInput");
+	const fallbackId = useId();
+	const { value: valueProp, defaultValue = null, onValueChange, min, max, step = 1, incrementLabel = "Increase", decrementLabel = "Decrease", size, radius, color, className, style, id = fallbackId, disabled, readOnly, onBlur, onKeyDown, ...rest } = useFieldProps(props);
+	const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
+	const [draft, setDraft] = useState(null);
+	const clamp = (n) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));
+	const locked = disabled || readOnly;
+	function update(next) {
+		setDraft(null);
+		if (next !== value) setValue(next);
+	}
+	function current() {
+		if (draft === null) return value;
+		const parsed = parse(draft);
+		return parsed === void 0 ? value : parsed === null ? null : clamp(parsed);
+	}
+	function stepBy(amount) {
+		if (locked) return;
+		const base = current();
+		if (base === null) {
+			update(clamp(amount > 0 ? min ?? 0 : max ?? 0));
+			return;
+		}
+		const precision = Math.max(decimals(base), decimals(step));
+		update(clamp(Number((base + amount).toFixed(precision))));
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const action = {
+			ArrowUp: () => stepBy(step),
+			ArrowDown: () => stepBy(-step),
+			PageUp: () => stepBy(step * 10),
+			PageDown: () => stepBy(-step * 10),
+			Home: min === void 0 || locked ? void 0 : () => update(min),
+			End: max === void 0 || locked ? void 0 : () => update(max),
+			Enter: draft === null ? void 0 : () => update(current())
+		}[event.key];
+		if (!action) return;
+		if (event.key !== "Enter") event.preventDefault();
+		action();
+	}
+	function handleBlur(event) {
+		onBlur?.(event);
+		if (draft !== null) update(current());
+	}
+	const shown = current();
+	const canIncrement = !locked && (shown === null || max === void 0 || shown < max);
+	const canDecrement = !locked && (shown === null || min === void 0 || shown > min);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("yarcl-number-input", sizeClass(size ?? own.size, "NumberInput"), radiusClass(radius ?? own.radius, size ?? own.size), colorClass(color ?? own.color), className),
+		style,
+		children: [/* @__PURE__ */ jsx("input", {
+			...rest,
+			id,
+			type: "text",
+			inputMode: "decimal",
+			autoComplete: "off",
+			role: "spinbutton",
+			"aria-valuenow": value ?? void 0,
+			"aria-valuemin": min,
+			"aria-valuemax": max,
+			className: "yarcl-input yarcl-number-input-field",
+			value: draft ?? (value === null ? "" : String(value)),
+			disabled,
+			readOnly,
+			onChange: (event) => setDraft(event.target.value),
+			onKeyDown: handleKeyDown,
+			onBlur: handleBlur
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "yarcl-number-input-steppers",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				className: "yarcl-number-input-stepper yarcl-number-input-increment",
+				"aria-label": incrementLabel,
+				"aria-controls": id,
+				disabled: !canIncrement,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => stepBy(step),
+				children: /* @__PURE__ */ jsx(ChevronIcon, {})
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				className: "yarcl-number-input-stepper yarcl-number-input-decrement",
+				"aria-label": decrementLabel,
+				"aria-controls": id,
+				disabled: !canDecrement,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => stepBy(-step),
+				children: /* @__PURE__ */ jsx(ChevronIcon, {})
+			})]
+		})]
+	});
+}
+//#endregion
+export { NumberInput };

package/dist/components/Pagination.d.ts

@@ -0,0 +1,86 @@
+import type { ComponentProps } from 'react';
+import type { Color, ComponentSize, Radius, Variant } from '../types';
+/** Props for {@link Pagination}. */
+export interface PaginationProps extends Omit<ComponentProps<'nav'>, 'color' | 'onChange'> {
+    /**
+     * Total number of pages.
+     * @example
+     * ```tsx
+     * <Pagination count={Math.ceil(total / perPage)} />
+     * ```
+     */
+    count: number;
+    /** Controlled current page, starting at 1. */
+    page?: number;
+    /**
+     * Initial page when uncontrolled.
+     * @default 1
+     */
+    defaultPage?: number;
+    /** Called with the new page when the user picks one. */
+    onPageChange?: (page: number) => void;
+    /**
+     * Pages shown on each side of the current page.
+     * @default 1
+     */
+    siblings?: number;
+    /**
+     * Pages always shown at the start and end.
+     * @default 1
+     */
+    boundaries?: number;
+    /** Size of every button, from the `sizes` config. */
+    size?: ComponentSize<'Pagination'>;
+    /** Color of every button, from the `colors` config. */
+    color?: Color;
+    /** Radius of every button, from the `radii` config, or `'size'` to match the button size. */
+    radius?: Radius | 'size';
+    /**
+     * Variant of the other pages and the previous and next buttons, from the `variants` config.
+     * @default config.defaults.softVariant
+     */
+    variant?: Variant;
+    /**
+     * Variant of the current page, from the `variants` config.
+     * @default config.defaults.variant
+     */
+    selectedVariant?: Variant;
+    /**
+     * Joins the buttons into one control with shared borders.
+     * @default false
+     */
+    attached?: boolean;
+    /** Disables every button. */
+    disabled?: boolean;
+    /**
+     * Accessible name of the navigation landmark.
+     * @default 'Pagination'
+     */
+    'aria-label'?: string;
+    /**
+     * Accessible name of the previous button.
+     * @default 'Previous page'
+     */
+    previousLabel?: string;
+    /**
+     * Accessible name of the next button.
+     * @default 'Next page'
+     */
+    nextLabel?: string;
+    /**
+     * Accessible name of each page button.
+     * @default (page) => `Page ${page}`
+     */
+    pageLabel?: (page: number) => string;
+}
+/**
+ * Navigation between pages of results: previous and next buttons, the pages around the current one,
+ * and the first and last pages with an ellipsis for the gaps. Renders a `<nav>` landmark; the current
+ * page has `aria-current="page"`. Arrow keys, <kbd>Home</kbd> and <kbd>End</kbd> move focus between buttons.
+ *
+ * @example
+ * ```tsx
+ * <Pagination count={20} page={page} onPageChange={setPage} aria-label="Search results" />
+ * ```
+ */
+export declare function Pagination({ count, page, defaultPage, onPageChange, siblings, boundaries, size, color, radius, variant, selectedVariant, attached, disabled, previousLabel, nextLabel, pageLabel, 'aria-label': ariaLabel, className, onKeyDown, ...props }: PaginationProps): import("react").JSX.Element;

package/dist/components/Pagination.js

@@ -0,0 +1,119 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass, variantClass } from "../classes.js";
+import { Button } from "./Button.js";
+import { useControllable } from "../hooks.js";
+import { IconButton } from "./IconButton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Pagination.tsx
+var range = (start, end) => Array.from({ length: Math.max(0, end - start + 1) }, (_, i) => start + i);
+function pageItems(page, count, siblings, boundaries) {
+	const startPages = range(1, Math.min(boundaries, count));
+	const endPages = range(Math.max(count - boundaries + 1, boundaries + 1), count);
+	const siblingsStart = Math.max(Math.min(page - siblings, count - boundaries - siblings * 2 - 1), boundaries + 2);
+	const siblingsEnd = Math.min(Math.max(page + siblings, boundaries + siblings * 2 + 2), count - boundaries - 1);
+	const items = [...startPages];
+	if (siblingsStart > boundaries + 2) items.push("start-ellipsis");
+	else if (boundaries + 1 < count - boundaries) items.push(boundaries + 1);
+	items.push(...range(siblingsStart, siblingsEnd));
+	if (siblingsEnd < count - boundaries - 1) items.push("end-ellipsis");
+	else if (count - boundaries > boundaries) items.push(count - boundaries);
+	items.push(...endPages);
+	return items.filter((item, i) => typeof item !== "number" || item >= 1 && item <= count && items.indexOf(item) === i);
+}
+var Chevron = ({ d }) => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d })
+});
+/**
+* Navigation between pages of results: previous and next buttons, the pages around the current one,
+* and the first and last pages with an ellipsis for the gaps. Renders a `<nav>` landmark; the current
+* page has `aria-current="page"`. Arrow keys, <kbd>Home</kbd> and <kbd>End</kbd> move focus between buttons.
+*
+* @example
+* ```tsx
+* <Pagination count={20} page={page} onPageChange={setPage} aria-label="Search results" />
+* ```
+*/
+function Pagination({ count, page, defaultPage = 1, onPageChange, siblings = 1, boundaries = 1, size, color, radius, variant, selectedVariant, attached = false, disabled, previousLabel = "Previous page", nextLabel = "Next page", pageLabel = (n) => `Page ${n}`, "aria-label": ariaLabel = "Pagination", className, onKeyDown, ...props }) {
+	const config = useConfig();
+	const own = useDefaults("Pagination");
+	const resolvedSize = size ?? own.size ?? config.defaults.size;
+	const resolvedRadius = radius ?? own.radius ?? config.defaults.radius;
+	const resolvedColor = color ?? own.color ?? config.defaults.color;
+	const resolvedVariant = variant ?? own.variant ?? config.defaults.softVariant;
+	const resolvedSelected = selectedVariant ?? own.selectedVariant ?? config.defaults.variant;
+	const total = Math.max(0, Math.floor(count));
+	const [current, setCurrent] = useControllable(page, defaultPage, onPageChange);
+	const active = Math.min(Math.max(1, current), Math.max(1, total));
+	const items = pageItems(active, total, Math.max(0, siblings), Math.max(0, boundaries));
+	const go = (next) => {
+		if (disabled || next === active || next < 1 || next > total) return;
+		setCurrent(next);
+	};
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		const buttons = [...event.currentTarget.querySelectorAll("button:not(:disabled)")];
+		const index = buttons.indexOf(document.activeElement);
+		if (index === -1) return;
+		const next = {
+			ArrowRight: Math.min(index + 1, buttons.length - 1),
+			ArrowLeft: Math.max(index - 1, 0),
+			Home: 0,
+			End: buttons.length - 1
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		buttons[next].focus();
+	}
+	const shared = {
+		size: resolvedSize,
+		radius: resolvedRadius,
+		color: resolvedColor,
+		disabled
+	};
+	const edge = (label, target, d) => {
+		const unavailable = target < 1 || target > total;
+		return /* @__PURE__ */ jsx(IconButton, {
+			...shared,
+			variant: resolvedVariant,
+			"aria-label": label,
+			"aria-disabled": unavailable || void 0,
+			onClick: () => go(target),
+			children: /* @__PURE__ */ jsx(Chevron, { d })
+		});
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": ariaLabel,
+		className: cx("yarcl-pagination", sizeClass(resolvedSize, "Pagination"), className),
+		onKeyDown: handleKeyDown,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx("yarcl-button-group yarcl-button-group-horizontal", attached && "yarcl-button-group-attached"),
+			children: [
+				edge(previousLabel, active - 1, "m15 18-6-6 6-6"),
+				items.map((item) => typeof item === "number" ? /* @__PURE__ */ jsx(Button, {
+					...shared,
+					variant: item === active ? resolvedSelected : resolvedVariant,
+					className: "yarcl-pagination-page",
+					"aria-label": pageLabel(item),
+					"aria-current": item === active ? "page" : void 0,
+					onClick: () => go(item),
+					children: item
+				}, item) : /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cx("yarcl-button yarcl-pagination-ellipsis", sizeClass(resolvedSize, "Pagination"), radiusClass(resolvedRadius, resolvedSize), colorClass(resolvedColor), variantClass(resolvedVariant)),
+					children: "…"
+				}, item)),
+				edge(nextLabel, active + 1, "m9 18 6-6-6-6")
+			]
+		})
+	});
+}
+//#endregion
+export { Pagination };

package/dist/components/Popover.d.ts

@@ -0,0 +1,72 @@
+import { type Placement } from '@floating-ui/react';
+import { type ComponentProps, type ReactElement, type ReactNode, type RefObject } from 'react';
+import type { Radius, Spacing } from '../types';
+/** Props for {@link Popover}. */
+export interface PopoverProps {
+    /** `Popover.Trigger` and `Popover.Content`. */
+    children?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /**
+     * Initial open state when uncontrolled.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the popover opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Preferred side. Flips when there isn't room.
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /**
+     * Traps focus inside the content while open.
+     * @default false
+     */
+    modal?: boolean;
+}
+declare function PopoverRoot(props: PopoverProps): import("react").JSX.Element;
+/** Props for `Popover.Trigger`. */
+export interface PopoverTriggerProps {
+    /** A single element, usually a {@link Button}. It receives the click handler and ARIA attributes. */
+    children: ReactElement;
+}
+declare function PopoverTrigger({ children }: PopoverTriggerProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Props for `Popover.Content`. */
+export interface PopoverContentProps extends ComponentProps<'div'> {
+    /**
+     * Inner padding, from the `spacing` config.
+     * @default config.defaults.padding
+     */
+    padding?: Spacing;
+    /**
+     * Corner radius, from the `radii` config.
+     * @default config.defaults.radius
+     */
+    radius?: Radius;
+    /**
+     * Element focused when the content opens: an index into its tabbable elements, or a ref.
+     * @default 0
+     */
+    initialFocus?: number | RefObject<HTMLElement | null>;
+}
+declare function PopoverContent({ padding, radius, initialFocus, className, style, ...props }: PopoverContentProps): import("react").JSX.Element | null;
+/**
+ * A floating panel anchored to a trigger, opened by click. Closes on Esc or outside click.
+ * The base for custom floating UI; use {@link Menu}, {@link Select} or {@link Combobox} for lists.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <Popover.Trigger><Button variant="outline">Filters</Button></Popover.Trigger>
+ *   <Popover.Content>
+ *     <Stack><Checkbox>Archived</Checkbox></Stack>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ */
+export declare const Popover: typeof PopoverRoot & {
+    Trigger: typeof PopoverTrigger;
+    Content: typeof PopoverContent;
+};
+export {};

package/dist/components/Popover.js

@@ -0,0 +1,87 @@
+import { useDefaults } from "../runtime.js";
+import { cx, paddingClass, radiusClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { floatingMiddleware, useTrigger } from "../floating.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal, autoUpdate, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+//#region src/components/Popover.tsx
+var PopoverContext = createContext(null);
+function usePopoverContext(component) {
+	const context = useContext(PopoverContext);
+	if (!context) throw new Error(`yarcl: <${component}> must be inside <Popover>`);
+	return context;
+}
+function usePopoverState({ open: openProp, defaultOpen = false, onOpenChange, placement = "bottom", modal = false }) {
+	const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
+	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: "dialog" })
+	]);
+	return {
+		open,
+		setOpen,
+		modal,
+		...floating,
+		...interactions
+	};
+}
+function PopoverRoot(props) {
+	const state = usePopoverState(props);
+	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+		value: state,
+		children: props.children
+	});
+}
+function PopoverTrigger({ children }) {
+	const { refs, getReferenceProps } = usePopoverContext("Popover.Trigger");
+	return useTrigger(children, refs.setReference, getReferenceProps);
+}
+function PopoverContent({ padding, radius, initialFocus, className, style, ...props }) {
+	const own = useDefaults("Popover");
+	const { open, modal, refs, floatingStyles, context, getFloatingProps } = usePopoverContext("Popover.Content");
+	if (!open) return null;
+	return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+		context,
+		modal,
+		initialFocus,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: refs.setFloating,
+			style: {
+				...floatingStyles,
+				...style
+			},
+			className: cx("yarcl-floating yarcl-panel yarcl-popover", paddingClass(padding ?? own.padding), radiusClass(radius ?? own.radius), className),
+			...getFloatingProps(props)
+		})
+	}) });
+}
+/**
+* A floating panel anchored to a trigger, opened by click. Closes on Esc or outside click.
+* The base for custom floating UI; use {@link Menu}, {@link Select} or {@link Combobox} for lists.
+*
+* @example
+* ```tsx
+* <Popover>
+*   <Popover.Trigger><Button variant="outline">Filters</Button></Popover.Trigger>
+*   <Popover.Content>
+*     <Stack><Checkbox>Archived</Checkbox></Stack>
+*   </Popover.Content>
+* </Popover>
+* ```
+*/
+var Popover = Object.assign(PopoverRoot, {
+	Trigger: PopoverTrigger,
+	Content: PopoverContent
+});
+//#endregion
+export { Popover };

package/dist/components/Progress.d.ts

@@ -0,0 +1,60 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Color, ComponentSize, Radius } from '../types';
+/** Props for {@link Progress}. */
+export interface ProgressProps extends Omit<ComponentProps<'div'>, 'color' | 'children'> {
+    /**
+     * Current value, from 0 to `max`. Leave undefined for an indeterminate bar that animates until the work is measurable.
+     * @example
+     * ```tsx
+     * <Progress value={40} label="Uploading" />
+     * ```
+     */
+    value?: number;
+    /**
+     * The value that means complete.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Visible label above the bar. It also names the progress bar for screen readers;
+     * without it, pass `aria-label` or `aria-labelledby`.
+     */
+    label?: ReactNode;
+    /** Shows the value next to the label, as a percentage unless `formatValue` is set. Ignored when indeterminate. */
+    showValue?: boolean;
+    /**
+     * Formats the value for the visible text and `aria-valuetext`.
+     * @example
+     * ```tsx
+     * <Progress value={3} max={8} showValue formatValue={(v, max) => `${v} of ${max} files`} />
+     * ```
+     */
+    formatValue?: (value: number, max: number) => string;
+    /**
+     * Track height, scaled from the size's `iconSize` in the `sizes` config. Also sets the label's font size.
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'Progress'>;
+    /**
+     * Bar color, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /**
+     * Corner radius of the track and bar, from the `radii` config.
+     * @default config.defaults.radius
+     */
+    radius?: Radius | 'size';
+}
+/**
+ * A progress bar. Determinate when `value` is set, indeterminate otherwise.
+ * Renders `role="progressbar"` with `aria-valuenow`, `aria-valuemin` and `aria-valuemax`
+ * (omitted when indeterminate), named by `label` or `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={64} label="Storage used" showValue color="warning" />
+ * <Progress aria-label="Loading results" />
+ * ```
+ */
+export declare function Progress({ value, max, label, showValue, formatValue, size, color, radius, className, style, ...props }: ProgressProps): import("react").JSX.Element;

package/dist/components/Progress.js

@@ -0,0 +1,59 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass } from "../classes.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Progress.tsx
+/**
+* A progress bar. Determinate when `value` is set, indeterminate otherwise.
+* Renders `role="progressbar"` with `aria-valuenow`, `aria-valuemin` and `aria-valuemax`
+* (omitted when indeterminate), named by `label` or `aria-label`.
+*
+* @example
+* ```tsx
+* <Progress value={64} label="Storage used" showValue color="warning" />
+* <Progress aria-label="Loading results" />
+* ```
+*/
+function Progress({ value, max = 100, label, showValue, formatValue, size, color, radius, className, style, ...props }) {
+	const own = useDefaults("Progress");
+	const labelId = useId();
+	const indeterminate = value == null;
+	const limit = max > 0 ? max : 100;
+	const current = indeterminate ? 0 : Math.min(Math.max(value, 0), limit);
+	const text = formatValue ? formatValue(current, limit) : `${Math.round(current / limit * 100)}%`;
+	const hasLabel = label != null;
+	const named = hasLabel || props["aria-label"] != null || props["aria-labelledby"] != null;
+	const valueVisible = showValue && !indeterminate;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "progressbar",
+		"aria-labelledby": hasLabel ? labelId : void 0,
+		"aria-label": named ? void 0 : "Progress",
+		"aria-valuemin": indeterminate ? void 0 : 0,
+		"aria-valuemax": indeterminate ? void 0 : limit,
+		"aria-valuenow": indeterminate ? void 0 : current,
+		"aria-valuetext": indeterminate || !formatValue ? void 0 : text,
+		"data-indeterminate": indeterminate || void 0,
+		className: cx("yarcl-progress", sizeClass(size ?? own.size, "Progress"), colorClass(color ?? own.color), radiusClass(radius ?? own.radius, size ?? own.size), className),
+		style: {
+			...indeterminate ? null : { "--yarcl-progress": current / limit },
+			...style
+		},
+		...props,
+		children: [(hasLabel || valueVisible) && /* @__PURE__ */ jsxs("div", {
+			className: "yarcl-progress-header",
+			children: [hasLabel && /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: "yarcl-progress-label",
+				children: label
+			}), valueVisible && /* @__PURE__ */ jsx("span", {
+				className: "yarcl-progress-value",
+				children: text
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "yarcl-progress-track",
+			children: /* @__PURE__ */ jsx("div", { className: "yarcl-progress-bar" })
+		})]
+	});
+}
+//#endregion
+export { Progress };

package/dist/components/Radio.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { Color, ComponentSize } from '../types';
+/** Props for {@link Radio}. Accepts all native `<input>` attributes except `type`, `color` and `size`. */
+export interface RadioProps extends Omit<ComponentProps<'input'>, 'type' | 'color' | 'size' | 'children' | 'value'> {
+    /** Label shown next to the radio. */
+    children?: ReactNode;
+    /** Value reported to the {@link RadioGroup} and submitted with forms. */
+    value?: string;
+    /**
+     * Radio size, from the `sizes` config (uses the size's `iconSize`). Inherited from a {@link RadioGroup}.
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'Radio'>;
+    /**
+     * Color of the selected radio, from the `colors` config. Inherited from a {@link RadioGroup}.
+     * @default config.defaults.color
+     */
+    color?: Color;
+}
+/**
+ * A radio button with an optional label. Place inside a {@link RadioGroup}, or group standalone
+ * radios with the same `name`.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup label="Plan" defaultValue="pro">
+ *   <Radio value="free">Free</Radio>
+ *   <Radio value="pro">Pro</Radio>
+ * </RadioGroup>
+ * ```
+ */
+export declare function Radio({ children, size, color, value, className, style, onChange, ...props }: RadioProps): import("react").JSX.Element;