@ratio-ui/core 0.1.1 → 0.3.0

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, IconCheck, IconInfoCircle, 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
@@ -65,6 +65,62 @@ const ICONS = {
 	"info-circle": {
 		kind: "tabler",
 		component: IconInfoCircle
+	},
+	"nav-orders": {
+		kind: "tabler",
+		component: IconReceipt
+	},
+	"nav-customers": {
+		kind: "tabler",
+		component: IconUsers
+	},
+	"nav-growth": {
+		kind: "tabler",
+		component: IconTrendingUp
+	},
+	"nav-discounts": {
+		kind: "tabler",
+		component: IconDiscount2
+	},
+	"nav-content": {
+		kind: "tabler",
+		component: IconFileText
+	},
+	"nav-markets": {
+		kind: "tabler",
+		component: IconWorld
+	},
+	"nav-analytics": {
+		kind: "tabler",
+		component: IconChartBar
+	},
+	"nav-sales-channels": {
+		kind: "tabler",
+		component: IconBuildingStore
+	},
+	"nav-apps": {
+		kind: "tabler",
+		component: IconApps
+	},
+	"nav-settings": {
+		kind: "tabler",
+		component: IconSettings
+	},
+	import: {
+		kind: "tabler",
+		component: IconFileImport
+	},
+	more: {
+		kind: "tabler",
+		component: IconDots
+	},
+	menu: {
+		kind: "tabler",
+		component: IconMenu2
+	},
+	calendar: {
+		kind: "tabler",
+		component: IconCalendar
 	}
 };
 export { ICONS };

package/dist/components/input/Input.d.ts

@@ -0,0 +1,19 @@
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/** The height of the field in px: 36 is the design system's input, 32 the compact one inside tables. */
+export type InputSize = 36 | 32;
+/**
+ * The props of Input: the HTML attributes of an input, except className, style and size, with the height of the field.
+ * Mark an invalid field with aria-invalid, which draws the error ring in the danger colour, also while focused.
+ */
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size'> & {
+  /** The height in px: 36 for forms and search, 32 for fields inside a table. Defaults to 36. */
+  size?: InputSize;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A single-line text field in the design system's look: 8px radius, a 1px ring that turns blue on focus, 14px body type.
+ * It takes every attribute of an input (type, inputMode, value, onChange). For a prefix, suffix, icon or shortcut hint,
+ * put an InputGroupInput in an InputGroup.
+ */
+export declare function Input({ size, ref, ...rest }: InputProps): JSX.Element;

package/dist/components/input/Input.js

@@ -0,0 +1,26 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Input } from "@base-ui/react/input";
+// src/components/input/Input.tsx
+const inputVariants = cva("rt:w-full rt:min-w-0 rt:rounded-lg rt:bg-background rt:text-b3 rt:text-foreground rt:placeholder:text-muted-foreground rt:shadow-ring-subtle rt:outline-none rt:transition-colors rt:forced-outline rt:focus-visible:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
+	variants: { size: {
+		36: "rt:h-9 rt:px-3",
+		32: "rt:h-8 rt:px-2.75"
+	} },
+	defaultVariants: { size: 36 }
+});
+/**
+* A single-line text field in the design system's look: 8px radius, a 1px ring that turns blue on focus, 14px body type.
+* It takes every attribute of an input (type, inputMode, value, onChange). For a prefix, suffix, icon or shortcut hint,
+* put an InputGroupInput in an InputGroup.
+*/
+function Input$1({ size = 36, ref, ...rest }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input",
+		ref,
+		className: cn(inputVariants({ size })),
+		...rest
+	});
+}
+export { Input$1 as Input };

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

@@ -0,0 +1,2 @@
+import { Input, InputProps, InputSize } from "./Input.js";
+export { Input, type InputProps, type InputSize };

package/dist/components/input/index.js

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

