@yarcl/react 0.1.0 → 0.2.0

package/dist/components/Dialog.d.ts

@@ -0,0 +1,25 @@
+import { type ModalProps } from './Modal';
+import type { Radius } from '../types';
+/** Props for {@link Dialog}. */
+export interface DialogProps extends ModalProps {
+    /**
+     * Corner radius, from the `radii` config.
+     * @default config.defaults.radius
+     */
+    radius?: Radius;
+}
+/**
+ * A modal dialog built on the native `<dialog>` element: focus is trapped, the page behind is inert
+ * and doesn't scroll, and Esc closes it.
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *   trigger={<Button color="danger">Delete</Button>}
+ *   title="Delete project?"
+ *   description="This can't be undone."
+ *   footer={<Button color="danger" onClick={remove}>Delete</Button>}
+ * />
+ * ```
+ */
+export declare function Dialog(props: DialogProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -0,0 +1,29 @@
+import { useDefaults } from "../runtime.js";
+import { Modal } from "./Modal.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Dialog.tsx
+/**
+* A modal dialog built on the native `<dialog>` element: focus is trapped, the page behind is inert
+* and doesn't scroll, and Esc closes it.
+*
+* @example
+* ```tsx
+* <Dialog
+*   trigger={<Button color="danger">Delete</Button>}
+*   title="Delete project?"
+*   description="This can't be undone."
+*   footer={<Button color="danger" onClick={remove}>Delete</Button>}
+* />
+* ```
+*/
+function Dialog(props) {
+	const own = useDefaults("Dialog");
+	return /* @__PURE__ */ jsx(Modal, {
+		...props,
+		size: props.size ?? own.size,
+		radius: props.radius ?? (own.radius === "size" ? void 0 : own.radius),
+		className: "yarcl-dialog"
+	});
+}
+//#endregion
+export { Dialog };

package/dist/components/Divider.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react';
+/** Props for {@link Divider}. */
+export interface DividerProps extends Omit<ComponentProps<'hr'>, 'children'> {
+    /**
+     * Direction of the line. Use `'vertical'` inside an {@link Inline}.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * A thin separator line in the neutral border color.
+ * Spacing around it comes from the parent's `gap`.
+ *
+ * @example
+ * ```tsx
+ * <Stack>
+ *   <Text>Above</Text>
+ *   <Divider />
+ *   <Text>Below</Text>
+ * </Stack>
+ * ```
+ */
+export declare function Divider({ orientation, className, ...props }: DividerProps): import("react").JSX.Element;

package/dist/components/Divider.js

@@ -0,0 +1,25 @@
+import { cx } from "../classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Divider.tsx
+/**
+* A thin separator line in the neutral border color.
+* Spacing around it comes from the parent's `gap`.
+*
+* @example
+* ```tsx
+* <Stack>
+*   <Text>Above</Text>
+*   <Divider />
+*   <Text>Below</Text>
+* </Stack>
+* ```
+*/
+function Divider({ orientation = "horizontal", className, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
+		className: cx("yarcl-divider", `yarcl-divider-${orientation}`, className),
+		"aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+		...props
+	});
+}
+//#endregion
+export { Divider };

package/dist/components/Drawer.d.ts

@@ -0,0 +1,21 @@
+import { type ModalProps } from './Modal';
+/** Props for {@link Drawer}. */
+export interface DrawerProps extends ModalProps {
+    /**
+     * Edge the drawer is attached to.
+     * @default 'right'
+     */
+    side?: 'left' | 'right';
+}
+/**
+ * A modal panel that slides in from the left or right edge. Same behavior as {@link Dialog}:
+ * focus is trapped, the page behind is inert, Esc closes it.
+ *
+ * @example
+ * ```tsx
+ * <Drawer side="left" trigger={<Button>Menu</Button>} title="Navigation">
+ *   <Stack as="nav">…</Stack>
+ * </Drawer>
+ * ```
+ */
+export declare function Drawer({ side, ...props }: DrawerProps): import("react").JSX.Element;

package/dist/components/Drawer.js

@@ -0,0 +1,25 @@
+import { useDefaults } from "../runtime.js";
+import { Modal } from "./Modal.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Drawer.tsx
+/**
+* A modal panel that slides in from the left or right edge. Same behavior as {@link Dialog}:
+* focus is trapped, the page behind is inert, Esc closes it.
+*
+* @example
+* ```tsx
+* <Drawer side="left" trigger={<Button>Menu</Button>} title="Navigation">
+*   <Stack as="nav">…</Stack>
+* </Drawer>
+* ```
+*/
+function Drawer({ side = "right", ...props }) {
+	const own = useDefaults("Drawer");
+	return /* @__PURE__ */ jsx(Modal, {
+		...props,
+		size: props.size ?? own.size,
+		className: `yarcl-drawer yarcl-drawer-${side}`
+	});
+}
+//#endregion
+export { Drawer };

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,51 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { Color, Spacing, TextStyle } from '../types';
+/** Props for {@link EmptyState}. */
+export interface EmptyStateProps extends Omit<ComponentProps<'div'>, 'children' | 'color' | 'title'> {
+    /** Main message. */
+    title: ReactNode;
+    /** Supporting text below the title. */
+    description?: ReactNode;
+    /** Decorative content shown above the title. */
+    icon?: ReactNode;
+    /** Actions shown below the description, usually buttons or links. */
+    actions?: ReactNode;
+    /**
+     * Semantic heading level for the title.
+     * @default 2
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Icon color, from the `colors` config.
+     * @default config.defaults.color
+     */
+    color?: Color;
+    /**
+     * Space between content, from the `spacing` config.
+     * @default config.defaults.gap
+     */
+    gap?: Spacing;
+    /**
+     * Inner spacing, from the `spacing` config.
+     * @default config.defaults.padding
+     */
+    padding?: Spacing;
+    /**
+     * Description typography, from the `typography.styles` config.
+     * @default config.defaults.textStyle
+     */
+    textStyle?: TextStyle;
+}
+/**
+ * A centered message for a view that has no content yet or no matching results.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   title="No projects yet"
+ *   description="Create a project to start organizing your work."
+ *   actions={<Button>Create project</Button>}
+ * />
+ * ```
+ */
+export declare function EmptyState({ title, description, icon, actions, headingLevel, color, gap, padding, textStyle, className, ...props }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/EmptyState.js

@@ -0,0 +1,47 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { colorClass, cx, gapClass, paddingClass, typeClass } from "../classes.js";
+import { Heading } from "./Heading.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/EmptyState.tsx
+/**
+* A centered message for a view that has no content yet or no matching results.
+*
+* @example
+* ```tsx
+* <EmptyState
+*   title="No projects yet"
+*   description="Create a project to start organizing your work."
+*   actions={<Button>Create project</Button>}
+* />
+* ```
+*/
+function EmptyState({ title, description, icon, actions, headingLevel = 2, color, gap, padding, textStyle, className, ...props }) {
+	const own = useDefaults("EmptyState");
+	const config = useConfig();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("yarcl-empty-state", colorClass(color ?? own.color), gapClass(gap ?? own.gap), paddingClass(padding ?? own.padding), typeClass(textStyle ?? own.textStyle ?? config.defaults.textStyle), className),
+		...props,
+		children: [
+			icon != null && /* @__PURE__ */ jsx("div", {
+				className: "yarcl-empty-state-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsx(Heading, {
+				level: headingLevel,
+				className: "yarcl-empty-state-title",
+				children: title
+			}),
+			description != null && /* @__PURE__ */ jsx("p", {
+				className: "yarcl-empty-state-description",
+				children: description
+			}),
+			actions != null && /* @__PURE__ */ jsx("div", {
+				className: "yarcl-empty-state-actions",
+				children: actions
+			})
+		]
+	});
+}
+//#endregion
+export { EmptyState };

