@pmax-lt/ui-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PMAX
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# @pmax-lt/ui-react
+
+The PMAX design system as React components — tokens, primitives, and commerce/marketing components, built from the Figma-derived component library plan.
+
+## Install
+
+```sh
+npm install @pmax-lt/ui-react
+```
+
+`react` and `react-dom` (^19) are peer dependencies.
+
+## Usage
+
+```tsx
+import "@pmax-lt/ui-react/tokens.css";
+import "@pmax-lt/ui-react/styles.css";
+import { Button, ProductCard } from "@pmax-lt/ui-react";
+
+function Example() {
+  return <Button variant="primary">Add to cart</Button>;
+}
+```
+
+- `tokens.css` — design tokens as CSS custom properties (`--brand`, `--r-lg`, `--sp-6`, …). Re-theming another brand onto these components means shipping a different token file — components only ever read the tokens, never a raw hex or px value.
+- `styles.css` — the compiled component styles (CSS Modules output).
+
+## What's here
+
+- **Primitives** (18): Icon, Text, Button, IconButton, Chip, CountPill, Tag, Input, SearchField, Checkbox, RangeSlider, Select, DisclosureToggle, Accordion, Surface, Divider, Skeleton, Overlay.
+- **Header cluster**: AnnouncementBar, Logo, ContactItem, LangSwitcher, CartButton, NavItem, NavBar, CategoryTile, CategoryRail, HeaderShell.
+- **Product & catalogue**: Price, FulfillmentBadges, WishlistButton, CompareButton, AddToCartButton, ProductCard, ProductGrid, ProductCarousel, SectionHeader, SortMenu, FilterSection, FilterChipGroup, PriceRangeFilter, FilterPanel, ActiveFilters, Pagination.
+- **Product detail**: ProductGallery, SkuChip, FulfillmentPanel, SpecItem, SpecGrid, CollapsiblePanel, AttributeChip, AttributeList, Prose.
+- **Marketing, layout, feedback**: HeroSlide, HeroCarousel, MediaBanner, PromoCard, ArticleCard, Footer, Modal, Toast, Drawer, Breadcrumbs.
+
+Page-shell templates (PageShell, HomeTemplate, CategoryTemplate, …) aren't built yet — they're the most composite tier and depend on everything above.
+
+## Known gaps
+
+- `Logo` renders a typographic placeholder, not the real PMAX lettermarks — those need exporting from the source Figma file.
+- No mobile navigation / filter drawer layout exists yet; the source design has no mobile frames to build from.
+- `ProductCard`'s "added to cart" success state and a few other states aren't in the source design — see inline component comments for what was proposed instead.
+
+## Local development
+
+```sh
+npm run storybook   # Storybook at localhost:6006 — Foundations, per-component stories, and a Kitchen Sink page
+npm run build        # builds dist/
+npm run typecheck
+```

package/dist/components/ActiveFilters.d.ts

@@ -0,0 +1,11 @@
+export type ActiveFilter = {
+    key: string;
+    label: string;
+};
+export type ActiveFiltersProps = {
+    values: ActiveFilter[];
+    onRemove: (key: string) => void;
+    onClearAll: () => void;
+};
+/** Not in the source design — required once filters exist (§1 "Gaps"). */
+export declare function ActiveFilters({ values, onRemove, onClearAll }: ActiveFiltersProps): import("react").JSX.Element | null;

package/dist/components/AddToCartButton.d.ts

@@ -0,0 +1,14 @@
+export type AddToCartButtonProps = {
+    onAdd: () => void;
+    loading?: boolean;
+    added?: boolean;
+    disabled?: boolean;
+    variant?: "icon" | "labelled";
+};
+/**
+ * The "added" success state isn't in the source design (§1 "Gaps") —
+ * proposed here as the state-grammar's `selected` treatment (solid ink)
+ * with a check icon, reusing the existing vocabulary instead of inventing
+ * a new (undesigned) success color.
+ */
+export declare function AddToCartButton({ onAdd, loading, added, disabled, variant }: AddToCartButtonProps): import("react").JSX.Element;

package/dist/components/AnnouncementBar.d.ts

@@ -0,0 +1,10 @@
+import { IconName } from '../primitives/Icon';
+export type AnnouncementBarProps = {
+    message: string;
+    icon?: IconName;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    /** When set, the dismissal is remembered in localStorage under this key. */
+    storageKey?: string;
+};
+export declare function AnnouncementBar({ message, icon, dismissible, onDismiss, storageKey }: AnnouncementBarProps): import("react").JSX.Element | null;