package/dist/components/input-group/InputGroup.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes, InputHTMLAttributes, JSX, Ref } from "react";
+/** The height of the group in px: 36 is the design system's input, 32 the compact one inside tables. */
+export type InputGroupSize = 36 | 32;
+/** The props of InputGroup: the HTML attributes of a div, except className and style, with the height of the group. */
+export type InputGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> & {
+  /** The height in px: 36 for forms and search, 32 for fields inside a table. Defaults to 36. */
+  size?: InputGroupSize;
+  /** Receives the group element. */
+  ref?: Ref<HTMLDivElement>;
+};
+/**
+ * A field with a prefix, suffix, icon or shortcut hint beside the input, inside one ring. Put an InputGroupInput in it
+ * and an InputGroupAddon on either side, for example a rupee sign before a price or kg after a weight.
+ */
+export declare function InputGroup({ size, ref, ...rest }: InputGroupProps): JSX.Element;
+/** The side of the input an addon sits on: start is before it, end is after it. */
+export type InputGroupAddonAlign = 'start' | 'end';
+/** The props of InputGroupAddon: the HTML attributes of a div, except className and style, with its side. */
+export type InputGroupAddonProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> & {
+  /** The side of the input: start before it, end after it. Defaults to start. */
+  align?: InputGroupAddonAlign;
+};
+/**
+ * Holds an icon, a prefix, a suffix or a shortcut hint on one side of the input. Clicking it, off a button, moves focus
+ * to the input.
+ */
+export declare function InputGroupAddon({ align, ...rest }: InputGroupAddonProps): JSX.Element;
+/** The props of InputGroupText: the HTML attributes of a span, except className and style. */
+export type InputGroupTextProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'style'>;
+/** A text prefix or suffix inside an addon, such as a currency sign or a unit, in the muted colour. */
+export declare function InputGroupText(props: InputGroupTextProps): JSX.Element;
+/** The props of InputGroupShortcut: the HTML attributes of a kbd, except className and style. */
+export type InputGroupShortcutProps = Omit<HTMLAttributes<HTMLElement>, 'className' | 'style'>;
+/** A shortcut hint such as ⌘K inside an end addon, drawn as a small keycap. */
+export declare function InputGroupShortcut(props: InputGroupShortcutProps): JSX.Element;
+/** The props of InputGroupInput: the HTML attributes of an input, except className, style and size. */
+export type InputGroupInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size'> & {
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/** The input of an InputGroup. It draws no ring: the group does. Mark it invalid with aria-invalid. */
+export declare function InputGroupInput({ ref, ...rest }: InputGroupInputProps): JSX.Element;

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