package/dist/components/Field.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentProps, type ReactNode } from 'react';
+/** Props for {@link Field}. */
+export interface FieldProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** Visible label for the control. */
+    label: ReactNode;
+    /** Helper text shown below the control. */
+    description?: ReactNode;
+    /** Error message. When set, the control is marked invalid and styled with `defaults.errorColor`. */
+    error?: ReactNode;
+    /** Marks the control as required and shows an indicator next to the label. */
+    required?: boolean;
+    /** A single form control: {@link Input}, {@link Textarea}, {@link Checkbox}, {@link Switch} or {@link Slider}. */
+    children: ReactNode;
+}
+/**
+ * Wraps a form control with a label, helper text and an error message.
+ * The control receives `id`, `aria-describedby`, `aria-invalid` and `required` automatically;
+ * don't set its `id` yourself.
+ *
+ * @example
+ * ```tsx
+ * <Field label="Email" description="We never share it." error={errors.email} required>
+ *   <Input type="email" />
+ * </Field>
+ * ```
+ */
+export declare function Field({ label, description, error, required, children, className, ...props }: FieldProps): import("react").JSX.Element;

package/dist/components/Field.js

@@ -0,0 +1,59 @@
+import { useConfig } from "../runtime.js";
+import { cx, typeClass } from "../classes.js";
+import { FieldContext } from "../field-context.js";
+import { Label } from "./Label.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Field.tsx
+/**
+* Wraps a form control with a label, helper text and an error message.
+* The control receives `id`, `aria-describedby`, `aria-invalid` and `required` automatically;
+* don't set its `id` yourself.
+*
+* @example
+* ```tsx
+* <Field label="Email" description="We never share it." error={errors.email} required>
+*   <Input type="email" />
+* </Field>
+* ```
+*/
+function Field({ label, description, error, required, children, className, ...props }) {
+	const config = useConfig();
+	const id = useId();
+	const descriptionId = description != null ? `${id}-description` : void 0;
+	const errorId = error != null && error !== false ? `${id}-error` : void 0;
+	return /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: {
+			id,
+			labelId: `${id}-label`,
+			describedBy: cx(descriptionId, errorId) || void 0,
+			invalid: errorId != null,
+			required
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx("yarcl-field", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(Label, {
+					id: `${id}-label`,
+					htmlFor: id,
+					required,
+					children: label
+				}),
+				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 { Field };

package/dist/components/Heading.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react';
+import type { Color, TextStyle } from '../types';
+/** Props for {@link Heading}. */
+export interface HeadingProps extends Omit<ComponentProps<'h2'>, 'color'> {
+    /** Heading level: renders `<h1>` … `<h6>`. Choose by document structure, not by size. */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Text style, from the `typography.styles` config. Overrides the level's style when the
+     * visual size should differ from the document structure.
+     * @default config.typography.headings[`h${level}`]
+     */
+    textStyle?: TextStyle;
+    /** Semantic color, from the `colors` config. Uses the default text color when omitted. */
+    color?: Color;
+}
+/**
+ * A section heading. Renders `<h1>` … `<h6>` styled with the level's text style from
+ * `typography.headings`; `textStyle` overrides the look without changing the level.
+ *
+ * @example
+ * ```tsx
+ * <Heading level={1}>Settings</Heading>
+ * <Heading level={2} textStyle="display">Big section title</Heading>
+ * ```
+ */
+export declare function Heading({ level, textStyle, color, className, ...props }: HeadingProps): import("react").JSX.Element;

package/dist/components/Heading.js

@@ -0,0 +1,25 @@
+import { useConfig } from "../runtime.js";
+import { colorClass, cx, typeClass } from "../classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Heading.tsx
+/**
+* A section heading. Renders `<h1>` … `<h6>` styled with the level's text style from
+* `typography.headings`; `textStyle` overrides the look without changing the level.
+*
+* @example
+* ```tsx
+* <Heading level={1}>Settings</Heading>
+* <Heading level={2} textStyle="display">Big section title</Heading>
+* ```
+*/
+function Heading({ level, textStyle, color, className, ...props }) {
+	const config = useConfig();
+	const Tag = `h${level}`;
+	const style = textStyle ?? config.typography.headings[`h${level}`];
+	return /* @__PURE__ */ jsx(Tag, {
+		className: cx("yarcl-heading", typeClass(style), color && cx("yarcl-text-colored", colorClass(color)), className),
+		...props
+	});
+}
+//#endregion
+export { Heading };

package/dist/components/HoverCard.d.ts

@@ -0,0 +1,47 @@
+import { type Placement } from '@floating-ui/react';
+import { type ReactElement, type ReactNode } from 'react';
+import type { Radius, Spacing } from '../types';
+/** Props for {@link HoverCard}. */
+export interface HoverCardProps {
+    /** Rich preview content. Can contain links; the pointer can move into the card without closing it. */
+    content: ReactNode;
+    /** A single focusable element, usually a {@link Link}. */
+    children: ReactElement;
+    /**
+     * Preferred side. Flips when there isn't room.
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /**
+     * Delay before opening, in ms.
+     * @default config.timing.hoverOpenDelay
+     */
+    openDelay?: number;
+    /**
+     * Delay before closing after the pointer leaves, in ms.
+     * @default config.timing.hoverCloseDelay
+     */
+    closeDelay?: number;
+    /**
+     * Inner padding, from the `spacing` config.
+     * @default config.defaults.padding
+     */
+    padding?: Spacing;
+    /**
+     * Corner radius, from the `radii` config.
+     * @default config.defaults.radius
+     */
+    radius?: Radius;
+}
+/**
+ * A preview card shown on hover or focus, e.g. for a user or a link.
+ * Supplementary only: don't put content here that isn't reachable elsewhere.
+ *
+ * @example
+ * ```tsx
+ * <HoverCard content={<UserPreview id="ada" />}>
+ *   <Link href="/users/ada">@ada</Link>
+ * </HoverCard>
+ * ```
+ */
+export declare function HoverCard({ content, children, placement, openDelay, closeDelay, padding, radius, }: HoverCardProps): import("react").JSX.Element;

package/dist/components/HoverCard.js

@@ -0,0 +1,53 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { cx, paddingClass, radiusClass } from "../classes.js";
+import { floatingMiddleware, useTrigger } from "../floating.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FloatingPortal, autoUpdate, safePolygon, useDismiss, useFloating, useFocus, useHover, useInteractions } from "@floating-ui/react";
+//#region src/components/HoverCard.tsx
+/**
+* A preview card shown on hover or focus, e.g. for a user or a link.
+* Supplementary only: don't put content here that isn't reachable elsewhere.
+*
+* @example
+* ```tsx
+* <HoverCard content={<UserPreview id="ada" />}>
+*   <Link href="/users/ada">@ada</Link>
+* </HoverCard>
+* ```
+*/
+function HoverCard({ content, children, placement = "bottom", openDelay, closeDelay, padding, radius }) {
+	const own = useDefaults("HoverCard");
+	const config = useConfig();
+	const delay = {
+		open: openDelay ?? config.timing.hoverOpenDelay,
+		close: closeDelay ?? config.timing.hoverCloseDelay
+	};
+	const [open, setOpen] = useState(false);
+	const { refs, floatingStyles, context } = useFloating({
+		open,
+		onOpenChange: setOpen,
+		placement,
+		transform: false,
+		whileElementsMounted: autoUpdate,
+		middleware: floatingMiddleware({ gap: 8 })
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useHover(context, {
+			delay,
+			handleClose: safePolygon()
+		}),
+		useFocus(context),
+		useDismiss(context)
+	]);
+	const trigger = useTrigger(children, refs.setReference, getReferenceProps);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [trigger, open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx("div", {
+		ref: refs.setFloating,
+		style: floatingStyles,
+		className: cx("yarcl-floating yarcl-panel yarcl-hover-card", paddingClass(padding ?? own.padding), radiusClass(radius ?? own.radius)),
+		...getFloatingProps(),
+		children: content
+	}) })] });
+}
+//#endregion
+export { HoverCard };

