@ratio-ui/core 0.2.0 → 0.4.0

package/dist/components/field/Field.d.ts

@@ -0,0 +1,38 @@
+import { JSX, ReactElement, ReactNode } from "react";
+/** The props of Field. */
+export type FieldProps = {
+  /** The label text. */
+  label: ReactNode;
+  /** Help text under the control. An error replaces it. */
+  hint?: ReactNode;
+  /** The error message. It shows under the control beside the alert glyph and marks the control invalid. */
+  error?: ReactNode;
+  /** An explanation of the field, opened from a small info icon beside the label by keyboard, touch or hover. */
+  info?: ReactNode;
+  /** Shows a star after the label and marks the control aria-required. */
+  required?: boolean;
+  /** Dims the label and disables the control. */
+  disabled?: boolean;
+  /**
+   * The control: one element, such as Input, which gets an id, aria-labelledby, aria-describedby, aria-invalid,
+   * aria-required and disabled. When the control sits inside a wrapper such as InputGroup, pass a function instead and
+   * spread the props it receives onto the input itself.
+   */
+  children: ReactElement<Record<string, unknown>> | ((props: FieldControlProps) => ReactNode);
+};
+/** The props Field hands to a function child, to spread onto the control. */
+export type FieldControlProps = {
+  id: string;
+  /** The label's id, so a control that a label cannot point at with htmlFor, such as RadioGroup, still has a name. */
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: true;
+  'aria-required'?: true;
+  disabled?: true;
+};
+/**
+ * A form row: label, control, hint and error. It wires the label to the control by id and aria-labelledby (which also
+ * names a group such as RadioGroup), links the hint and error with aria-describedby, and sets aria-invalid when there is
+ * an error. The control keeps an id it already has.
+ */
+export declare function Field({ label, hint, error, info, required, disabled, children }: FieldProps): JSX.Element;

package/dist/components/field/Field.js

@@ -0,0 +1,73 @@
+import { Icon } from "../icon/Icon.js";
+import { Definition } from "../definition/Definition.js";
+import { Label } from "./Label.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, useId } from "react";
+// src/components/field/Field.tsx
+/**
+* A form row: label, control, hint and error. It wires the label to the control by id and aria-labelledby (which also
+* names a group such as RadioGroup), links the hint and error with aria-describedby, and sets aria-invalid when there is
+* an error. The control keeps an id it already has.
+*/
+function Field({ label, hint, error, info, required, disabled, children }) {
+	const generatedId = useId();
+	const own = typeof children === "function" ? void 0 : children.props.id;
+	const id = typeof own === "string" && own !== "" ? own : generatedId;
+	const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+	const hasHint = !hasError && hint !== void 0 && hint !== null && hint !== false && hint !== "";
+	const messageId = `${id}-message`;
+	const labelId = `${id}-label`;
+	const ownProp = (name) => typeof children === "function" ? void 0 : children.props[name];
+	const ids = (...parts) => parts.filter((part) => typeof part === "string" && part !== "").join(" ");
+	const described = ids(ownProp("aria-describedby"), hasError || hasHint ? messageId : void 0);
+	const wiring = {
+		id,
+		"aria-labelledby": ids(labelId, ownProp("aria-labelledby")),
+		...described === "" ? {} : { "aria-describedby": described },
+		...hasError ? { "aria-invalid": true } : {},
+		...required === true ? { "aria-required": true } : {},
+		...disabled === true ? { disabled: true } : {}
+	};
+	const control = typeof children === "function" ? children(wiring) : cloneElement(children, { ...wiring });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field",
+		className: "rt:flex rt:w-full rt:flex-col rt:gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: `rt:flex rt:items-center rt:gap-1.5${disabled === true ? " rt:opacity-50" : ""}`,
+				children: [/* @__PURE__ */ jsxs(Label, {
+					id: labelId,
+					htmlFor: id,
+					children: [label, required === true ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "rt:text-foreground-subdued",
+						children: "*"
+					}) : null]
+				}), info === void 0 || info === null || info === false || info === "" ? null : /* @__PURE__ */ jsx(Definition, {
+					definition: info,
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "info-circle",
+						tone: "subdued",
+						label: "More information"
+					})
+				})]
+			}),
+			control,
+			hasError ? /* @__PURE__ */ jsxs("p", {
+				id: messageId,
+				role: "alert",
+				className: "rt:flex rt:items-start rt:gap-1.5 rt:text-b1 rt:text-error",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "rt:mt-1 rt:text-error-icon",
+					children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle" })
+				}), /* @__PURE__ */ jsx("span", { children: error })]
+			}) : null,
+			hasHint ? /* @__PURE__ */ jsx("p", {
+				id: messageId,
+				className: "rt:text-b1 rt:text-foreground-subdued",
+				children: hint
+			}) : null
+		]
+	});
+}
+export { Field };

