@connectif/ui-components 0.0.1

package/dist/src/components/input/TextEditor.d.ts

@@ -0,0 +1,123 @@
+import React from 'react';
+import { IAllProps } from '@tinymce/tinymce-react';
+import 'tinymce/tinymce';
+import 'tinymce/models/dom/model';
+import 'tinymce/themes/silver';
+import 'tinymce/icons/default';
+import 'tinymce/skins/ui/oxide/skin.min.css';
+import 'tinymce/plugins/advlist';
+import 'tinymce/plugins/anchor';
+import 'tinymce/plugins/autolink';
+import 'tinymce/plugins/code';
+import 'tinymce/plugins/emoticons';
+import 'tinymce/plugins/image';
+import 'tinymce/plugins/link';
+import 'tinymce/plugins/lists';
+import 'tinymce/plugins/searchreplace';
+import 'tinymce/plugins/table';
+import 'tinymce/plugins/wordcount';
+import 'tinymce/plugins/emoticons/js/emojis';
+import { CodeEditorPopupProps } from './CodeEditorPopup';
+type CustomToolbarGroup = {
+    icon: string;
+    tooltip: string;
+    items: string;
+};
+type CustomToolbarGroups = {
+    [key: string]: CustomToolbarGroup;
+};
+export type TextEditorProps = Omit<IAllProps, 'value' | 'onEditorChange' | 'onChange' | 'onDirty'> & Pick<CodeEditorPopupProps, 'linterFunction'> & {
+    /**
+     * This bool turn on/off the top menuBar on the textEditor
+     * @default false
+     */
+    menuBar?: boolean;
+    /**
+     * This bool set dirty as false
+     * @default false
+     */
+    resetDirty?: boolean;
+    /**
+     * This property allows you to change the editor model between 3
+     * options from more complete to less complete.
+     * @default 'normal'
+     */
+    variant?: 'normal' | 'simple' | 'reduced';
+    /**
+     *  Custom component's height
+     * @default undefined
+     */
+    height?: string;
+    /**
+     *  This is a boolean which allows you to turn on/off the full height of the editor.
+     *  If set to true, the height property will be ignored.
+     * @default false
+     */
+    fullHeight?: boolean;
+    /**
+     *  This is an object which contains custom toolbar groups defined by the user
+     * @default {}
+     */
+    customToolbarGroups?: CustomToolbarGroups;
+    /**
+     * Variable to set value when changes from outside component
+     */
+    newValue?: string;
+    /**
+     * If true, code editor selector will be hidden. @default false
+     */
+    hideCodeEditor?: boolean;
+    /**
+     * Index of the code editor button in the toolbar.
+     * If not set, it will be added at the end of the toolbar.
+     * If customToolbarGroups is not set or is set but 'insert' group is not declared, maximum value is 6.
+     */
+    codeEditorButtonIndex?: number;
+    /**
+     * Text to display as subtitle when code editor is opened.
+     */
+    codeEditorSubtitle?: string;
+    /**
+     * Message to show in codeEditorPopup, below the code.
+     */
+    codeEditorMessageNode?: React.ReactNode;
+    /**
+     * New Tiny behavior to change code editor as readonly.
+     */
+    isCodeEditorReadonly?: boolean;
+    /**
+     * force to close code editor popup
+     */
+    forceCloseCodeEditor?: boolean;
+    /**
+     * Function called when code editor has been forcibly closed
+     */
+    onForceCloseCodeEditor?: () => void;
+    /**
+     * Function called when a new value is setter
+     */
+    onNewValueSetter?: () => void;
+    /**
+     *  onChange method called when content changes.
+     */
+    onChange: (value: string) => void;
+    /**
+     *  Set dirty value when dirty state changes.
+     */
+    onDirty?: (value: boolean) => void;
+    /**
+     *  Method called when dirty is reset.
+     */
+    onResetDirty?: () => void;
+    /**
+     *  Method called when copy to clipboard button is pressed in source code.
+     */
+    onCopyToClipboard?: (html: string) => void;
+};
+/**
+ * This is a rich-text editor that allows users to create formatted content within a user-friendly interface
+ * The output created is in HTML5 and can include lists, tables, and other useful elements, depending on your configuration.
+ * The functionality of the editor can be extended through plugins and customizations, or limited to suit your use-case.
+ */
+declare const TextEditor: ({ id, disabled, customToolbarGroups, resetDirty, initialValue, inline, height, fullHeight, toolbar, menuBar, variant, newValue, hideCodeEditor, codeEditorButtonIndex, codeEditorSubtitle, codeEditorMessageNode, isCodeEditorReadonly, forceCloseCodeEditor, onForceCloseCodeEditor, onNewValueSetter, onChange, onDirty, onResetDirty, onCopyToClipboard, linterFunction, init, ...rest }: TextEditorProps) => JSX.Element;
+export default TextEditor;

