@yarcl/react 0.1.0 → 0.2.0

package/dist/components/Radio.js

@@ -0,0 +1,47 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, sizeClass } from "../classes.js";
+import { useRadioGroup } from "./RadioGroup.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Radio.tsx
+/**
+* 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>
+* ```
+*/
+function Radio({ children, size, color, value, className, style, onChange, ...props }) {
+	const own = useDefaults("Radio");
+	const group = useRadioGroup();
+	const groupProps = group && {
+		name: group.name,
+		checked: value !== void 0 && group.value === value,
+		"aria-invalid": group.invalid || void 0,
+		onChange: (event) => {
+			onChange?.(event);
+			if (event.target.checked && value !== void 0) group.select(value);
+		}
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx("yarcl-radio", sizeClass(size ?? group?.size ?? own.size, "Radio"), colorClass(color ?? group?.color ?? own.color), className),
+		style,
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "radio",
+			className: "yarcl-radio-input",
+			value,
+			onChange,
+			...props,
+			...groupProps
+		}), children != null && /* @__PURE__ */ jsx("span", {
+			className: "yarcl-radio-label",
+			children
+		})]
+	});
+}
+//#endregion
+export { Radio };

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,57 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Color, ComponentSize, Size } from '../types';
+interface RadioGroupContextValue {
+    name: string;
+    value: string | null;
+    select: (value: string) => void;
+    size?: Size;
+    color?: Color;
+    invalid: boolean;
+    disabled?: boolean;
+}
+export declare function useRadioGroup(): RadioGroupContextValue | null;
+/** Props for {@link RadioGroup}. */
+export interface RadioGroupProps extends Omit<ComponentProps<'fieldset'>, 'defaultValue' | 'onChange' | 'color'> {
+    /** Visible group label, rendered as the `<legend>`. */
+    label: ReactNode;
+    /** Helper text shown below the options. */
+    description?: ReactNode;
+    /** Error message. Marks the options invalid and styles them with `defaults.errorColor`. */
+    error?: ReactNode;
+    /** Form field name shared by the radios. Generated when omitted. */
+    name?: string;
+    /** Controlled selected value. */
+    value?: string | null;
+    /**
+     * Initially selected value when uncontrolled.
+     * @default null
+     */
+    defaultValue?: string | null;
+    /** Called with the selected radio's `value`. */
+    onValueChange?: (value: string) => void;
+    /** Size of every radio, from the `sizes` config. */
+    size?: ComponentSize<'Radio'>;
+    /** Color of every radio, from the `colors` config. */
+    color?: Color;
+    /**
+     * Lays the radios out in a row or a column.
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** {@link Radio}s, each with a `value`. */
+    children: ReactNode;
+}
+/**
+ * A labelled group of {@link Radio}s. Renders a `<fieldset>` and `<legend>`, shares one `name`,
+ * and tracks the selected value. Radios inside don't need `name` or `checked`.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup label="Plan" defaultValue="pro" orientation="horizontal">
+ *   <Radio value="free">Free</Radio>
+ *   <Radio value="pro">Pro</Radio>
+ * </RadioGroup>
+ * ```
+ */
+export declare function RadioGroup({ label, description, error, name, value: valueProp, defaultValue, onValueChange, size, color, orientation, disabled, className, children, ...props }: RadioGroupProps): import("react").JSX.Element;
+export {};

package/dist/components/RadioGroup.js