@@ -0,0 +1,83 @@
+import { cn } from "../../lib/cn.js";
+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
+const groupVariants = cva("rt:flex rt:w-full rt:min-w-0 rt:items-center rt:gap-2 rt:rounded-lg rt:bg-background rt:shadow-ring-subtle rt:transition-colors rt:forced-outline rt:focus-within:shadow-ring-focus rt:has-aria-invalid:shadow-ring-invalid rt:has-aria-invalid:focus-within:shadow-ring-invalid rt:has-disabled:opacity-50", {
+	variants: { size: {
+		36: "rt:h-9 rt:px-3",
+		32: "rt:h-8 rt:px-2.75"
+	} },
+	defaultVariants: { size: 36 }
+});
+/**
+* A field with a prefix, suffix, icon or shortcut hint beside the input, inside one ring. Put an InputGroupInput in it
+* and an InputGroupAddon on either side, for example a rupee sign before a price or kg after a weight.
+*/
+function InputGroup({ size = 36, ref, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		ref,
+		className: cn(groupVariants({ size })),
+		...rest
+	});
+}
+const addonVariants = cva("rt:flex rt:shrink-0 rt:cursor-text rt:items-center rt:gap-2 rt:text-muted-foreground rt:select-none", {
+	variants: { align: {
+		start: "rt:order-first",
+		end: "rt:order-last"
+	} },
+	defaultVariants: { align: "start" }
+});
+/**
+* Holds an icon, a prefix, a suffix or a shortcut hint on one side of the input. Clicking it, off a button, moves focus
+* to the input.
+*/
+function InputGroupAddon({ align = "start", ...rest }) {
+	const addonRef = useRef(null);
+	useEffect(() => {
+		const element = addonRef.current;
+		if (element === null) return;
+		const focusInput = (event) => {
+			if (event.defaultPrevented || event.target.closest("button") !== null) return;
+			element.parentElement?.querySelector("input")?.focus();
+		};
+		element.addEventListener("click", focusInput);
+		return () => element.removeEventListener("click", focusInput);
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		ref: addonRef,
+		className: cn(addonVariants({ align })),
+		...rest
+	});
+}
+/** A text prefix or suffix inside an addon, such as a currency sign or a unit, in the muted colour. */
+function InputGroupText(props) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "input-group-text",
+		className: "rt:text-b3 rt:text-muted-foreground",
+		...props
+	});
+}
+/** A shortcut hint such as ⌘K inside an end addon, drawn as a small keycap. */
+function InputGroupShortcut(props) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "input-group-shortcut",
+		className: "rt:inline-flex rt:h-5 rt:items-center rt:rounded-sm rt:px-1 rt:text-c1 rt:text-muted-foreground rt:shadow-ring-hairline",
+		...props
+	});
+}
+/** The input of an InputGroup. It draws no ring: the group does. Mark it invalid with aria-invalid. */
+function InputGroupInput({ ref, ...rest }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		ref,
+		className: "rt:h-full rt:min-w-0 rt:flex-1 rt:bg-transparent rt:text-b3 rt:text-foreground rt:placeholder:text-muted-foreground rt:outline-none rt:disabled:cursor-not-allowed",
+		...rest
+	});
+}
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupShortcut, InputGroupText };

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

@@ -0,0 +1,2 @@
+import { InputGroup, InputGroupAddon, InputGroupAddonAlign, InputGroupAddonProps, InputGroupInput, InputGroupInputProps, InputGroupProps, InputGroupShortcut, InputGroupShortcutProps, InputGroupSize, InputGroupText, InputGroupTextProps } from "./InputGroup.js";
+export { InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupShortcut, type InputGroupShortcutProps, type InputGroupSize, InputGroupText, type InputGroupTextProps };

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

@@ -0,0 +1 @@
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupShortcut, InputGroupText } from "./InputGroup.js";

package/dist/components/kbd/Kbd.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, JSX, Ref } from "react";
+/** The props of Kbd: the HTML attributes of a kbd element, except className and style. */
+export type KbdProps = Omit<HTMLAttributes<HTMLElement>, 'className' | 'style'> & {
+  /** The key: a symbol such as ⌘ or ↵, a letter, or a short name such as esc. */
+  children: React.ReactNode;
+  /** Receives the rendered element. */
+  ref?: Ref<HTMLElement>;
+};
+/** A key hint, 20px high with a 4px radius, such as ⌘K or esc. */
+export declare function Kbd({ children, ref, ...rest }: KbdProps): JSX.Element;
+/** The props of KbdGroup: the HTML attributes of a span, except className and style. */
+export type KbdGroupProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'style'> & {
+  /** The keys of one shortcut, each a Kbd. */
+  children: React.ReactNode;
+};
+/** Puts the keys of one shortcut in a row with a 4px gap. */
+export declare function KbdGroup({ children, ...rest }: KbdGroupProps): JSX.Element;

package/dist/components/kbd/Kbd.js

@@ -0,0 +1,21 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/kbd/Kbd.tsx
+/** A key hint, 20px high with a 4px radius, such as ⌘K or esc. */
+function Kbd({ children, ref, ...rest }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		...rest,
+		ref,
+		className: cn("rt:inline-flex rt:h-5 rt:min-w-5 rt:w-fit rt:items-center rt:justify-center rt:rounded-sm rt:bg-muted rt:px-1 rt:font-sans rt:text-c2 rt:text-foreground-subdued rt:select-none"),
+		children
+	});
+}
+/** Puts the keys of one shortcut in a row with a 4px gap. */
+function KbdGroup({ children, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className: "rt:inline-flex rt:items-center rt:gap-1",
+		children
+	});
+}
+export { Kbd, KbdGroup };

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