package/dist/src/components/input/TextField.d.ts

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { SxProps } from '@mui/material';
+import { IconId } from '../icon';
+export type TextFieldProps = {
+    /**
+     * Type of inner input. Only apply if this field is single line.
+     */
+    type?: 'text' | 'password';
+    /**
+     * The native `id` of input or textarea. If not supplied, a random id
+     * will be established.
+     */
+    id?: string;
+    /**
+     * Variant of this TextField. If you need to use text field in some container with your own styles
+     * you probably want to use `transparent` variant. Also you have `sx` and `inputSx` props for any
+     * customization.
+     */
+    variant?: 'default' | 'transparent';
+    /**
+     * Whether the input is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Current text value of input or textarea. Usually you will use this property to set the current
+     * value of input. It is called the "controlled" way. See the `defaultValue` property for use this
+     * TextField in an "uncontrolled" way.
+     */
+    value?: string;
+    /**
+     * Styles to customize input container, which is a Box.
+     */
+    sx?: SxProps;
+    /**
+     * Styles to customize input component, which is an input with type="text"
+     */
+    inputSx?: SxProps;
+    /**
+     * Whether the TextField is in error state.
+     */
+    isError?: boolean;
+    /**
+     * Whether to show the cross IconButton as first endAdornment component, used to clear the input
+     * (setting the value="" and calling the `onChange` handler of this TextField)
+     */
+    isClearable?: boolean;
+    /**
+     * Whether the input is multiline or not. If `true`, the internal input="text" will be replaced
+     * by a textarea
+     */
+    multiline?: boolean;
+    /**
+     * Only apply if `multiline={true}`. It is the real HTML textarea.rows attribute.
+     */
+    rows?: number;
+    /**
+     * If supplied some text, an InputLabel component will be shown just before the input.
+     */
+    label?: string;
+    /**
+     * If supplied some text, an icon with tooltip will be shown just after the label.
+     */
+    labelInfoText?: string;
+    /**
+     * If supplied some text, an InputHelperText component will be shown just after the input.
+     */
+    helperText?: string;
+    /**
+     * The placeholder text of the input
+     */
+    placeholder?: string;
+    /**
+     * The main color used by this TextField, used to represent states like active or hightlighted.
+     */
+    activeColor?: string;
+    /**
+     * Whether the input is highlighted or not. It will use the `color` of this TextField lighten by a 40%.
+     */
+    highlighted?: boolean;
+    /**
+     * Whether the input has the autoFocus attribute or not. If `true`, the input will acquire the focus the first time
+     * it gets rendered in UI.
+     */
+    autoFocus?: boolean;
+    /**
+     * If you want to use the uncontrolled (native) version of input, use defaultValue to set the initial value.
+     * If supplied a `value` prop, this `defaultValue` will be ignored.
+     */
+    defaultValue?: string;
+    /**
+     * If supplied some iconId, an Icon component will be shown as the first startAdornment.
+     */
+    iconId?: IconId;
+    /**
+     * The max lenth of text allowed in the input
+     */
+    maxLength?: number;
+    /**
+     * Settled directly in DOM element, for testing easy location purposes.
+     */
+    'data-testid'?: string;
+    autoComplete?: 'off' | 'new-password';
+    containerRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Adornment components to be placed at the start of the input
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * Adornment components to be placed at the end of the input
+     */
+    endAdornment?: React.ReactNode;
+    /**
+     * Called when the input value changes. You can get the current value of the input
+     * by accessing to `event.target.value`.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Called when the input receives a keyDown event. You can get the key by accessing
+     * `event.key`.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Called when the input gets the focus
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Called when the input losts the focus
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Called when text area scroll.
+     */
+    onScroll?: (scrollTop: number) => void;
+    /**
+     * Set if input is readonly
+     */
+    readOnly?: boolean;
+    className?: string;
+    /**
+     * Set to true if adornments must be grouped with the input instead of be inside of it.
+     * When using this option, only IconButton, MenuIconButton and Select component may be used as adornments.
+     * Any other component will not work properly.
+     * IconButton and MenuIconButton size must be 'M' or smaller.
+     */
+    groupElements?: boolean;
+};
+/**
+ * TextField is a component that renders an input field with type="text" or a textarea.
+ * It comes with some optional features like an InputLabel, an InputHelperText, a leading Icon
+ * and an IconButton to clear the current value of input or textarea.
+ *
+ * The exposed `ref` property is the refference to the native &lt;input&gt; element,
+ * typed as React.Ref&lt;HTMLInputElement&gt;
+ */
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default TextField;