package/dist/components/field/Label.d.ts

@@ -0,0 +1,8 @@
+import { JSX, LabelHTMLAttributes, Ref } from "react";
+/** The props of Label: the HTML attributes of a label, except className and style. */
+export type LabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'className' | 'style'> & {
+  /** Receives the label element. */
+  ref?: Ref<HTMLLabelElement>;
+};
+/** The text that names a control, in the 12px medium label type. Point htmlFor at the control's id; Field does this for you. */
+export declare function Label({ htmlFor, ref, ...rest }: LabelProps): JSX.Element;

package/dist/components/field/Label.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+// src/components/field/Label.tsx
+/** The text that names a control, in the 12px medium label type. Point htmlFor at the control's id; Field does this for you. */
+function Label({ htmlFor, ref, ...rest }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		htmlFor,
+		ref,
+		className: "rt:flex rt:w-fit rt:items-center rt:gap-1 rt:text-b2 rt:text-foreground rt:select-none",
+		...rest
+	});
+}
+export { Label };

package/dist/components/field/index.d.ts

@@ -0,0 +1,3 @@
+import { Field, FieldControlProps, FieldProps } from "./Field.js";
+import { Label, LabelProps } from "./Label.js";
+export { Field, type FieldControlProps, type FieldProps, Label, type LabelProps };

package/dist/components/field/index.js

@@ -0,0 +1,3 @@
+import { Label } from "./Label.js";
+import { Field } from "./Field.js";
+export { Field, Label };

package/dist/components/filter-tabs/FilterTabs.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
-import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 // src/components/filter-tabs/FilterTabs.tsx

package/dist/components/global-search/GlobalSearch.js

@@ -2,8 +2,8 @@ import { Icon } from "../icon/Icon.js";
 import { formatCount } from "../../lib/format.js";
 import { InputGroup, InputGroupAddon, InputGroupShortcut } from "../input-group/InputGroup.js";
 import { Kbd, KbdGroup } from "../kbd/Kbd.js";