package/dist/components/ArticleCard.d.ts

@@ -0,0 +1,8 @@
+export type ArticleCardProps = {
+    image: string;
+    title: string;
+    excerpt: string;
+    date: string;
+    href: string;
+};
+export declare function ArticleCard({ image, title, excerpt, date, href }: ArticleCardProps): import("react").JSX.Element;

package/dist/components/AttributeChip.d.ts

@@ -0,0 +1,6 @@
+export type AttributeChipProps = {
+    label: string;
+    value: string;
+    highlight?: boolean;
+};
+export declare function AttributeChip({ label, value, highlight }: AttributeChipProps): import("react").JSX.Element;

package/dist/components/AttributeList.d.ts

@@ -0,0 +1,6 @@
+import { AttributeChipProps } from './AttributeChip';
+export type AttributeListProps = {
+    items: AttributeChipProps[];
+    columns?: 1 | 2;
+};
+export declare function AttributeList({ items, columns }: AttributeListProps): import("react").JSX.Element;

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+export type BreadcrumbItem = {
+    label: string;
+    href?: string;
+};
+export type BreadcrumbsProps = {
+    items: BreadcrumbItem[];
+};
+/** Absent from the source design (§1 "Gaps") — PDP navigation and SEO both want it. */
+export declare function Breadcrumbs({ items }: BreadcrumbsProps): import("react").JSX.Element;

package/dist/components/CartButton.d.ts

@@ -0,0 +1,5 @@
+export type CartButtonProps = {
+    count: number;
+    href?: string;
+};
+export declare function CartButton({ count, href }: CartButtonProps): import("react").JSX.Element;

package/dist/components/CategoryRail.d.ts

@@ -0,0 +1,6 @@
+import { CategoryTileProps } from './CategoryTile';
+export type CategoryRailProps = {
+    items: Omit<CategoryTileProps, "selected">[];
+    selectedKey?: string;
+};
+export declare function CategoryRail({ items, selectedKey }: CategoryRailProps): import("react").JSX.Element;

package/dist/components/CategoryTile.d.ts

@@ -0,0 +1,8 @@
+import { IconName } from '../primitives/Icon';
+export type CategoryTileProps = {
+    icon: IconName;
+    label: string;
+    href: string;
+    selected?: boolean;
+};
+export declare function CategoryTile({ icon, label, href, selected }: CategoryTileProps): import("react").JSX.Element;

package/dist/components/CollapsiblePanel.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type CollapsiblePanelProps = {
+    title: string;
+    defaultOpen?: boolean;
+    children: ReactNode;
+};
+/** Wraps Techninės specifikacijos, Apžvalga, Komponentai, Kita informacija. */
+export declare function CollapsiblePanel({ title, defaultOpen, children }: CollapsiblePanelProps): import("react").JSX.Element;

package/dist/components/CompareButton.d.ts

@@ -0,0 +1,11 @@
+export type CompareButtonProps = {
+    active: boolean;
+    onToggle: () => void;
+};
+/**
+ * Only visible on card hover in the design — that alone leaves no
+ * keyboard-reachable equivalent (§1 "Gaps"), so this always renders and
+ * relies on the card wrapper to show it via `:focus-within` as well as
+ * `:hover`, not `:hover` alone.
+ */
+export declare function CompareButton({ active, onToggle }: CompareButtonProps): import("react").JSX.Element;

package/dist/components/ContactItem.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { IconName } from '../primitives/Icon';
+export type ContactItemProps = {
+    icon: IconName;
+    children: ReactNode;
+    href?: string;
+};
+export declare function ContactItem({ icon, children, href }: ContactItemProps): import("react").JSX.Element;

package/dist/components/Drawer.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type DrawerProps = {
+    side: "left" | "right" | "bottom";
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+};
+/** Mobile navigation, filter panel and mini-cart all need this (§6 "Gaps"). */
+export declare function Drawer({ side, open, onClose, title, children }: DrawerProps): import("react").JSX.Element;

package/dist/components/FilterChipGroup.d.ts

