@firecms/ui 3.0.0-alpha.50

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 FireCMS
+
+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,175 @@
+<p align="center">
+    <img src="https://firecms.co/img/dark_mode.webp" alt="Intro video" style="max-width: 100%;"/>
+</p>
+
+<p align="center">
+  <a href="https://firecms.co">
+    <img src="https://firecms.co/img/logo_small.png" width="240px" alt="FireCMS logo" />
+  </a>
+</p>
+
+<h1 align="center">FireCMS</h1>
+<h3 align="center">Awesome Firebase/Firestore-based headless CMS</h3>
+<p align="center"><a href="https://demo.firecms.co">Live demo</a></p>
+
+<br />
+
+
+[![NPM](https://img.shields.io/npm/v/firecms.svg)](https://www.npmjs.com/package/firecms) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+Designed by developers for developers, FireCMS is a headless CMS and admin panel
+that seamlessly integrates with **Firebase and Firestore** by default, but is
+also
+compatible with any backend.
+
+Effortlessly generate **CRUD views** based on your configuration. FireCMS is
+simple
+to set up for standard cases and easy to extend and customize for more specific
+needs.
+
+Built to produce collection and form views that naturally align with the
+collection/document model, FireCMS covers a wide range of basic and advanced use
+cases. With extensibility in mind, it's easy to create your own views or modify
+existing ones.
+
+FireCMS does **not impose any data structure** restrictions, ensuring a smooth,
+out-of-the-box experience for any project.
+
+### Core technologies
+
+FireCMS is based on this great technologies:
+
+- Typescript
+- Firebase SDK 9
+- React + React Router 6
+- Material UI 5
+- Formik + Yup
+
+### Quickstart
+
+The easiest way to get going is to check our quickstart guide! You will just
+need to follow some quick steps:
+
+https://firecms.co/docs/quickstart
+
+### Demo
+
+Check the demo with all the core functionalities.
+
+https://demo.firecms.co
+
+> You can modify the data, but it gets periodically restored.
+
+### Changelog
+
+https://firecms.co/docs/changelog
+
+## Features
+
+FireCMS has been meticulously crafted to make it incredibly easy for developers
+to build a CMS/admin tool while offering an excellent data editing experience
+and a user-friendly interface for marketers and content managers.
+
+### 🏓 Exceptional Spreadsheet View
+
+We've developed a highly efficient windowed **spreadsheet view** for
+collections, allowing inline editing for most common fields, as well as popup
+views for other cases and your custom field implementations.
+
+Featuring **real-time** support, FireCMS is perfect for apps that require
+constant updates. It also supports **text search** (through an external provider
+like Algolia, if using Firestore), **filtering and sorting**, and **exporting**
+data.
+
+### ✨ Robust Forms
+
+![fields](https://firecms.co/img/post_editing.webp)
+
+When editing an entity, FireCMS offers a nested system of side dialogs for
+navigating through **subcollections** and accessing custom views (such as custom
+forms or blog previews). This functionality can also be accessed
+programmatically using the `useSideEntityController` hook.
+
+FireCMS includes **over 15 built-in fields** with numerous customization and
+validation options. The components have been carefully designed for an
+outstanding user experience, including advanced features like **references** to
+other collections, **markdown**, and **array reordering**.
+
+For unsupported use cases, create your own **custom field** as a React
+component.
+
+FireCMS also supports **conditional fields** in forms, allowing you to define
+rules for active fields based on your logic.
+
+### 👮 Authentication, Permissions, and Role System
+
+Define which navigation views users can see and the operations (create, edit,
+delete) they can perform based on your role system. You can even configure this
+on a per-entity or collection level.
+
+By default, FireCMS supports all Firebase authorization mechanisms, but you can
+implement your own.
+
+### 🏹 Relational Support
+
+Define references to entities in other collections and benefit from the
+integrated reference fields and shortcuts.
+
+You can also define subcollections at the entity level for nesting data in a
+collection/document/collection model.
+
+### 🆒 Real-Time Data
+
+Every view in the CMS supports real-time data, making it suitable for displaying
+constantly updated information.
+
+Forms also support this feature, with any modified value in the database being
+updated in any open form view as long as it hasn't been touched by the user.
+This enables advanced cases where a Cloud Function is triggered after saving an
+entity, modifying some values, and requiring real-time updates.
+
+### 🗂️ File Storage
+
+FireCMS supports uploading files to Firebase Storage out of the box and provides
+specific fields for handling single and multiple file uploads, as well as
+reordering.
+
+You can replace the Firebase Storage implementation with your own.
+
+## Included example
+
+You can access the code for the demo project under
+[`example`](https://github.com/FireCMSco/firecms/tree/master/example). It includes
+every feature provided by this CMS.
+
+Keep in mind you need to update the dependencies in that project if you want to
+use it as it is, without linking it to the library source code. More details in
+its README
+
+## Contact and support
+
+If you need general support, you can open a GitHub issue.
+
+Do you need consulting setting up your Firestore-based CMS in no time? We are
+happy to help!
+`hello@firecms.co`
+
+## Development
+
+If you would like to make changes to the source, feel free to submit a PR!
+
+When developing, the core library can be found under `lib`.
+There is an example project in the folder `example`.
+
+In order to run the project, you need to create a file
+called `firebase_config.ts`
+in `example/src`.
+
+That file needs to export a valid Firebase config, that you can get
+from your Firebase console when creating a webapp for your project.
+
+Then simply run `yarn` and `yarn dev`
+
+## License
+
+MIT © [FireCMS](https://github.com/FireCMSco)

package/dist/components/Alert.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface AlertProps {
+    children: React.ReactNode;
+    onDismiss?: () => void;
+    color?: "error" | "warning" | "info" | "success";
+    action?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Alert: React.FC<AlertProps>;

package/dist/components/Autocomplete.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export type AutocompleteProps = {
+    children: React.ReactNode;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};
+export declare const useAutoComplete: ({ ref }: {
+    ref: React.MutableRefObject<HTMLDivElement | null>;
+}) => {
+    inputFocused: boolean;
+    autoCompleteOpen: boolean;
+    setAutoCompleteOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare function Autocomplete({ children, open, setOpen }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export type AutocompleteItemProps = {
+    children: React.ReactNode;
+    onClick?: () => void;
+};
+export declare function AutocompleteItem({ children, onClick }: AutocompleteItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Badge.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type BadgeColor = "primary" | "secondary" | "error";
+interface BadgeProps {
+    color?: BadgeColor;
+    children: React.ReactNode;
+    invisible?: boolean;
+}
+export declare const Badge: React.FC<BadgeProps>;
+export {};

package/dist/components/BooleanSwitch.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type BooleanSwitchProps = {
+    value: boolean | null;
+    className?: string;
+    disabled?: boolean;
+    size?: "small" | "medium";
+} & ({
+    allowIndeterminate: true;
+    onValueChange?: (newValue: boolean | null) => void;
+} | {
+    allowIndeterminate?: false;
+    onValueChange?: (newValue: boolean) => void;
+});
+export declare const BooleanSwitch: React.ForwardRefExoticComponent<BooleanSwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/BooleanSwitchWithLabel.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { BooleanSwitchProps } from "./BooleanSwitch";
+export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
+    position?: "start" | "end";
+    invisible?: boolean;
+    label?: React.ReactNode;
+    error?: boolean;
+    autoFocus?: boolean;
+};
+/**
+ * Simple boolean switch.
+ *
+ */
+export declare const BooleanSwitchWithLabel: ({ value, position, invisible, onValueChange, error, label, autoFocus, disabled, size, ...props }: BooleanSwitchWithLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type ButtonProps<P extends React.ElementType> = Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick"> & {
+    variant?: "filled" | "outlined" | "text";
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    startIcon?: React.ReactNode;
+    fullWidth?: boolean;
+    className?: string;
+    onClick?: React.MouseEventHandler<any>;
+};
+export declare function Button<P extends React.ElementType>({ children, className, variant, disabled, size, startIcon, fullWidth, component: Component, ...props }: ButtonProps<P>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare function Card({ children, style, onClick, className }: {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/CenteredView.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare function CenteredView({ children, maxWidth, fullScreen, className, }: {
+    children: React.ReactNode;
+    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+    className?: string;
+    fullScreen?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,9 @@
+interface CheckboxProps {
+    checked: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: "small" | "medium" | "large";
+}
+export declare const Checkbox: ({ checked, indeterminate, disabled, size, onCheckedChange }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Chip.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+export type ChipColorScheme = {
+    color: string;
+    text: string;
+};
+export type ChipColorKey = keyof typeof CHIP_COLORS;
+export interface ChipProps {
+    className?: string;
+    children: React.ReactNode;
+    size?: "smaller" | "small" | "medium";
+    colorScheme?: ChipColorScheme | ChipColorKey;
+    error?: boolean;
+    outlined?: boolean;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+}
+export declare const CHIP_COLORS: Record<string, ChipColorScheme>;
+/**
+ * @group Preview components
+ */
+export declare function Chip({ children, colorScheme, error, outlined, onClick, icon, size, className }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function getColorSchemeForKey(key: ChipColorKey): ChipColorScheme;

package/dist/components/CircularProgress.d.ts

@@ -0,0 +1,5 @@
+export type CircularProgressProps = {
+    size?: "small" | "medium" | "large";
+    className?: string;
+};
+export declare function CircularProgress({ size, className }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Collapse.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface CollapseProps {
+    children?: React.ReactNode;
+    className?: string;
+    in?: boolean;
+    duration?: number;
+}
+export declare function Collapse({ children, className, in: isOpen, duration }: CollapseProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Container.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type ContainerProps = {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+};
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DateTimeField.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+interface DateTimeFieldProps {
+    value?: Date;
+    onChange: (date: Date | null) => void;
+    mode?: "date" | "date_time";
+    disabled?: boolean;
+    clearable?: boolean;
+    error?: boolean;
+    size: "small" | "medium";
+    label?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    inputClassName?: string;
+    invisible?: boolean;
+    preventOpenOnFocus?: boolean;
+    locale?: string;
+}
+export declare const DateTimeField: React.FC<DateTimeFieldProps>;
+export {};

package/dist/components/DebouncedTextField.d.ts

@@ -0,0 +1,2 @@
+import { TextFieldProps } from "./index";
+export declare function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog.d.ts

@@ -0,0 +1,28 @@
+export type DialogProps = {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+    className?: string;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    fullScreen?: boolean;
+    scrollable?: boolean;
+    maxWidth?: keyof typeof widthClasses;
+    modal?: boolean;
+};
+declare const widthClasses: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    full: string;
+};
+export declare const Dialog: ({ open, onOpenChange, children, className, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DialogActions.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare function DialogActions({ children, position, translucent, className }: {
+    children: React.ReactNode;
+    position?: "sticky" | "absolute";
+    translucent?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/DialogContent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare function DialogContent({ children, className, fullHeight }: {
+    children: React.ReactNode;
+    fullHeight?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ExpandablePanel.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from "react";
+export declare function ExpandablePanel({ title, children, invisible, expanded, onExpandedChange, initiallyExpanded, titleClassName, asField, className }: PropsWithChildren<{
+    title: React.ReactNode;
+    invisible?: boolean;
+    initiallyExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    titleClassName?: string;
+    asField?: boolean;
+    className?: string;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/components/FileUpload.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export interface FileUploadError {
+    message: string;
+    code: string;
+}
+export type OnFileUploadRejected = (fileRejections: {
+    file: File;
+    errors: FileUploadError[];
+}[], event: object) => void;
+export type OnFilesUploadAdded = (files: File[]) => void;
+export type FileUploadProps = {
+    accept: Record<string, string[]>;
+    onFilesAdded: OnFilesUploadAdded;
+    onFilesRejected?: OnFileUploadRejected;
+    maxSize?: number;
+    disabled?: boolean;
+    maxFiles?: number;
+    title?: React.ReactNode;
+    uploadDescription?: React.ReactNode;
+    preventDropOnDocument?: boolean;
+    size?: "small" | "medium";
+};
+export declare function FileUpload({ accept, onFilesAdded, onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription, children, preventDropOnDocument, size }: React.PropsWithChildren<FileUploadProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/IconButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type IconButtonProps<C extends React.ElementType> = Omit<(C extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<C>), "onClick"> & {
+    size?: "medium" | "small" | "large";
+    variant?: "ghost" | "filled";
+    shape?: "circular" | "square";
+    disabled?: boolean;
+    toggled?: boolean;
+    component?: C;
+    onClick?: React.MouseEventHandler<any>;
+};
+export declare const IconButton: React.ComponentType<IconButtonProps<any>>;

package/dist/components/InfoLabel.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare function InfoLabel({ children, mode }: {
+    children: React.ReactNode;
+    mode?: "info" | "warn";
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/InputLabel.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type InputLabelProps = {
+    children?: React.ReactNode;
+    className?: string;
+    shrink?: boolean;
+} & React.LabelHTMLAttributes<HTMLLabelElement>;
+export declare const InputLabel: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    className?: string | undefined;
+    shrink?: boolean | undefined;
+} & React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/LoadingButton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ButtonProps } from "./Button";
+export type LoadingButtonProps<P extends React.ElementType> = ButtonProps<P> & {
+    startIcon?: React.ReactNode;
+    loading?: boolean;
+};
+export declare function LoadingButton<P extends React.ElementType = "button">({ children, loading, disabled, onClick, startIcon, ...props }: LoadingButtonProps<P>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Markdown.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface MarkdownProps {
+    source: string;
+    className?: string;
+}
+/**
+ * @group Preview components
+ */
+export declare const Markdown: React.FunctionComponent<MarkdownProps>;

package/dist/components/Menu.d.ts

@@ -0,0 +1,14 @@
+export type MenuProps = {
+    children: React.ReactNode;
+    trigger: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?(open: boolean): void;
+};
+export declare function Menu({ children, trigger, open, defaultOpen, onOpenChange }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export type MenuItemProps = {
+    children: React.ReactNode;
+    dense?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+};
+export declare function MenuItem({ children, dense, onClick }: MenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelect.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export type MultiSelectProps = {
+    open?: boolean;
+    name?: string;
+    id?: string;
+    onOpenChange?: (open: boolean) => void;
+    value?: string[];
+    containerClassName?: string;
+    className?: string;
+    inputClassName?: string;
+    onMultiValueChange?: (updatedValue: string[]) => void;
+    placeholder?: React.ReactNode;
+    renderValue?: (values: string, index: number) => React.ReactNode;
+    renderValues?: (values: string[]) => React.ReactNode;
+    size?: "small" | "medium";
+    label?: React.ReactNode;
+    disabled?: boolean;
+    error?: boolean;
+    position?: "item-aligned" | "popper";
+    endAdornment?: React.ReactNode;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+    padding?: boolean;
+    includeFocusOutline?: boolean;
+    children?: React.ReactNode;
+};
+interface MultiSelectContextProps {
+    fieldValue?: string[];
+    setInputValue: (v: string) => void;
+    onValueChangeInternal: (v: string) => void;
+}
+export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
+export declare function MultiSelect({ value, open, onMultiValueChange, size, label, disabled, renderValue, renderValues, includeFocusOutline, containerClassName, className, children, error }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export interface MultiSelectItemProps {
+    value: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare function MultiSelectItem({ children, value, className }: MultiSelectItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Paper.d.ts

@@ -0,0 +1,5 @@
+export declare function Paper({ children, style, className, }: {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Popover.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export type PopoverSide = "top" | "right" | "bottom" | "left";
+export type PopoverAlign = "start" | "center" | "end";
+export interface PopoverProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: PopoverSide;
+    sideOffset?: number;
+    align?: PopoverAlign;
+    alignOffset?: number;
+    arrowPadding?: number;
+    sticky?: "partial" | "always";
+    hideWhenDetached?: boolean;
+    avoidCollisions?: boolean;
+    enabled?: boolean;
+    modal?: boolean;
+    className?: string;
+}
+export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, className }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchBar.d.ts

@@ -0,0 +1,10 @@
+interface SearchBarProps {
+    onTextSearch: (searchString?: string) => void;
+    placeholder?: string;
+    expandable?: boolean;
+    large?: boolean;
+    className?: string;
+    autoFocus?: boolean;
+}
+export declare function SearchBar({ onTextSearch, placeholder, expandable, large, className, autoFocus }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export {};