package/dist/components/IconButton.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+import type { TokenProps, VariantProps } from '../types';
+/** Props for {@link IconButton}. `aria-label` is required because the button has no visible text. */
+export interface IconButtonProps extends Omit<ComponentProps<'button'>, 'color'>, TokenProps<'IconButton'>, VariantProps {
+    /** Shows a {@link Spinner}, disables the button and sets `aria-busy`. */
+    loading?: boolean;
+    /** Accessible name, announced by screen readers in place of visible text. */
+    'aria-label': string;
+}
+/**
+ * A square button containing only an icon.
+ * Width equals the control height, so it lines up with {@link Button} and {@link Input} of the same size.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="Search" variant="ghost"><SearchIcon /></IconButton>
+ * ```
+ */
+export declare function IconButton({ size, radius, color, variant, loading, disabled, className, type, children, ...props }: IconButtonProps): import("react").JSX.Element;

package/dist/components/IconButton.js

@@ -0,0 +1,32 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass, variantClass } from "../classes.js";
+import { useButtonGroup } from "./ButtonGroup.js";
+import { Spinner } from "./Spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/IconButton.tsx
+/**
+* A square button containing only an icon.
+* Width equals the control height, so it lines up with {@link Button} and {@link Input} of the same size.
+*
+* @example
+* ```tsx
+* <IconButton aria-label="Search" variant="ghost"><SearchIcon /></IconButton>
+* ```
+*/
+function IconButton({ size, radius, color, variant, loading, disabled, className, type = "button", children, ...props }) {
+	const own = useDefaults("IconButton");
+	const group = useButtonGroup();
+	return /* @__PURE__ */ jsxs("button", {
+		type,
+		className: cx("yarcl-button yarcl-icon-button", sizeClass(size ?? group?.size ?? own.size, "IconButton"), radiusClass(radius ?? group?.radius ?? own.radius, size ?? group?.size ?? own.size), colorClass(color ?? group?.color ?? own.color), variantClass(variant ?? group?.variant ?? own.variant), className),
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		...props,
+		children: [loading && /* @__PURE__ */ jsx(Spinner, {
+			label: "",
+			"aria-hidden": "true"
+		}), !loading && children]
+	});
+}
+//#endregion
+export { IconButton };