@@ -0,0 +1,14 @@
+export type FilterChipOption = {
+    label: string;
+    value: string;
+    count?: number;
+};
+export type FilterChipGroupProps = {
+    options: FilterChipOption[];
+    value: string[];
+    onChange: (value: string[]) => void;
+    columns?: 1 | 2;
+    /** "multi" allows several selections; "single" behaves like a radio group. */
+    mode?: "multi" | "single";
+};
+export declare function FilterChipGroup({ options, value, onChange, columns, mode }: FilterChipGroupProps): import("react").JSX.Element;

package/dist/components/FilterPanel.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export type FilterPanelProps = {
+    sections: ReactNode;
+    onReset?: () => void;
+};
+/**
+ * Sidebar (desktop) only — a mobile drawer variant is a documented gap
+ * (§1 "Gaps": "no mobile navigation, filter drawer or mini-cart").
+ * Controlled: this component holds no filter state itself, section
+ * children own their own values via props, and the app keeps the actual
+ * values in URL state.
+ */
+export declare function FilterPanel({ sections, onReset }: FilterPanelProps): import("react").JSX.Element;

package/dist/components/FilterSection.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type FilterSectionProps = {
+    title: string;
+    defaultOpen?: boolean;
+    children: ReactNode;
+};
+export declare function FilterSection({ title, defaultOpen, children }: FilterSectionProps): import("react").JSX.Element;

package/dist/components/Footer.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ContactItemProps } from './ContactItem';
+export type FooterColumn = {
+    title: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+};
+export type FooterProps = {
+    columns: FooterColumn[];
+    contact: (Omit<ContactItemProps, "children"> & {
+        children: ReactNode;
+    })[];
+    hours?: string;
+    legal: string;
+    compact?: boolean;
+};
+export declare function Footer({ columns, contact, hours, legal, compact }: FooterProps): import("react").JSX.Element;

package/dist/components/FulfillmentBadges.d.ts

@@ -0,0 +1,8 @@
+import { IconName } from '../primitives/Icon';
+export type FulfillmentBadgesProps = {
+    items: {
+        icon: IconName;
+        label: string;
+    }[];
+};
+export declare function FulfillmentBadges({ items }: FulfillmentBadgesProps): import("react").JSX.Element | null;

package/dist/components/FulfillmentPanel.d.ts

@@ -0,0 +1,12 @@
+import { IconName } from '../primitives/Icon';
+export type FulfillmentRow = {
+    icon: IconName;
+    title: string;
+    detail?: string;
+};
+export type FulfillmentPanelProps = {
+    rows: FulfillmentRow[];
+};
+/** Only the in-stock case is designed — delivery-only/unavailable rows use
+ * the same row shape, just different copy passed in by the app. */
+export declare function FulfillmentPanel({ rows }: FulfillmentPanelProps): import("react").JSX.Element;

package/dist/components/HeaderShell.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export type HeaderShellProps = {
+    announcement?: ReactNode;
+    rail?: ReactNode;
+    sticky?: boolean;
+    /** The logo + nav + actions row — composed by the consumer. */
+    children: ReactNode;
+};
+/**
+ * Owns the sticky behaviour and the 1800px content column; composes
+ * `AnnouncementBar`, `CategoryRail` and whatever chrome (`Logo`, `NavBar`,
+ * `SearchField`, `CartButton`…) the consumer passes as `children`, rather
+ * than re-deriving every one of their props itself. Product pages pass no
+ * `rail` for the compact variant.
+ */
+export declare function HeaderShell({ announcement, rail, sticky, children }: HeaderShellProps): import("react").JSX.Element;

package/dist/components/HeroCarousel.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type HeroCarouselProps = {
+    slides: ReactNode[];
+    autoplay?: boolean;
+    interval?: number;
+    /** Kept for API parity with the plan — peek amount is set via each
+     * slide's own width (88% here), not recomputed from this prop. */
+    peek?: number;
+};
+export declare function HeroCarousel({ slides, autoplay, interval }: HeroCarouselProps): import("react").JSX.Element | null;

package/dist/components/HeroSlide.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export type HeroSlideProps = {
+    eyebrow?: string;
+    title: string;
+    specs?: {
+        label: string;
+        value: string;
+    }[];
+    price?: number;
+    cta?: ReactNode;
+    image: string;
+    tone?: "yellow" | "dark" | "image-only";
+};
+export declare function HeroSlide({ eyebrow, title, specs, price, cta, image, tone }: HeroSlideProps): import("react").JSX.Element;

package/dist/components/LangSwitcher.d.ts

