@yarcl/react 0.1.0 → 0.2.0

package/dist/components/Label.d.ts

@@ -0,0 +1,46 @@
+import type { ComponentProps } from 'react';
+import type { Color, ComponentSize, Radius, TextStyle, Variant } from '../types';
+/** Props for {@link Label}. */
+export interface LabelProps extends Omit<ComponentProps<'label'>, 'color'> {
+    /**
+     * Text style, from the `typography.styles` config.
+     * @default config.defaults.labelStyle
+     */
+    textStyle?: TextStyle;
+    /**
+     * Semantic color, from the `colors` config. Colors the label text; neutral when omitted.
+     */
+    color?: Color;
+    /**
+     * Style recipe, from the `variants` config, for a filled label. Plain when omitted.
+     */
+    variant?: Variant;
+    /**
+     * Font size scale, from the `sizes` config. Uses the text style's size when omitted.
+     */
+    size?: ComponentSize<'Label'>;
+    /**
+     * Corner radius, from the `radii` config.
+     * @default config.defaults.radius
+    */
+    radius?: Radius | 'size';
+    /**
+     * Shows a required marker in `defaults.errorColor`. The marker is hidden from screen readers,
+     * so also set `required` (or `aria-required`) on the control.
+     */
+    required?: boolean;
+    /** Uses the muted color, to match a disabled control. */
+    disabled?: boolean;
+}
+/**
+ * A form label in the consumer's `defaults.labelStyle`, or a filled label with a variant. Connect
+ * it with `htmlFor`, or give it an `id` and point the control's `aria-labelledby` at it.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email" required>Email</Label>
+ * <Input id="email" type="email" />
+ * <Label variant="soft" color="success">Active</Label>
+ * ```
+ */
+export declare function Label({ textStyle, color, variant, size, radius, required, disabled, className, children, ...props }: LabelProps): import("react").JSX.Element;

package/dist/components/Label.js

@@ -0,0 +1,33 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass, softVariantClass, typeClass } from "../classes.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Label.tsx
+/**
+* A form label in the consumer's `defaults.labelStyle`, or a filled label with a variant. Connect
+* it with `htmlFor`, or give it an `id` and point the control's `aria-labelledby` at it.
+*
+* @example
+* ```tsx
+* <Label htmlFor="email" required>Email</Label>
+* <Input id="email" type="email" />
+* <Label variant="soft" color="success">Active</Label>
+* ```
+*/
+function Label({ textStyle, color, variant, size, radius, required, disabled, className, children, ...props }) {
+	const config = useConfig();
+	const own = useDefaults("Label");
+	const resolvedSize = size ?? own.size;
+	const resolvedColor = color ?? own.color;
+	const resolvedVariant = variant ?? own.variant;
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx("yarcl-label", typeClass(textStyle ?? own.textStyle ?? config.defaults.labelStyle), resolvedColor && cx("yarcl-label-colored", colorClass(resolvedColor)), resolvedVariant && cx("yarcl-label-variant", softVariantClass(resolvedVariant)), resolvedSize && cx("yarcl-label-sized", sizeClass(resolvedSize, "Label")), radiusClass(radius ?? own.radius, resolvedSize), disabled && "yarcl-label-disabled", className),
+		...props,
+		children: [children, required && /* @__PURE__ */ jsx("span", {
+			className: "yarcl-label-required",
+			"aria-hidden": "true",
+			children: " *"
+		})]
+	});
+}
+//#endregion
+export { Label };

package/dist/components/Link.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentProps } from 'react';
+import type { Color } from '../types';
+/** Props for {@link Link}. Accepts all native `<a>` attributes except `color`. */
+export interface LinkProps extends Omit<ComponentProps<'a'>, 'color'> {
+    /**
+     * Link color, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /**
+     * When to underline. Keep `'always'` for links inside running text, so they don't rely on color alone.
+     * @default 'always'
+     */
+    underline?: 'always' | 'hover' | 'none';
+    /** Opens in a new tab with `rel="noopener noreferrer"`. */
+    external?: boolean;
+}
+/**
+ * A text link that inherits the surrounding text style.
+ *
+ * @example
+ * ```tsx
+ * <Link href="/docs">Read the docs</Link>
+ * <Link href="https://example.com" external>Example</Link>
+ * ```
+ */
+export declare function Link({ color, underline, external, className, ...props }: LinkProps): import("react").JSX.Element;

package/dist/components/Link.js

@@ -0,0 +1,26 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx } from "../classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Link.tsx
+/**
+* A text link that inherits the surrounding text style.
+*
+* @example
+* ```tsx
+* <Link href="/docs">Read the docs</Link>
+* <Link href="https://example.com" external>Example</Link>
+* ```
+*/
+function Link({ color, underline = "always", external, className, ...props }) {
+	const own = useDefaults("Link");
+	return /* @__PURE__ */ jsx("a", {
+		className: cx("yarcl-link", `yarcl-link-underline-${underline}`, colorClass(color ?? own.color), className),
+		...external && {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		},
+		...props
+	});
+}
+//#endregion
+export { Link };