@@ -0,0 +1,68 @@
+import { useConfig } from "../runtime.js";
+import { cx, typeClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { createContext, useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/RadioGroup.tsx
+var RadioGroupContext = createContext(null);
+function useRadioGroup() {
+	return useContext(RadioGroupContext);
+}
+/**
+* A labelled group of {@link Radio}s. Renders a `<fieldset>` and `<legend>`, shares one `name`,
+* and tracks the selected value. Radios inside don't need `name` or `checked`.
+*
+* @example
+* ```tsx
+* <RadioGroup label="Plan" defaultValue="pro" orientation="horizontal">
+*   <Radio value="free">Free</Radio>
+*   <Radio value="pro">Pro</Radio>
+* </RadioGroup>
+* ```
+*/
+function RadioGroup({ label, description, error, name, value: valueProp, defaultValue = null, onValueChange, size, color, orientation = "vertical", disabled, className, children, ...props }) {
+	const config = useConfig();
+	const id = useId();
+	const [value, setValue] = useControllable(valueProp, defaultValue, (v) => v != null && onValueChange?.(v));
+	const descriptionId = description != null ? `${id}-description` : void 0;
+	const errorId = error != null && error !== false ? `${id}-error` : void 0;
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: {
+			name: name ?? id,
+			value,
+			select: setValue,
+			size,
+			color,
+			invalid: errorId != null,
+			disabled
+		},
+		children: /* @__PURE__ */ jsxs("fieldset", {
+			className: cx("yarcl-field yarcl-radio-group", className),
+			"aria-describedby": cx(descriptionId, errorId) || void 0,
+			disabled,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx("legend", {
+					className: cx("yarcl-field-label", typeClass(config.defaults.labelStyle)),
+					children: label
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cx("yarcl-radio-group-options", `yarcl-radio-group-${orientation}`),
+					children
+				}),
+				descriptionId && /* @__PURE__ */ jsx("p", {
+					className: cx("yarcl-field-description", typeClass(config.defaults.helperStyle)),
+					id: descriptionId,
+					children: description
+				}),
+				errorId && /* @__PURE__ */ jsx("p", {
+					className: cx("yarcl-field-error", typeClass(config.defaults.helperStyle)),
+					id: errorId,
+					children: error
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { RadioGroup, useRadioGroup };

package/dist/components/Select.d.ts

@@ -0,0 +1,47 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { TokenProps } from '../types';
+/** An option of a {@link Select} or {@link Combobox}. */
+export interface SelectOption<V extends string = string> {
+    /** Value reported by `onValueChange` and submitted with forms. */
+    value: V;
+    /** Text shown to the user. Also used for type-to-select and filtering. */
+    label: string;
+    /** Prevents choosing this option. */
+    disabled?: boolean;
+}
+/** Props for {@link Select}. */
+export interface SelectProps<V extends string = string> extends TokenProps<'Select'>, Omit<ComponentProps<'button'>, 'color' | 'value' | 'defaultValue' | 'onChange' | 'children'> {
+    /** The options to choose from. */
+    options: readonly SelectOption<V>[];
+    /** Controlled value. `null` means nothing is selected. */
+    value?: V | null;
+    /**
+     * Initial value when uncontrolled.
+     * @default null
+     */
+    defaultValue?: V | null;
+    /** Called with the chosen option's value. */
+    onValueChange?: (value: V | null) => void;
+    /** Text shown when nothing is selected. */
+    placeholder?: ReactNode;
+    /** Form field name. Renders a hidden input with the value. */
+    name?: string;
+}
+/**
+ * Picks one value from a list, like a native `<select>` but styled from the design tokens.
+ * Arrow keys and type-to-select work both open and closed.
+ * Shares the size scale with {@link Input} and {@link Button}. Works inside a {@link Field}.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   placeholder="Choose a plan"
+ *   options={[
+ *     { value: 'free', label: 'Free' },
+ *     { value: 'pro', label: 'Pro' },
+ *   ]}
+ *   onValueChange={setPlan}
+ * />
+ * ```
+ */
+export declare function Select<V extends string = string>(props: SelectProps<V>): import("react").JSX.Element;

package/dist/components/Select.js

@@ -0,0 +1,138 @@
+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 { CheckIcon, ChevronIcon, floatingMiddleware } from "../floating.js";
+import { useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal, autoUpdate, useClick, useDismiss, useFloating, useInteractions, useListNavigation, useMergeRefs, useRole, useTypeahead } from "@floating-ui/react";
+//#region src/components/Select.tsx
+/**
+* Picks one value from a list, like a native `<select>` but styled from the design tokens.
+* Arrow keys and type-to-select work both open and closed.
+* Shares the size scale with {@link Input} and {@link Button}. Works inside a {@link Field}.
+*
+* @example
+* ```tsx
+* <Select
+*   placeholder="Choose a plan"
+*   options={[
+*     { value: 'free', label: 'Free' },
+*     { value: 'pro', label: 'Pro' },
+*   ]}
+*   onValueChange={setPlan}
+* />
+* ```
+*/
+function Select(props) {
+	const own = useDefaults("Select");
+	const { options, value: valueProp, defaultValue = null, onValueChange, placeholder, name, size, radius, color, className, disabled, ...rest } = useFieldProps(props);
+	const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
+	const [open, setOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState(null);
+	const listRef = useRef([]);
+	const labelsRef = useRef([]);
+	const typingRef = useRef(false);
+	labelsRef.current = options.map((option) => option.disabled ? null : option.label);
+	const selectedIndex = options.findIndex((option) => option.value === value);
+	const selected = selectedIndex >= 0 ? options[selectedIndex] : void 0;
+	const disabledIndices = options.flatMap((option, i) => option.disabled ? [i] : []);
+	function choose(index) {
+		const option = options[index];
+		if (!option || option.disabled) return;
+		setValue(option.value);
+		setOpen(false);
+	}
+	const { refs, floatingStyles, context } = useFloating({
+		open,
+		onOpenChange: setOpen,
+		placement: "bottom-start",
+		transform: false,
+		whileElementsMounted: autoUpdate,
+		middleware: floatingMiddleware({
+			gap: 4,
+			matchWidth: true
+		})
+	});
+	const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+		useClick(context, { enabled: !disabled }),
+		useDismiss(context),
+		useRole(context, { role: "select" }),
+		useListNavigation(context, {
+			listRef,
+			activeIndex,
+			selectedIndex: selectedIndex >= 0 ? selectedIndex : null,
+			onNavigate: setActiveIndex,
+			disabledIndices,
+			loop: true
+		}),
+		useTypeahead(context, {
+			listRef: labelsRef,
+			activeIndex,
+			selectedIndex: selectedIndex >= 0 ? selectedIndex : null,
+			onMatch: open ? setActiveIndex : choose,
+			onTypingChange: (typing) => {
+				typingRef.current = typing;
+			}
+		})
+	]);
+	const buttonRef = useMergeRefs([refs.setReference, rest.ref]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("button", {
+			ref: buttonRef,
+			type: "button",
+			disabled,
+			className: cx("yarcl-input yarcl-select", sizeClass(size ?? own.size, "Select"), radiusClass(radius ?? own.radius, size ?? own.size), colorClass(color ?? own.color), className),
+			...getReferenceProps(rest),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cx("yarcl-select-value", !selected && "yarcl-select-placeholder"),
+				children: selected ? selected.label : placeholder
+			}), /* @__PURE__ */ jsx(ChevronIcon, {})]
+		}),
+		name && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: value ?? ""
+		}),
+		open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+			context,
+			modal: false,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: refs.setFloating,
+				style: floatingStyles,
+				className: cx("yarcl-floating yarcl-panel yarcl-listbox", sizeClass(size ?? own.size, "Select"), colorClass(color ?? own.color)),
+				...getFloatingProps(),
+				children: options.map((option, i) => {
+					const isSelected = i === selectedIndex;
+					const isActive = i === activeIndex;
+					return /* @__PURE__ */ jsxs("div", {
+						ref: (node) => {
+							listRef.current[i] = node;
+						},
+						tabIndex: isActive ? 0 : -1,
+						"aria-disabled": option.disabled || void 0,
+						"data-active": isActive || void 0,
+						className: "yarcl-option",
+						...getItemProps({
+							active: isActive,
+							selected: isSelected,
+							onClick: () => choose(i),
+							onKeyDown(event) {
+								if (event.key === "Enter" || event.key === " " && !typingRef.current) {
+									event.preventDefault();
+									choose(i);
+								}
+							}
+						}),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "yarcl-option-label",
+							children: option.label
+						}), isSelected && /* @__PURE__ */ jsx(CheckIcon, {})]
+					}, option.value);
+				})
+			})
+		}) })
+	] });
+}
+//#endregion
+export { Select };

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,46 @@
+import type { ComponentProps } from 'react';
+import type { ComponentSize, Radius, TextStyle } from '../types';
+/** Props for {@link Skeleton}. */
+export interface SkeletonProps extends Omit<ComponentProps<'span'>, 'children'> {
+    /**
+     * `text`: lines matching a text style; `control`: the height of a control of the given `size`;
+     * `circle`: a circle, e.g. for an avatar; `rect`: a block sized by `width` and `height`.
+     * @default 'text'
+     */
+    shape?: 'text' | 'control' | 'circle' | 'rect';
+    /** Number of lines for `shape="text"`. The last line is shorter. */
+    lines?: number;
+    /**
+     * Text style whose font size and line height the lines match, for `shape="text"`.
+     * @default config.defaults.textStyle
+     */
+    textStyle?: TextStyle;
+    /**
+     * Control size, from the `sizes` config. Sets the height for `shape="control"` and the diameter for `shape="circle"`.
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'Skeleton'>;
+    /**
+     * Corner radius for `control` and `rect`, from the `radii` config.
+     * @default config.defaults.radius
+     */
+    radius?: Radius | 'size';
+    /** Width as a CSS length. */
+    width?: string;
+    /** Height as a CSS length, for `shape="rect"`. */
+    height?: string;
+}
+/**
+ * A placeholder shown while content loads. Hidden from assistive technology;
+ * mark the loading region with `aria-busy` instead.
+ *
+ * @example
+ * ```tsx
+ * <Stack aria-busy>
+ *   <Skeleton shape="text" textStyle="title" width="40%" />
+ *   <Skeleton shape="text" lines={3} />
+ *   <Skeleton shape="control" width="12rem" />
+ * </Stack>
+ * ```
+ */
+export declare function Skeleton({ shape, lines, textStyle, size, radius, width, height, className, style, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/components/Skeleton.js

@@ -0,0 +1,40 @@
+import { useDefaults } from "../runtime.js";
+import { cx, radiusClass, sizeClass, typeClass } from "../classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Skeleton.tsx
+/**
+* A placeholder shown while content loads. Hidden from assistive technology;
+* mark the loading region with `aria-busy` instead.
+*
+* @example
+* ```tsx
+* <Stack aria-busy>
+*   <Skeleton shape="text" textStyle="title" width="40%" />
+*   <Skeleton shape="text" lines={3} />
+*   <Skeleton shape="control" width="12rem" />
+* </Stack>
+* ```
+*/
+function Skeleton({ shape = "text", lines = 1, textStyle, size, radius, width, height, className, style, ...props }) {
+	const own = useDefaults("Skeleton");
+	const dimensions = {
+		width,
+		height,
+		...style
+	};
+	if (shape === "text") return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("yarcl-skeleton-text", textStyle && typeClass(textStyle), className),
+		style: dimensions,
+		...props,
+		children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx("span", { className: "yarcl-skeleton yarcl-skeleton-line" }, i))
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("yarcl-skeleton", `yarcl-skeleton-${shape}`, shape !== "rect" && sizeClass(size ?? own.size, "Skeleton"), shape !== "circle" && radiusClass(radius ?? own.radius, size ?? own.size), className),
+		style: dimensions,
+		...props
+	});
+}
+//#endregion
+export { Skeleton };