-import { useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { Autocomplete } from "@base-ui/react/autocomplete";
 // src/components/global-search/GlobalSearch.tsx
 /**

package/dist/components/icon/registry.d.ts

@@ -2,6 +2,6 @@ import "@tabler/icons-react";
 /**
  * The name of an icon. The design system's own glyphs come first (plus, search, export, the two pagination chevrons and
  * the five navigation glyphs); the rest are Tabler icons drawn with a 1.5px line: check, x, alert-triangle, info-circle,
- * the dashboard's navigation glyphs (nav-orders to nav-settings), import, more and menu (the phone menu button).
+ * the dashboard's navigation glyphs (nav-orders to nav-settings), import, more and menu (the phone menu button) and calendar (the date pickers' open button).
  */
-export type IconName = 'plus' | 'search' | 'export' | 'chevron-left' | 'chevron-right' | 'nav-home' | 'nav-shortcut' | 'nav-product' | 'nav-product-2' | 'nav-chevron' | 'nav-caret-down' | 'check' | 'x' | 'alert-triangle' | 'info-circle' | 'nav-orders' | 'nav-customers' | 'nav-growth' | 'nav-discounts' | 'nav-content' | 'nav-markets' | 'nav-analytics' | 'nav-sales-channels' | 'nav-apps' | 'nav-settings' | 'import' | 'more' | 'menu';
+export type IconName = 'plus' | 'search' | 'export' | 'chevron-left' | 'chevron-right' | 'nav-home' | 'nav-shortcut' | 'nav-product' | 'nav-product-2' | 'nav-chevron' | 'nav-caret-down' | 'check' | 'x' | 'alert-triangle' | 'info-circle' | 'nav-orders' | 'nav-customers' | 'nav-growth' | 'nav-discounts' | 'nav-content' | 'nav-markets' | 'nav-analytics' | 'nav-sales-channels' | 'nav-apps' | 'nav-settings' | 'import' | 'more' | 'menu' | 'calendar';

package/dist/components/icon/registry.js

@@ -1,5 +1,5 @@
 import { CHEVRON_LEFT, CHEVRON_RIGHT, EXPORT, NAV_CHEVRON, NAV_HOME, NAV_PRODUCT, NAV_PRODUCT_2, NAV_SHORTCUT, PLUS, SEARCH } from "./glyphs.js";
-import { IconAlertTriangle, IconApps, IconBuildingStore, IconChartBar, IconCheck, IconDiscount2, IconDots, IconFileImport, IconFileText, IconInfoCircle, IconMenu2, IconReceipt, IconSettings, IconTrendingUp, IconUsers, IconWorld, IconX } from "@tabler/icons-react";
+import { IconAlertTriangle, IconApps, IconBuildingStore, IconCalendar, IconChartBar, IconCheck, IconDiscount2, IconDots, IconFileImport, IconFileText, IconInfoCircle, IconMenu2, IconReceipt, IconSettings, IconTrendingUp, IconUsers, IconWorld, IconX } from "@tabler/icons-react";
 // src/components/icon/registry.ts
 /**
 * Every icon by name. nav-chevron and nav-caret-down are one glyph under two names, as in the design system, whose
@@ -117,6 +117,10 @@ const ICONS = {
 	menu: {
 		kind: "tabler",
 		component: IconMenu2
+	},
+	calendar: {
+		kind: "tabler",
+		component: IconCalendar
 	}
 };
 export { ICONS };

package/dist/components/input-group/InputGroup.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
-import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { Input } from "@base-ui/react/input";
 // src/components/input-group/InputGroup.tsx

package/dist/components/input-otp/InputOtp.d.ts

@@ -0,0 +1,43 @@
+import { JSX, Ref } from "react";
+/**
+ * The props of InputOtp. Mark a wrong code with aria-invalid, which draws the error ring on every slot. Inside a Field,
+ * spread the props of its function child: they reach the hidden input.
+ */
+export type InputOtpProps = {
+  /** The number of digits. Defaults to 6. */
+  length?: number;
+  /** The code typed so far, for a controlled field. */
+  value?: string;
+  /** The code typed so far, for an uncontrolled field. */
+  defaultValue?: string;
+  /** Called with the whole code on every change, including a paste. */
+  onValueChange?: (value: string) => void;
+  /** Called once with the code when every slot is filled. */
+  onComplete?: (value: string) => void;
+  /** Stops editing and halves the opacity. */
+  disabled?: boolean;
+  /** Draws the error ring on every slot. */
+  'aria-invalid'?: boolean | 'true' | 'false';
+  /** The accessible name, for example "6-digit code". */
+  'aria-label'?: string;
+  /** The id of an element that names the field. */
+  'aria-labelledby'?: string;
+  /** The ids of the elements that describe the field, such as its hint or error. Field sets it. */
+  'aria-describedby'?: string;
+  /** Tells assistive technology that the code must be filled. Field sets it for a required field. */
+  'aria-required'?: boolean | 'true' | 'false';
+  /** The id of the hidden input, for a label's htmlFor. Field sets it. */
+  id?: string;
+  /** The form field name. */
+  name?: string;
+  /** Focuses the field on mount. */
+  autoFocus?: boolean;
+  /** Receives the hidden input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A one-time-code field: six 44px digit slots (set `length` for another count) over one hidden input, so the browser
+ * offers the SMS code (autocomplete one-time-code), a pasted code fills every slot, and the numeric keypad opens on phones.
+ * Digits only.
+ */
+export declare function InputOtp({ length, ref, disabled, onValueChange, ...rest }: InputOtpProps): JSX.Element;

package/dist/components/input-otp/InputOtp.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { use } from "react";
+import { OTPInput, OTPInputContext, REGEXP_ONLY_DIGITS } from "input-otp";
+// src/components/input-otp/InputOtp.tsx
+const slotClass = "rt:relative rt:flex rt:size-11 rt:items-center rt:justify-center rt:rounded-lg rt:bg-background rt:text-otp rt:text-foreground rt:shadow-ring-subtle rt:transition-colors rt:forced-outline rt:data-active:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:data-active:shadow-ring-invalid";
+function Slot({ index, invalid }) {
+	const { char, hasFakeCaret, isActive } = use(OTPInputContext).slots[index] ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": isActive ? "" : void 0,
+		"aria-invalid": invalid || void 0,
+		className: slotClass,
+		children: [char, hasFakeCaret ? /* @__PURE__ */ jsx("div", {
+			className: "rt:pointer-events-none rt:absolute rt:inset-0 rt:flex rt:items-center rt:justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "rt:h-5 rt:w-px rt:bg-foreground" })
+		}) : null]
+	});
+}
+/**
+* A one-time-code field: six 44px digit slots (set `length` for another count) over one hidden input, so the browser
+* offers the SMS code (autocomplete one-time-code), a pasted code fills every slot, and the numeric keypad opens on phones.
+* Digits only.
+*/
+function InputOtp({ length = 6, ref, disabled, onValueChange, ...rest }) {
+	return /* @__PURE__ */ jsx(OTPInput, {
+		"data-slot": "input-otp",
+		ref,
+		maxLength: length,
+		pattern: REGEXP_ONLY_DIGITS,
+		pasteTransformer: (pasted) => pasted.replace(/\D/g, ""),
+		inputMode: "numeric",
+		autoComplete: "one-time-code",
+		spellCheck: false,
+		disabled,
+		onChange: onValueChange,
+		containerClassName: "rt:flex rt:items-center rt:gap-2 rt:has-disabled:opacity-50",
+		className: "rt:disabled:cursor-not-allowed",
+		...rest,
+		children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(Slot, {
+			index,
+			invalid: rest["aria-invalid"] === true || rest["aria-invalid"] === "true"
+		}, index))
+	});
+}
+export { InputOtp };

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1,2 @@
+import { InputOtp, InputOtpProps } from "./InputOtp.js";
+export { InputOtp, type InputOtpProps };