package/dist/components/Inline.d.ts

@@ -0,0 +1,21 @@
+import type { LayoutProps } from './Stack';
+/** Props for {@link Inline}. */
+export interface InlineProps extends LayoutProps {
+    /**
+     * Wraps children onto new lines when they don't fit.
+     * @default true
+     */
+    wrap?: boolean;
+}
+/**
+ * Lays out children horizontally with a gap from the spacing scale. Centers children vertically by default.
+ *
+ * @example
+ * ```tsx
+ * <Inline gap="tight" justify="end">
+ *   <Button variant="outline">Cancel</Button>
+ *   <Button>Save</Button>
+ * </Inline>
+ * ```
+ */
+export declare function Inline({ as, gap, align, justify, wrap, className, ...props }: InlineProps): import("react").JSX.Element;

package/dist/components/Inline.js

@@ -0,0 +1,24 @@
+import { useDefaults } from "../runtime.js";
+import { cx, gapClass } from "../classes.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Inline.tsx
+/**
+* Lays out children horizontally with a gap from the spacing scale. Centers children vertically by default.
+*
+* @example
+* ```tsx
+* <Inline gap="tight" justify="end">
+*   <Button variant="outline">Cancel</Button>
+*   <Button>Save</Button>
+* </Inline>
+* ```
+*/
+function Inline({ as = "div", gap, align = "center", justify, wrap = true, className, ...props }) {
+	const own = useDefaults("Inline");
+	return /* @__PURE__ */ jsx(as, {
+		className: cx("yarcl-inline", gapClass(gap ?? own.gap), `yarcl-align-${align}`, justify && `yarcl-justify-${justify}`, !wrap && "yarcl-inline-nowrap", className),
+		...props
+	});
+}
+//#endregion
+export { Inline };