@@ -0,0 +1,7 @@
+import { SelectOption } from '../primitives/Select';
+export type LangSwitcherProps = {
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+};
+export declare function LangSwitcher({ value, options, onChange }: LangSwitcherProps): import("react").JSX.Element;

package/dist/components/Logo.d.ts

@@ -0,0 +1,14 @@
+import { ElementType } from 'react';
+export type LogoProps = {
+    variant?: "v1" | "v2" | "v3" | "symbol";
+    height?: number;
+    as?: ElementType;
+    className?: string;
+};
+/**
+ * Placeholder wordmark — the real brand-board lettermarks (§1 "Brand
+ * board": three lettermarks + one symbol, all vector) live in the Figma
+ * file, not the SVG export this plan was built from, so they aren't
+ * reproducible here. Swap the JSX below for the real marks once exported.
+ */
+export declare function Logo({ variant, height, as, className }: LogoProps): import("react").JSX.Element;

package/dist/components/MediaBanner.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type MediaBannerProps = {
+    media: {
+        type: "image" | "video";
+        src: string;
+    };
+    title: string;
+    subtitle?: string;
+    cta?: ReactNode;
+    cardPosition?: "left" | "right";
+};
+export declare function MediaBanner({ media, title, subtitle, cta, cardPosition }: MediaBannerProps): import("react").JSX.Element;

package/dist/components/Modal.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type ModalProps = {
+    open: boolean;
+    onClose: () => void;
+    size?: "sm" | "md" | "lg";
+    title: string;
+    children: ReactNode;
+    footerActions?: ReactNode;
+};
+export declare function Modal({ open, onClose, size, title, children, footerActions }: ModalProps): import("react").JSX.Element;

package/dist/components/NavBar.d.ts

@@ -0,0 +1,19 @@
+export type NavBarItem = {
+    key: string;
+    label: string;
+    href: string;
+    children?: {
+        label: string;
+        href: string;
+    }[];
+};
+export type NavBarProps = {
+    items: NavBarItem[];
+    activeKey?: string;
+    secondaryItems?: NavBarItem[];
+};
+/**
+ * No mobile navigation plan exists in the source design (§1 "Gaps") — this
+ * renders the desktop layout only; a mobile drawer/menu is a follow-up.
+ */
+export declare function NavBar({ items, activeKey, secondaryItems }: NavBarProps): import("react").JSX.Element;