package/dist/src/components/input/TextFieldContainer.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { BoxProps, SxProps } from '@mui/material';
+export type TextFieldContainerProps = React.PropsWithChildren<{
+    /**
+     * The variant of this component.
+     */
+    variant?: 'default' | 'transparent';
+    /**
+     * Custom styles to override.
+     */
+    sx?: SxProps;
+    /**
+     * The color of "active" status. Used for border on focus and background on highlighted
+     */
+    activeColor?: string;
+    /**
+     * Whether the component is disabled or not
+     */
+    disabled?: boolean;
+    /**
+     * Whether the component is highlighted or not
+     */
+    highlighted?: boolean;
+    /**
+     * Whether the component is in focus state or not
+     */
+    isFocused?: boolean;
+    /**
+     * Whether the component is in error state or not
+     */
+    isError?: boolean;
+    /**
+     * Whether the component is multiline or not
+     */
+    multiline?: boolean;
+    /**
+     * Called on click on this component
+     */
+    onClick?: BoxProps['onClick'];
+    className?: string;
+    /**
+     * Settled directly in DOM element, for testing easy location purposes.
+     */
+    'data-test'?: string;
+}>;
+/**
+ * A TextFieldContainer is just a Box with the visual styles that uses the TextField component.
+ * This TextFieldContainer could be used to style any component to looks like a TextField component.
+ */
+declare const TextFieldContainer: React.ForwardRefExoticComponent<{
+    /**
+     * The variant of this component.
+     */
+    variant?: "transparent" | "default" | undefined;
+    /**
+     * Custom styles to override.
+     */
+    sx?: SxProps | undefined;
+    /**
+     * The color of "active" status. Used for border on focus and background on highlighted
+     */
+    activeColor?: string | undefined;
+    /**
+     * Whether the component is disabled or not
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the component is highlighted or not
+     */
+    highlighted?: boolean | undefined;
+    /**
+     * Whether the component is in focus state or not
+     */
+    isFocused?: boolean | undefined;
+    /**
+     * Whether the component is in error state or not
+     */
+    isError?: boolean | undefined;
+    /**
+     * Whether the component is multiline or not
+     */
+    multiline?: boolean | undefined;
+    /**
+     * Called on click on this component
+     */
+    onClick?: BoxProps['onClick'];
+    className?: string | undefined;
+    /**
+     * Settled directly in DOM element, for testing easy location purposes.
+     */
+    'data-test'?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default TextFieldContainer;

package/dist/src/components/input/TimeField.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { TimeFieldProps as MuiTimeFieldProps } from '@mui/x-date-pickers';
+import { TextFieldProps } from './TextField';
+export type TimeFieldProps = Omit<TextFieldProps, 'value' | 'onChange' | 'multiline' | 'type' | 'isClearable' | 'defaultValue'> & {
+    value: MuiTimeFieldProps<Date>['value'];
+    onChange?: MuiTimeFieldProps<Date>['onChange'];
+    /**
+     * Wether show or not the minutes part
+     */
+    showMinutes?: boolean;
+    /**
+     * Wether show or not the seconds part. If supplied true, the `showMinutes` prop will be forced to `true`
+     */
+    showSeconds?: boolean;
+};
+/**
+ * The Time Field component lets the user select a time with the keyboard.
+ */
+declare const TimeField: ({ onChange, value, showMinutes, showSeconds, ...rest }: TimeFieldProps) => JSX.Element;
+export default TimeField;

package/dist/src/components/input/TimezoneSelector.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type TimezoneSelectorProps = {
+    initialTimezone: string;
+    onTimezoneChange: (timezone: string) => void;
+};
+declare const TimezoneSelector: ({ initialTimezone, onTimezoneChange }: TimezoneSelectorProps) => JSX.Element;
+export default TimezoneSelector;

package/dist/src/components/input/UploadClickableArea.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type UploadClickableAreaProps = React.PropsWithChildren<{
+    /**
+     * Defines the file types the file input should accept. Comma separated list of type specifiers.
+     * For example ".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+     */
+    accept: string;
+    /**
+     * Raised when a file is uploaded. The file is passed as the argument.
+     */
+    onFilesChanged: (file: FileList) => void;
+}>;
+declare const UploadClickableArea: ({ accept, onFilesChanged, children }: UploadClickableAreaProps) => JSX.Element;
+export default UploadClickableArea;

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

@@ -0,0 +1,26 @@
+export { default as Autocomplete, AutocompleteProps } from './Autocomplete';
+export { default as Select, SelectProps } from './Select';
+export { default as Switch, SwitchProps } from './Switch';
+export { default as TextFieldContainer, TextFieldContainerProps } from './TextFieldContainer';
+export { default as TextField, TextFieldProps } from './TextField';
+export { default as TextEditor, TextEditorProps } from './TextEditor';
+export { default as CodeEditor, CodeEditorProps } from './CodeEditor';
+export { default as TimeField, TimeFieldProps } from './TimeField';
+export { default as PhoneField, PhoneFieldProps } from './PhoneField';
+export { default as NumberField, NumberFieldProps } from './NumberField';
+export { default as DatePicker, DatePickerProps } from './DatePicker';
+export { default as DebouncedTextField, DebouncedTextFieldProps } from './DebouncedTextField';
+export { default as InputLabel, InputLabelProps } from './InputLabel';
+export { default as InputHelperText, InputHelperTextProps } from './InputHelperText';
+export { default as SelectPopover, SelectPopoverProps } from './SelectPopover';
+export { default as DateIntervalPicker, DateIntervalPickerProps, DateIntervalValues } from './DateIntervalPicker';
+export { default as SelectPopoverItem, SelectPopoverItemProps } from './SelectPopoverItem';
+export { default as Checkbox, CheckboxProps } from './Checkbox';
+export { default as Radio, RadioProps } from './Radio';
+export { default as TimezoneSelector, TimezoneSelectorProps } from './TimezoneSelector';
+export { default as DaysOfWeekPicker, DaysOfWeekPickerProps, DaysOfWeek } from './DaysOfWeekPicker';
+export { default as ColorPicker, ColorPickerProps, colorPickerDefaultColors, isValidColor } from './ColorPicker';
+export { default as UploadClickableArea, UploadClickableAreaProps } from './UploadClickableArea';
+export { default as CategorizedPicker, CategorizedPickerProps } from './CategorizedPicker';
+export { default as ItemSelector, ItemSelectorProps, ItemSelectorItem } from './ItemSelector';
+export { default as PageSelector, PageSelectorProps } from './PageSelector';

package/dist/src/components/layout/Box.d.ts

@@ -0,0 +1,2 @@
+declare const Box: import("@mui/types").OverridableComponent<import("@mui/system").BoxTypeMap<{}, "div", import("@mui/material").Theme>>;
+export default Box;

package/dist/src/components/layout/Collapse.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CollapseProps as MuiCollapseProps } from '@mui/material';
+export type CollapseProps = MuiCollapseProps;
+declare const Collapse: (props: MuiCollapseProps) => JSX.Element;
+export default Collapse;