package/dist/components/Menu.d.ts

@@ -0,0 +1,73 @@
+import { type Placement } from '@floating-ui/react';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import type { Color, ComponentSize } from '../types';
+/** Props for {@link Menu}. */
+export interface MenuProps {
+    /** `Menu.Trigger` and `Menu.Content`. */
+    children?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /**
+     * Initial open state when uncontrolled.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the menu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Preferred side. Flips when there isn't room.
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
+    /**
+     * Item size, from the `sizes` config.
+     * @default config.defaults.size
+     */
+    size?: ComponentSize<'Menu'>;
+}
+declare function MenuRoot(props: MenuProps): import("react").JSX.Element;
+/** Props for `Menu.Trigger`. */
+export interface MenuTriggerProps {
+    /** A single element, usually a {@link Button}. */
+    children: ReactElement;
+}
+declare function MenuTrigger({ children }: MenuTriggerProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Props for `Menu.Content`. */
+export interface MenuContentProps extends ComponentProps<'div'> {
+}
+declare function MenuContent({ className, style, children, ...props }: MenuContentProps): import("react").JSX.Element | null;
+/** Props for `Menu.Item`. */
+export interface MenuItemProps extends Omit<ComponentProps<'button'>, 'color' | 'onSelect'> {
+    /** Called when the item is chosen by click, Enter or Space. The menu closes afterwards. */
+    onSelect?: () => void;
+    /** Semantic color for the item, e.g. a destructive action. From the `colors` config. */
+    color?: Color;
+    /** Text used for type-to-select. Defaults to `children` when it is a string. */
+    textValue?: string;
+}
+declare function MenuItem({ onSelect, color, textValue, disabled, className, children, ...props }: MenuItemProps): import("react").JSX.Element;
+/** A line between groups of `Menu.Item`s. */
+declare function MenuSeparator(): import("react").JSX.Element;
+/**
+ * A list of actions opened from a trigger. Arrow keys move between items,
+ * typing jumps to a matching item, Esc closes.
+ *
+ * @example
+ * ```tsx
+ * <Menu>
+ *   <Menu.Trigger><Button variant="outline">Actions</Button></Menu.Trigger>
+ *   <Menu.Content>
+ *     <Menu.Item onSelect={rename}>Rename</Menu.Item>
+ *     <Menu.Separator />
+ *     <Menu.Item color="danger" onSelect={remove}>Delete</Menu.Item>
+ *   </Menu.Content>
+ * </Menu>
+ * ```
+ */
+export declare const Menu: typeof MenuRoot & {
+    Trigger: typeof MenuTrigger;
+    Content: typeof MenuContent;
+    Item: typeof MenuItem;
+    Separator: typeof MenuSeparator;
+};
+export {};

package/dist/components/Menu.js

@@ -0,0 +1,143 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, sizeClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { floatingMiddleware, useTrigger } from "../floating.js";
+import { createContext, useContext, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingList, FloatingPortal, autoUpdate, useClick, useDismiss, useFloating, useInteractions, useListItem, useListNavigation, useRole, useTypeahead } from "@floating-ui/react";
+//#region src/components/Menu.tsx
+var MenuContext = createContext(null);
+function useMenuContext(component) {
+	const context = useContext(MenuContext);
+	if (!context) throw new Error(`yarcl: <${component}> must be inside <Menu>`);
+	return context;
+}
+function useMenuState({ open: openProp, defaultOpen = false, onOpenChange, placement = "bottom-start", size }) {
+	const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
+	const [activeIndex, setActiveIndex] = useState(null);
+	const elementsRef = useRef([]);
+	const labelsRef = useRef([]);
+	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: "menu" }),
+		useListNavigation(floating.context, {
+			listRef: elementsRef,
+			activeIndex,
+			onNavigate: setActiveIndex,
+			loop: true
+		}),
+		useTypeahead(floating.context, {
+			listRef: labelsRef,
+			activeIndex,
+			onMatch: open ? setActiveIndex : void 0
+		})
+	]);
+	return {
+		open,
+		setOpen,
+		activeIndex,
+		setActiveIndex,
+		elementsRef,
+		labelsRef,
+		size,
+		...floating,
+		...interactions
+	};
+}
+function MenuRoot(props) {
+	const state = useMenuState(props);
+	return /* @__PURE__ */ jsx(MenuContext.Provider, {
+		value: state,
+		children: props.children
+	});
+}
+function MenuTrigger({ children }) {
+	const { refs, getReferenceProps } = useMenuContext("Menu.Trigger");
+	return useTrigger(children, refs.setReference, getReferenceProps);
+}
+function MenuContent({ className, style, children, ...props }) {
+	const own = useDefaults("Menu");
+	const { open, size, refs, floatingStyles, context, getFloatingProps, elementsRef, labelsRef } = useMenuContext("Menu.Content");
+	if (!open) return null;
+	return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+		context,
+		modal: false,
+		initialFocus: 0,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: refs.setFloating,
+			style: {
+				...floatingStyles,
+				...style
+			},
+			className: cx("yarcl-floating yarcl-panel yarcl-listbox", sizeClass(size ?? own.size, "Menu"), colorClass(), className),
+			...getFloatingProps(props),
+			children: /* @__PURE__ */ jsx(FloatingList, {
+				elementsRef,
+				labelsRef,
+				children
+			})
+		})
+	}) });
+}
+function MenuItem({ onSelect, color, textValue, disabled, className, children, ...props }) {
+	const { activeIndex, setOpen, getItemProps } = useMenuContext("Menu.Item");
+	const { ref, index } = useListItem({ label: disabled ? null : textValue ?? (typeof children === "string" ? children : null) });
+	const active = activeIndex === index;
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		role: "menuitem",
+		tabIndex: active ? 0 : -1,
+		disabled,
+		"data-active": active || void 0,
+		className: cx("yarcl-option", color && cx("yarcl-option-colored", colorClass(color)), className),
+		...getItemProps({
+			...props,
+			onClick() {
+				onSelect?.();
+				setOpen(false);
+			}
+		}),
+		children
+	});
+}
+/** A line between groups of `Menu.Item`s. */
+function MenuSeparator() {
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		className: "yarcl-listbox-separator"
+	});
+}
+/**
+* A list of actions opened from a trigger. Arrow keys move between items,
+* typing jumps to a matching item, Esc closes.
+*
+* @example
+* ```tsx
+* <Menu>
+*   <Menu.Trigger><Button variant="outline">Actions</Button></Menu.Trigger>
+*   <Menu.Content>
+*     <Menu.Item onSelect={rename}>Rename</Menu.Item>
+*     <Menu.Separator />
+*     <Menu.Item color="danger" onSelect={remove}>Delete</Menu.Item>
+*   </Menu.Content>
+* </Menu>
+* ```
+*/
+var Menu = Object.assign(MenuRoot, {
+	Trigger: MenuTrigger,
+	Content: MenuContent,
+	Item: MenuItem,
+	Separator: MenuSeparator
+});
+//#endregion
+export { Menu };