package/dist/components/input-otp/index.js

@@ -0,0 +1 @@
+export { InputOtp } from "./InputOtp.js";

package/dist/components/key-value-list/KeyValueList.d.ts

@@ -0,0 +1,25 @@
+import { JSX, ReactNode } from "react";
+/** One row of a KeyValueList. */
+export type KeyValueItem = {
+  /** The label, shown on the left. It is the row key, so keep labels unique. */
+  label: string;
+  /** The value, shown on the right, already formatted (money and dates come from the format module). Empty shows the placeholder. */
+  value?: ReactNode;
+  /** An optional action, such as Edit, shown after the value. Its button is named with the action label and the row label. */
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+};
+/** The props of KeyValueList. */
+export type KeyValueListProps = {
+  /** The rows, in order. */
+  items: KeyValueItem[];
+  /** What an empty value shows. Defaults to "Not set". */
+  emptyValue?: string;
+};
+/**
+ * Settings rows in a hairline bordered panel: the label on the left, the value on the right and an optional action. It is
+ * a description list, so a screen reader announces each label with its value.
+ */
+export declare function KeyValueList({ items, emptyValue }: KeyValueListProps): JSX.Element;

package/dist/components/key-value-list/KeyValueList.js

@@ -0,0 +1,40 @@
+import { Text } from "../text/Text.js";
+import { Button } from "../button/Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/key-value-list/KeyValueList.tsx
+/**
+* Settings rows in a hairline bordered panel: the label on the left, the value on the right and an optional action. It is
+* a description list, so a screen reader announces each label with its value.
+*/
+function KeyValueList({ items, emptyValue = "Not set" }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: "rt:m-0 rt:overflow-hidden rt:rounded-lg rt:border rt:border-border rt:bg-background",
+		children: items.map((item) => {
+			const empty = item.value === void 0 || item.value === null || item.value === "";
+			return /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:min-h-11 rt:items-center rt:justify-between rt:gap-3 rt:border-border rt:px-3 rt:py-2 rt:not-first:border-t",
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "dt",
+					variant: "b3",
+					tone: "subdued",
+					children: item.label
+				}), /* @__PURE__ */ jsxs("dd", {
+					className: "rt:m-0 rt:flex rt:min-w-0 rt:items-center rt:justify-end rt:gap-3 rt:text-right",
+					children: [/* @__PURE__ */ jsx(Text, {
+						variant: "b3",
+						tone: empty ? "muted" : "default",
+						children: empty ? emptyValue : item.value
+					}), item.action && /* @__PURE__ */ jsxs(Button, {
+						variant: "link",
+						onClick: item.action.onClick,
+						children: [item.action.label, /* @__PURE__ */ jsxs("span", {
+							className: "rt:sr-only",
+							children: [" ", item.label]
+						})]
+					})]
+				})]
+			}, item.label);
+		})
+	});
+}
+export { KeyValueList };