package/dist/src/components/layout/CollapsiblePanel.d.ts

@@ -0,0 +1,48 @@
+import { SxProps } from '@mui/material';
+import * as React from 'react';
+import { ListItemButtonProps } from '../list/ListItemButton';
+import { DividerProps } from '../divider';
+export type CollapsiblePanelProps = React.PropsWithChildren<{
+    sx?: SxProps;
+    /**
+     * Whether the panel is collapsed or not. If not supplied, the panel is not collapsed by default.
+     */
+    isCollapsed: boolean;
+    /**
+     * Called when toggle button is clicked.
+     * If supplied `header` prop, this field will be ignored.
+     */
+    onToggle?: () => void;
+    /**
+     * The header to use for this collapsible panel.
+     * Usually, it will be any clickable element like a ListItemButton, where you will have
+     * to manage the click event and toggle the `isCollapsed` property properly.
+     *
+     * If supplied, the `headerText` and `onToggle` will be ignored.
+     */
+    header?: React.ReactNode;
+    /**
+     * The text to use in the header for this collapsible panel. Header is always visible.
+     * It uses internally a ListItemButton element.
+     * If supplied `header` prop, this field will be ignored.
+     */
+    headerText?: string;
+    /**
+     * Style properties to use for header when property 'header' is not provided.
+     */
+    headerBaseSx?: SxProps;
+    /**
+     * Whether the collapse will be placed down or up from the header.
+     */
+    collapseDirection?: 'down' | 'up';
+    /**
+     * Whether to add a Divider between header and panel or not. Default is false.
+     */
+    withDivider?: boolean;
+    /**
+     * Props for divider
+     */
+    dividerProps?: DividerProps;
+}> & Pick<ListItemButtonProps, 'disabled'>;
+declare const CollapsiblePanel: ({ sx, children, isCollapsed, onToggle, header, headerText, headerBaseSx, collapseDirection, disabled, withDivider, dividerProps }: CollapsiblePanelProps) => JSX.Element;
+export default CollapsiblePanel;