package/dist/components/Modal.d.ts

@@ -0,0 +1,45 @@
+import { type MouseEvent, type ReactElement, type ReactNode, type SyntheticEvent } from 'react';
+import type { ModalSize, Radius } from '../types';
+/** Props shared by {@link Dialog} and {@link Drawer}. */
+export interface ModalProps {
+    /** Heading of the dialog. Also its accessible name. */
+    title: ReactNode;
+    /** Supporting text below the title. Also its accessible description. */
+    description?: ReactNode;
+    /** Body content. Scrolls when it doesn't fit. */
+    children?: ReactNode;
+    /** Actions shown at the bottom, e.g. Cancel and Confirm buttons. */
+    footer?: ReactNode;
+    /** An element that opens the dialog when clicked, e.g. a {@link Button}. Optional when controlled. */
+    trigger?: ReactElement<{
+        onClick?: (event: MouseEvent) => void;
+    }>;
+    /** Controlled open state. */
+    open?: boolean;
+    /**
+     * Initial open state when uncontrolled.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Called when the dialog opens or closes, including by Esc, the close button or a backdrop click. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Closes when the backdrop is clicked.
+     * @default true
+     */
+    closeOnBackdrop?: boolean;
+    /**
+     * Width, from the `modalSizes` config. Height follows the content, up to the viewport.
+     * @default config.defaults.modalSize (Drawer: its component default, `sm` in the library defaults)
+     */
+    size?: ModalSize;
+}
+export declare function useModalDialog(open: boolean, setOpen: (open: boolean) => void, closeOnBackdrop?: boolean): {
+    ref: import("react").RefObject<HTMLDialogElement | null>;
+    onClose(event: SyntheticEvent<HTMLDialogElement>): void;
+    onClick(event: MouseEvent<HTMLDialogElement>): void;
+};
+export declare function Modal({ title, description, children, footer, trigger, open: openProp, defaultOpen, onOpenChange, closeOnBackdrop, size, className, radius, }: ModalProps & {
+    className: string;
+    radius?: Radius;
+}): import("react").JSX.Element;

package/dist/components/Modal.js