@@ -0,0 +1,2 @@
+import { Kbd, KbdGroup, KbdGroupProps, KbdProps } from "./Kbd.js";
+export { Kbd, KbdGroup, type KbdGroupProps, type KbdProps };

package/dist/components/kbd/index.js

@@ -0,0 +1 @@
+export { Kbd, KbdGroup } from "./Kbd.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 rt:forced-outline";
+/**
+* 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/link-provider/LinkProvider.d.ts

@@ -0,0 +1,29 @@
+import { AnchorHTMLAttributes, JSX, ReactElement, ReactNode, Ref } from "react";
+/**
+ * What the app's link element receives from Ratio: the address, Ratio's styling class, the content and the attributes
+ * the component sets, such as aria-current and onClick. Spread them all onto the element.
+ */
+export type LinkRenderProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
+  /** Where the link goes. A router link takes it as its own address prop, such as React Router's `to`. */
+  href: string;
+  /** Receives the rendered element. */
+  ref?: Ref<HTMLAnchorElement>;
+};
+/** The app's link element: a function that draws it from the link props. */
+export type LinkRender = (props: LinkRenderProps) => ReactElement;
+/** The props of LinkProvider. */
+export type LinkProviderProps = {
+  /**
+   * Draws every link Ratio renders. The function receives href, the styling class, the content and attributes such as
+   * aria-current and onClick, all to spread onto the element: `({ href, ...props }) => <RouterLink to={href} {...props} />`.
+   */
+  render: LinkRender;
+  /** The app, or the part of it that the router serves. */
+  children: ReactNode;
+};
+/**
+ * Draws every link of Ratio's components with the app's own router link, so a click navigates without a page reload:
+ * SideNav rows with an href, DataTable row links and the PageHeader back link. Wrap the app once, at its root. Without
+ * it those links are plain <a href> elements, which reload the page.
+ */
+export declare function LinkProvider({ render, children }: LinkProviderProps): JSX.Element;

package/dist/components/link-provider/LinkProvider.js

@@ -0,0 +1,15 @@
+import { LinkContext } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/link-provider/LinkProvider.tsx
+/**
+* Draws every link of Ratio's components with the app's own router link, so a click navigates without a page reload:
+* SideNav rows with an href, DataTable row links and the PageHeader back link. Wrap the app once, at its root. Without
+* it those links are plain <a href> elements, which reload the page.
+*/
+function LinkProvider({ render, children }) {
+	return /* @__PURE__ */ jsx(LinkContext, {
+		value: render,
+		children
+	});
+}
+export { LinkProvider };

package/dist/components/link-provider/RatioLink.js

@@ -0,0 +1,18 @@
+import { LinkContext } from "./context.js";
+import { use } from "react";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/link-provider/RatioLink.tsx
+/**
+* A link of one of Ratio's components, drawn by the app's LinkProvider, or a plain <a> without one. For the package's own
+* components only; the package does not export it.
+*/
+function RatioLink({ ref, ...props }) {
+	const render = use(LinkContext);
+	return useRender({
+		defaultTagName: "a",
+		render: render ? (merged) => render(merged) : void 0,
+		ref,
+		props
+	});
+}
+export { RatioLink };

package/dist/components/link-provider/context.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+// src/components/link-provider/context.ts
+const LinkContext = createContext(void 0);
+export { LinkContext };

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

@@ -0,0 +1,2 @@
+import { LinkProvider, LinkProviderProps, LinkRender, LinkRenderProps } from "./LinkProvider.js";
+export { LinkProvider, type LinkProviderProps, type LinkRender, type LinkRenderProps };

package/dist/components/link-provider/index.js

@@ -0,0 +1 @@
+export { LinkProvider } from "./LinkProvider.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;