package/dist/components/key-value-list/index.d.ts

@@ -0,0 +1,2 @@
+import { KeyValueItem, KeyValueList, KeyValueListProps } from "./KeyValueList.js";
+export { type KeyValueItem, KeyValueList, type KeyValueListProps };

package/dist/components/key-value-list/index.js

@@ -0,0 +1 @@
+export { KeyValueList } from "./KeyValueList.js";

package/dist/components/link/Link.d.ts

@@ -0,0 +1,22 @@
+import { AnchorHTMLAttributes, JSX, ReactNode, Ref } from "react";
+/**
+ * The props of Link: the attributes of an anchor, except className and style, with the address and the two arrows.
+ */
+export type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style' | 'href' | 'children'> & {
+  /** Where the link goes. */
+  href: string;
+  /** The link text. */
+  children: ReactNode;
+  /** Shows a back arrow before the text, as in "← Products". Screen readers skip it. */
+  back?: boolean;
+  /** Shows a forward arrow after the text, as in "View all variants →". Screen readers skip it. */
+  forward?: boolean;
+  /** Receives the anchor element. */
+  ref?: Ref<HTMLAnchorElement>;
+};
+/**
+ * A text link to another page, such as "← Products" or "View all variants →". It is drawn by the app's LinkProvider, so a
+ * router navigates without a reload; without one it is a plain <a href>. The arrows are decoration and are hidden from
+ * screen readers.
+ */
+export declare function Link({ href, children, back, forward, ref, ...rest }: LinkProps): JSX.Element;

package/dist/components/link/Link.js