@@ -0,0 +1,110 @@
+import { useConfig } from "../runtime.js";
+import { cx, radiusClass, typeClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { cloneElement, useEffect, useId, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Modal.tsx
+var openModals = [];
+function syncBackdrops() {
+	openModals.forEach((dialog, i) => dialog.toggleAttribute("data-yarcl-covered", i < openModals.length - 1));
+}
+function removeOpenModal(dialog) {
+	const index = openModals.indexOf(dialog);
+	if (index === -1) return;
+	openModals.splice(index, 1);
+	dialog.removeAttribute("data-yarcl-covered");
+	syncBackdrops();
+}
+function CloseIcon() {
+	return /* @__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" })
+	});
+}
+function useModalDialog(open, setOpen, closeOnBackdrop = true) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const dialog = ref.current;
+		if (!dialog) return;
+		if (open && !dialog.open) {
+			dialog.showModal();
+			openModals.push(dialog);
+			syncBackdrops();
+		} else if (!open) {
+			if (dialog.open) dialog.close();
+			removeOpenModal(dialog);
+		}
+	}, [open]);
+	useEffect(() => {
+		const dialog = ref.current;
+		return () => {
+			if (dialog) removeOpenModal(dialog);
+		};
+	}, []);
+	return {
+		ref,
+		onClose(event) {
+			if (event.target === event.currentTarget && open) setOpen(false);
+		},
+		onClick(event) {
+			if (closeOnBackdrop && event.target === event.currentTarget) setOpen(false);
+		}
+	};
+}
+function Modal({ title, description, children, footer, trigger, open: openProp, defaultOpen = false, onOpenChange, closeOnBackdrop = true, size, className, radius }) {
+	const config = useConfig();
+	const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
+	const dialogProps = useModalDialog(open, setOpen, closeOnBackdrop);
+	const titleId = useId();
+	const descriptionId = useId();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [trigger && cloneElement(trigger, { onClick(event) {
+		trigger.props.onClick?.(event);
+		setOpen(true);
+	} }), /* @__PURE__ */ jsx("dialog", {
+		...dialogProps,
+		className: cx("yarcl-modal", `yarcl-modal-size-${size ?? config.defaults.modalSize}`, radiusClass(radius), className),
+		"aria-labelledby": titleId,
+		"aria-describedby": description != null ? descriptionId : void 0,
+		children: open && /* @__PURE__ */ jsxs("div", {
+			className: "yarcl-modal-content",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "yarcl-modal-header",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "yarcl-modal-heading",
+						children: [/* @__PURE__ */ jsx("h2", {
+							id: titleId,
+							className: cx("yarcl-modal-title", typeClass(config.typography.headings.h2)),
+							children: title
+						}), description != null && /* @__PURE__ */ jsx("p", {
+							id: descriptionId,
+							className: "yarcl-modal-description",
+							children: description
+						})]
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "yarcl-modal-close",
+						"aria-label": "Close",
+						onClick: () => setOpen(false),
+						children: /* @__PURE__ */ jsx(CloseIcon, {})
+					})]
+				}),
+				children != null && /* @__PURE__ */ jsx("div", {
+					className: "yarcl-modal-body",
+					children
+				}),
+				footer != null && /* @__PURE__ */ jsx("div", {
+					className: "yarcl-modal-footer",
+					children: footer
+				})
+			]
+		})
+	})] });
+}
+//#endregion
+export { Modal, useModalDialog };

package/dist/components/NumberInput.d.ts

@@ -0,0 +1,49 @@
+import { type ComponentProps } from 'react';
+import type { TokenProps } from '../types';
+/**
+ * Props for {@link NumberInput}. Native `<input>` attributes go to the inner input;
+ * `className` and `style` go to the outer box.
+ */
+export interface NumberInputProps extends TokenProps<'NumberInput'>, Omit<ComponentProps<'input'>, 'color' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'step'> {
+    /** Controlled value. `null` means the input is empty. */
+    value?: number | null;
+    /**
+     * Initial value when uncontrolled.
+     * @default null
+     */
+    defaultValue?: number | null;
+    /** Called with the new value after a step, or when typed text is committed on blur or Enter. */
+    onValueChange?: (value: number | null) => void;
+    /** Lowest allowed value. Typed values are clamped to it, and `Home` jumps to it. */
+    min?: number;
+    /** Highest allowed value. Typed values are clamped to it, and `End` jumps to it. */
+    max?: number;
+    /**
+     * Amount added or removed by the stepper buttons and the arrow keys. `PageUp` and `PageDown` step ten times as far.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Accessible label of the increment button.
+     * @default 'Increase'
+     */
+    incrementLabel?: string;
+    /**
+     * Accessible label of the decrement button.
+     * @default 'Decrease'
+     */
+    decrementLabel?: string;
+}
+/**
+ * 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>
+ * ```
+ */
+export declare function NumberInput(props: NumberInputProps): import("react").JSX.Element;