package/dist/components/Slider.d.ts

@@ -0,0 +1,126 @@
+import { type ComponentProps } from 'react';
+import type { TokenProps } from '../types';
+/** A {@link Slider} value: one number, or a `[start, end]` pair for a range. */
+export type SliderValue = number | [number, number];
+/** Props for {@link Slider}. Accepts all native `<div>` attributes except `color`, `defaultValue`, `onChange` and `children`. */
+export interface SliderProps<V extends SliderValue = number> extends TokenProps<'Slider'>, Omit<ComponentProps<'div'>, 'color' | 'defaultValue' | 'onChange' | 'children'> {
+    /**
+     * Controlled value. Pass a `[start, end]` pair for a range with two thumbs.
+     * @example
+     * ```tsx
+     * <Slider value={volume} onValueChange={setVolume} aria-label="Volume" />
+     * ```
+     */
+    value?: V;
+    /**
+     * Initial value when uncontrolled. Pass a `[start, end]` pair for a range with two thumbs.
+     * @default min
+     * @example
+     * ```tsx
+     * <Slider defaultValue={[20, 80]} aria-label="Price" />
+     * ```
+     */
+    defaultValue?: V;
+    /**
+     * Called with the new value while the user drags or presses a key.
+     * @example
+     * ```tsx
+     * <Slider onValueChange={(value) => setVolume(value)} aria-label="Volume" />
+     * ```
+     */
+    onValueChange?: (value: V) => void;
+    /**
+     * Lowest value.
+     * @default 0
+     * @example
+     * ```tsx
+     * <Slider min={-10} max={10} aria-label="Offset" />
+     * ```
+     */
+    min?: number;
+    /**
+     * Highest value.
+     * @default 100
+     * @example
+     * ```tsx
+     * <Slider max={10} aria-label="Rating" />
+     * ```
+     */
+    max?: number;
+    /**
+     * Interval between values. Values snap to multiples of it, counted from `min`.
+     * @default 1
+     * @example
+     * ```tsx
+     * <Slider step={5} aria-label="Opacity" />
+     * ```
+     */
+    step?: number;
+    /**
+     * Jump for PageUp and PageDown.
+     * @default a tenth of the range, rounded to a whole number of steps
+     * @example
+     * ```tsx
+     * <Slider step={1} largeStep={25} aria-label="Progress" />
+     * ```
+     */
+    largeStep?: number;
+    /**
+     * Prevents interaction and dims the slider.
+     * @default false
+     * @example
+     * ```tsx
+     * <Slider disabled defaultValue={40} aria-label="Volume" />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Form field name. Renders a hidden input per thumb with its value.
+     * @example
+     * ```tsx
+     * <Slider name="volume" aria-label="Volume" />
+     * ```
+     */
+    name?: string;
+    /**
+     * Formats a value for screen readers (`aria-valuetext`).
+     * @example
+     * ```tsx
+     * <Slider formatValue={(value) => `${value} percent`} aria-label="Volume" />
+     * ```
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Names of the two thumbs of a range, added to the slider's label.
+     * @default ['Minimum', 'Maximum']
+     * @example
+     * ```tsx
+     * <Slider defaultValue={[9, 17]} thumbLabels={['Opens', 'Closes']} aria-label="Hours" />
+     * ```
+     */
+    thumbLabels?: readonly [string, string];
+}
+/** Props for `Slider.Range`. */
+export type SliderRangeProps = SliderProps<[number, number]>;
+/**
+ * Picks a number, or a range with two thumbs, by dragging along a track.
+ * Each thumb has `role="slider"` and supports the arrow keys, Home, End, PageUp and PageDown.
+ * Shares the size scale with the other controls. Works inside a {@link Field}; outside one, give it an `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * <Field label="Volume">
+ *   <Slider defaultValue={40} />
+ * </Field>
+ * ```
+ */
+declare function SliderRoot<V extends SliderValue = number>(props: SliderProps<V>): import("react").JSX.Element;
+declare function SliderRange(props: SliderRangeProps): import("react").JSX.Element;
+/**
+ * Picks a number, or a range with two thumbs, by dragging along a track.
+ * Use `Slider.Range` for an explicitly range-only API.
+ */
+export declare const Slider: typeof SliderRoot & {
+    Range: typeof SliderRange;
+};
+export {};