@@ -0,0 +1,31 @@
+import { cn } from "../../lib/cn.js";
+import { RatioLink } from "../link-provider/RatioLink.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/link/Link.tsx
+const LINK = "rt:inline-flex rt:items-center rt:gap-1 rt:rounded-sm rt:text-primary rt:transition-colors rt:hover:underline rt:focus-visible:focus-ring";
+/**
+* A text link to another page, such as "← Products" or "View all variants →". It is drawn by the app's LinkProvider, so a
+* router navigates without a reload; without one it is a plain <a href>. The arrows are decoration and are hidden from
+* screen readers.
+*/
+function Link({ href, children, back = false, forward = false, ref, ...rest }) {
+	return /* @__PURE__ */ jsxs(RatioLink, {
+		...rest,
+		ref,
+		href,
+		"data-slot": "link",
+		className: cn(LINK),
+		children: [
+			back && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "←"
+			}),
+			children,
+			forward && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "→"
+			})
+		]
+	});
+}
+export { Link };

package/dist/components/link/index.d.ts

@@ -0,0 +1,2 @@
+import { Link, LinkProps } from "./Link.js";
+export { Link, type LinkProps };

package/dist/components/link/index.js

@@ -0,0 +1 @@
+export { Link } from "./Link.js";

package/dist/components/media-grid/MediaGrid.d.ts

@@ -0,0 +1,49 @@
+import { JSX } from "react";
+import { Accept } from "react-dropzone";
+/** One image in a MediaGrid. */
+export type MediaGridItem = {
+  /** A stable id, reported back by onReorder, onRemove and onMakeCover. */
+  id: string;
+  /** The image URL, or an object URL while the file uploads. */
+  src: string;
+  /** The text alternative. It also names the item in the action group and the announcements. */
+  alt: string;
+  /** Upload progress from 0 to 100. A thin bar shows on the thumb while it is below 100. */
+  progress?: number;
+  /** Why the upload failed, shown under the thumb beside the warning glyph; the thumb takes the error ring. */
+  error?: string;
+};
+/** The props of MediaGrid. The app uploads the files and owns the list; the grid reports what the person did. */
+export type MediaGridProps = {
+  /** The images in order. The first one is the cover. */
+  items: MediaGridItem[];
+  /** Called with the files chosen in the add tile or dropped on the grid. */
+  onAdd: (files: File[]) => void;
+  /** Called with every id in the new order after a drag, Move left, Move right or Make cover. */
+  onReorder: (ids: string[]) => void;
+  /** Called with the id of the item to take off the grid. */
+  onRemove: (id: string) => void;
+  /** Called with the id after Make cover has moved it first through onReorder, for an app that saves the cover on its own. */
+  onMakeCover?: (id: string) => void;
+  /** The file types the add tile takes, as react-dropzone's accept map. Defaults to every image type. */
+  accept?: Accept;
+  /** Stops adding, dragging and every button. */
+  disabled?: boolean;
+  /** The accessible name of the add tile. Defaults to "Add media". */
+  addLabel?: string;
+  /** The id of the grid. */
+  id?: string;
+  /** The accessible name of the grid. Defaults to "Media" when there is no aria-labelledby. */
+  'aria-label'?: string;
+  /** The id of the visible label that names the grid, such as a Field label. */
+  'aria-labelledby'?: string;
+  /** The id of help text for the grid. */
+  'aria-describedby'?: string;
+};
+/**
+ * The media of a product: a row of square thumbs with an add tile that opens the file picker and takes dropped files.
+ * Thumbs reorder by drag (pointer, touch or keyboard) and by the Move left, Move right and Make cover buttons, so no
+ * drag is needed. The first image is the cover and carries a badge. Uploads show a thin progress bar and failures an
+ * error under the thumb. Every move, cover change and removal is announced to screen readers.
+ */
+export declare function MediaGrid({ items, onAdd, onReorder, onRemove, onMakeCover, accept, disabled, addLabel, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, ...rest }: MediaGridProps): JSX.Element;