package/dist/src/components/layout/CollapsiblePanelSwitcher.d.ts

@@ -0,0 +1,87 @@
+import { SxProps } from '@mui/material';
+import * as React from 'react';
+import { ListItemButtonProps } from '../list/ListItemButton';
+export type CollapsiblePanelSwitcherProps = React.PropsWithChildren<{
+    sx?: SxProps;
+    /**
+     * The variant of the CollapsiblePanel. Default 'sortable-move'
+     */
+    variant?: 'sortable-move' | 'sortable-arrow';
+    /**
+     * Whether the panel is collapsed or not. If not supplied, the panel is not collapsed by default.
+     */
+    isCollapsed: boolean;
+    /**
+     * Whether the switcher is switcher or not. If not supplied, the panel is not switched by default.
+     */
+    isSwitched: boolean;
+    /**
+     * Called when toggle button is clicked.
+     * If supplied `header` prop, this field will be ignored.
+     */
+    onToggle?: () => void;
+    /**
+     * Called when switcher button is clicked.
+     */
+    onSwitcherToggle: (checked: boolean) => void;
+    /**
+     * The header to use for this collapsible panel.
+     * Usually, it will be any clickable element like a ListItemButton, where you will have
+     * to manage the click event and toggle the `isCollapsed` property properly.
+     *
+     * If supplied, the `headerText` and `onToggle` will be ignored.
+     */
+    header?: React.ReactNode;
+    /**
+     * The text to use in the header for this collapsible panel. Header is always visible.
+     * It uses internally a ListItemButton element.
+     * If supplied `header` prop, this field will be ignored.
+     */
+    headerText?: string;
+    /**
+     * Style properties to use for header when property 'header' is not provided.
+     */
+    headerBaseSx?: SxProps;
+    /**
+     * Actions to show to de left of switcher
+     */
+    middleActions?: React.ReactNode;
+    /**
+     * Whether the collapse will be placed down or up from the header.
+     */
+    collapseDirection?: 'down' | 'up';
+    /**
+     * Set border separator dashed between. Default false
+     */
+    separatorDashed?: boolean;
+    /**
+     * When variant is sortable-move, a lock will be displayed instead a move icon. Default false
+     */
+    moveBlocked?: boolean;
+    /**
+     * When true, border in collapsible element will be removed. Default false
+     */
+    removeBorder?: boolean;
+    /**
+     * When variant is sortable-arrow, disabled down arrow. Default false
+     */
+    downArrowDisabled?: boolean;
+    /**
+     * Method called when up arrow is pressed in sortable-arrow.
+     */
+    onMoveUp?: () => void;
+    /**
+     * Method called when down arrow is pressed in sortable-arrow.
+     */
+    onMoveDown?: () => void;
+    /**
+     * Method called when drag zone is pressed.
+     */
+    onMouseDownDragZone?: () => void;
+    /**
+     * Method called when drag zone is not pressed.
+     */
+    onMouseUpDragZone?: () => void;
+}> & Pick<ListItemButtonProps, 'disabled'>;
+declare const CollapsiblePanelSwitcher: ({ sx, children, isCollapsed, isSwitched, onToggle, onSwitcherToggle, header, headerText, headerBaseSx, collapseDirection, disabled, variant, separatorDashed, moveBlocked, middleActions, downArrowDisabled, removeBorder, onMoveUp, onMoveDown, onMouseDownDragZone, onMouseUpDragZone }: CollapsiblePanelSwitcherProps) => JSX.Element;
+export default CollapsiblePanelSwitcher;