package/dist/components/Input.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+import type { TokenProps } from '../types';
+/**
+ * Props for {@link Input}. Accepts all native `<input>` attributes except
+ * `color` and `size`, which are replaced by design tokens.
+ */
+export interface InputProps extends Omit<ComponentProps<'input'>, 'color' | 'size'>, TokenProps<'Input'> {
+}
+/**
+ * A text input styled from the consumer's design tokens.
+ * Shares the base size scale with {@link Button}; component size overrides can adjust either one.
+ * `color` sets the focus border and ring. Inside a {@link Field}, it is labelled and described automatically.
+ *
+ * @example
+ * ```tsx
+ * <Input size="lg" placeholder="Email" />
+ * ```
+ */
+export declare function Input(props: InputProps): import("react").JSX.Element;

package/dist/components/Input.js

@@ -0,0 +1,25 @@
+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/Input.tsx
+/**
+* A text input styled from the consumer's design tokens.
+* Shares the base size scale with {@link Button}; component size overrides can adjust either one.
+* `color` sets the focus border and ring. Inside a {@link Field}, it is labelled and described automatically.
+*
+* @example
+* ```tsx
+* <Input size="lg" placeholder="Email" />
+* ```
+*/
+function Input(props) {
+	const own = useDefaults("Input");
+	const { size, radius, color, className, ...rest } = useFieldProps(props);
+	return /* @__PURE__ */ jsx("input", {
+		className: cx("yarcl-input", sizeClass(size ?? own.size, "Input"), radiusClass(radius ?? own.radius, size ?? own.size), colorClass(color ?? own.color), className),
+		...rest
+	});
+}
+//#endregion
+export { Input };