package/dist/components/NavItem.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type NavItemProps = {
+    active?: boolean;
+    hasDropdown?: boolean;
+    open?: boolean;
+    href: string;
+    children: ReactNode;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+export declare function NavItem({ active, hasDropdown, open, href, children, onClick }: NavItemProps): import("react").JSX.Element;

package/dist/components/Pagination.d.ts

@@ -0,0 +1,7 @@
+export type PaginationProps = {
+    page: number;
+    pageCount: number;
+    onChange: (page: number) => void;
+    siblingCount?: number;
+};
+export declare function Pagination({ page, pageCount, onChange, siblingCount }: PaginationProps): import("react").JSX.Element | null;

package/dist/components/Price.d.ts

@@ -0,0 +1,11 @@
+export type PriceProps = {
+    /** Amount in the major currency unit, e.g. 1299.99. */
+    amount: number;
+    currency?: string;
+    oldPrice?: number;
+    size?: "xl" | "lg" | "sm";
+    /** e.g. "su PVM" */
+    note?: string;
+    onYellow?: boolean;
+};
+export declare function Price({ amount, currency, oldPrice, size, note, onYellow }: PriceProps): import("react").JSX.Element;

package/dist/components/PriceRangeFilter.d.ts

@@ -0,0 +1,8 @@
+export type PriceRangeFilterProps = {
+    min: number;
+    max: number;
+    value: [number, number];
+    onChange: (value: [number, number]) => void;
+    currency?: string;
+};
+export declare function PriceRangeFilter({ min, max, value, onChange, currency }: PriceRangeFilterProps): import("react").JSX.Element;

package/dist/components/ProductCard.d.ts

@@ -0,0 +1,26 @@
+import { IconName } from '../primitives/Icon';
+export type Product = {
+    id: string;
+    title: string;
+    href: string;
+    image: string;
+    imageSecondary?: string;
+    price: number;
+    oldPrice?: number;
+    fulfillment?: {
+        icon: IconName;
+        label: string;
+    }[];
+    outOfStock?: boolean;
+};
+export type ProductCardProps = {
+    product: Product;
+    layout?: "grid" | "list";
+    priority?: boolean;
+    wishlisted?: boolean;
+    onWishlistToggle?: () => void;
+    compared?: boolean;
+    onCompareToggle?: () => void;
+    loading?: boolean;
+};
+export declare function ProductCard({ product, priority, wishlisted, onWishlistToggle, compared, onCompareToggle, loading }: ProductCardProps): import("react").JSX.Element;

package/dist/components/ProductCarousel.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type ProductCarouselProps = {
+    children: ReactNode;
+    perView?: number;
+    /** Fraction of the next slide visible past the edge, e.g. 0.15. */
+    peek?: number;
+    loop?: boolean;
+};
+/** Scroll-snap based — not a JS carousel library, so keyboard (native
+ * scroll container arrow/tab keys) and touch swipe both work for free. */
+export declare function ProductCarousel({ children, perView, peek, loop }: ProductCarouselProps): import("react").JSX.Element;

package/dist/components/ProductGallery.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type ProductGalleryProps = {
+    images: string[];
+    alt: string;
+    actions?: ReactNode;
+};
+export declare function ProductGallery({ images, alt, actions }: ProductGalleryProps): import("react").JSX.Element;

package/dist/components/ProductGrid.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type ProductGridProps = {
+    columns?: 4 | 3;
+    gap?: number;
+    children: ReactNode;
+    empty?: boolean;
+    emptyMessage?: string;
+};
+export declare function ProductGrid({ columns, gap, children, empty, emptyMessage }: ProductGridProps): import("react").JSX.Element;

package/dist/components/PromoCard.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type PromoCardProps = {
+    illustration: ReactNode;
+    title: string;
+    body: string;
+    cta?: ReactNode;
+    tone?: "yellow" | "light";
+};
+export declare function PromoCard({ illustration, title, body, cta, tone }: PromoCardProps): import("react").JSX.Element;

package/dist/components/Prose.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export type ProseProps = {
+    children: ReactNode;
+};
+export declare function Prose({ children }: ProseProps): import("react").JSX.Element;

package/dist/components/SectionHeader.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type SectionHeaderProps = {
+    title: string;
+    count?: number;
+    action?: ReactNode;
+    hint?: string;
+};
+export declare function SectionHeader({ title, count, action, hint }: SectionHeaderProps): import("react").JSX.Element;

package/dist/components/SkuChip.d.ts

@@ -0,0 +1,5 @@
+export type SkuChipProps = {
+    label: string;
+    value: string;
+};
+export declare function SkuChip({ label, value }: SkuChipProps): import("react").JSX.Element;

package/dist/components/SortMenu.d.ts

@@ -0,0 +1,7 @@
+import { SelectOption } from '../primitives/Select';
+export type SortMenuProps = {
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+};
+export declare function SortMenu({ value, options, onChange }: SortMenuProps): import("react").JSX.Element;

package/dist/components/SpecGrid.d.ts

@@ -0,0 +1,6 @@
+import { SpecItemProps } from './SpecItem';
+export type SpecGridProps = {
+    items: SpecItemProps[];
+    columns?: 4 | 2;
+};
+export declare function SpecGrid({ items, columns }: SpecGridProps): import("react").JSX.Element;

package/dist/components/SpecItem.d.ts

@@ -0,0 +1,7 @@
+import { IconName } from '../primitives/Icon';
+export type SpecItemProps = {
+    icon: IconName;
+    label: string;
+    value: string;
+};
+export declare function SpecItem({ icon, label, value }: SpecItemProps): import("react").JSX.Element;

package/dist/components/Toast.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type ToastTone = "success" | "error" | "info";
+type ToastContextValue = {
+    showToast: (message: string, options?: {
+        tone?: ToastTone;
+        action?: ReactNode;
+        duration?: number;
+    }) => void;
+};
+/** Not in the source design — unavoidable once add-to-cart exists (§6 "Gaps"). */
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useToast(): ToastContextValue;
+export {};

package/dist/components/WishlistButton.d.ts

@@ -0,0 +1,6 @@
+export type WishlistButtonProps = {
+    active: boolean;
+    onToggle: () => void;
+    size?: "sm" | "md" | "lg";
+};
+export declare function WishlistButton({ active, onToggle, size }: WishlistButtonProps): import("react").JSX.Element;