package/dist/src/components/layout/Container.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ContainerProps as MuiContainerProps } from '@mui/material/Container';
+export type ContainerProps = Pick<MuiContainerProps, 'sx' | 'children' | 'maxWidth'>;
+declare const Container: ({ maxWidth, ...rest }: ContainerProps) => JSX.Element;
+export default Container;

package/dist/src/components/layout/Container.theme.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material';
+export declare const containerTheme: Components<Theme>['MuiContainer'];

package/dist/src/components/layout/Grid.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { GridProps as MuiGridProps } from '@mui/material/Grid';
+export type GridProps = Pick<MuiGridProps, 'children' | 'xs' | 'md' | 'lg' | 'xl' | 'columns' | 'spacing' | 'sx' | 'container' | 'item' | 'className'>;
+/**
+ * A basic grid system. See https://mui.com/material-ui/react-grid/ for more detailed usage.
+ */
+declare const Grid: (props: GridProps) => JSX.Element;
+export default Grid;

package/dist/src/components/layout/LazyLoad.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { LazyLoadProps as ReactLazyLoadProps } from 'react-lazyload';
+export type LazyLoadProps = Pick<ReactLazyLoadProps, 'offset' | 'height' | 'style' | 'children'>;
+declare const LazyLoad: (props: LazyLoadProps) => JSX.Element;
+export default LazyLoad;

package/dist/src/components/layout/PageScrollContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type PageScrollContextValue = {
+    isScrolled: boolean;
+};
+export declare const PageScrollContext: import("react").Context<PageScrollContextValue>;

package/dist/src/components/layout/PageWithHeader.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type PageWithHeaderProps = React.PropsWithChildren<{
+    /**
+     * The header to display.
+     */
+    header?: React.ReactNode;
+}>;
+/**
+ * A page with a header at the top of the page.
+ * The `children` will be displayed in the main area.
+ */
+declare const PageWithHeader: ({ header, children }: PageWithHeaderProps) => JSX.Element;
+export default PageWithHeader;

package/dist/src/components/layout/PageWithNavbar.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type PageWithNavbarProps = React.PropsWithChildren<{
+    /**
+     * The navbar to display. It should be a Navbar component.
+     */
+    navbar?: React.ReactNode;
+}>;
+/**
+ * A page with a navbar at the left of the page.
+ * The `children` will be displayed in the main area.
+ */
+declare const PageWithNavbar: ({ navbar, children }: PageWithNavbarProps) => JSX.Element;
+export default PageWithNavbar;