@ckbox/components 1.1.1-dev.0 → 1.2.0-dev.0

package/dist/input/Input.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Polymorphism for `ref` is tricky. Let's type it as `any` for now.
+ */
+import * as React from 'react';
+declare const Input: React.ForwardRefExoticComponent<Pick<Props, "label" | "className" | "type" | "value" | "error" | "id" | "disabled" | "name" | "size" | "onClick" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "max" | "variant" | "readOnly" | "multiline" | "min"> & React.RefAttributes<any>>;
+export interface Props {
+    /**
+     * Input's class name.
+     */
+    className?: string;
+    /**
+     * Marks input as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Marks input as read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Unique input's id.
+     */
+    id: string;
+    /**
+     * Uses `textarea` instead of `input`.
+     */
+    multiline?: boolean;
+    /**
+     * Input's name to register.
+     */
+    name?: string;
+    /**
+     * Callback invoked when the blur event is fired.
+     */
+    onBlur?: (evt: React.ChangeEvent<any>) => void;
+    /**
+     * Callback invoked when the value is changed.
+     */
+    onChange?: (evt: React.ChangeEvent<any>) => void;
+    /**
+     * Callback invoked when the element receives focus.
+     */
+    onFocus?: (evt: React.ChangeEvent<any>) => void;
+    /**
+     * Callback invoked when the element is clicked.
+     */
+    onClick?: (evt: React.ChangeEvent<any>) => void;
+    /**
+     * Input's type.
+     */
+    type?: 'text' | 'number' | 'url' | 'email';
+    /**
+     * Input's placeholder text value.
+     */
+    placeholder?: string;
+    /**
+     * Input's value.
+     */
+    value?: string;
+    /**
+     * Input's ref object.
+     */
+    ref?: React.Ref<any>;
+    /**
+     * Sizing variant.
+     */
+    size?: 'base' | 'md';
+    /**
+     * Indicate error in input element.
+     */
+    error?: boolean;
+    /**
+     * Number input's min value.
+     */
+    min?: string | number;
+    /**
+     * Number input's max value.
+     */
+    max?: string | number;
+    /**
+     * Input's label.
+     */
+    label?: string;
+    /**
+     * Styling variant.
+     */
+    variant?: 'default' | 'underline';
+}
+export default Input;

package/dist/input/index.d.ts

@@ -0,0 +1 @@
+export { default, Props as InputProps } from './Input';

package/dist/list/List.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const List: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * List's class name.
+     */
+    className?: string;
+}
+export default List;

package/dist/list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ListItem } from './item';
+export { default } from './List';

package/dist/list/item/ListItem.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+declare const ListItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Placeholder label for the component.
+     */
+    placeholderLabel?: string;
+    /**
+     * Callback invoked when clicking on list item content.
+     */
+    onContentClick?: () => void;
+    /**
+     * Action buttons displayed in list item.
+     */
+    actionButtons?: React.ReactNode;
+    /**
+     * List item's class name.
+     */
+    className?: string;
+}
+export default ListItem;

package/dist/list/item/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ListItem';

package/dist/loadingButton/LoadingButton.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Props as ButtonProps } from '../button/Button';
+declare const LoadingButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export interface Props extends ButtonProps {
+    /**
+     * Delays loader appearance. Defaults to `true`.
+     */
+    delay?: boolean;
+    /**
+     * Toggles loading state.
+     */
+    loading?: boolean;
+    /**
+     * Positions loader. Defaults to `center`.
+     */
+    loaderPosition?: 'left' | 'center' | 'right';
+}
+export default LoadingButton;

package/dist/loadingButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './LoadingButton';

package/dist/menu/Menu.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { PopperOffset, PopperPlacement } from '../popper';
+declare const Menu: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export interface Props {
+    /**
+     * Anchor element.
+     */
+    anchorEl?: HTMLElement | null;
+    /**
+     * Shows an arrow pointing to the anchor element.
+     */
+    arrow?: boolean;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Offsets popper element.
+     */
+    offset?: PopperOffset;
+    /**
+     * Callback invoked when component is about to close.
+     */
+    onClose?: () => void;
+    /**
+     * Menu popper's placement.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Makes menu same width as its anchor.
+     */
+    sameWidth?: boolean;
+    /**
+     * Toggles vertical spacing around content.
+     */
+    spacing?: boolean;
+}
+export default Menu;

package/dist/menu/context/MenuContext.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface MenuContext {
+    /**
+     * Callback invoked when menu is closed.
+     */
+    onClose?: () => void;
+}
+/**
+ * Defines React context for `Menu` component.
+ */
+export declare const MenuContext: React.Context<MenuContext>;
+export declare const useMenuCtx: () => MenuContext;

package/dist/menu/context/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuContext';

package/dist/menu/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MenuItem } from './item';
+export { default as MenuSubSection } from './subSection';
+export { default as MenuSection } from './section';
+export { default } from './Menu';

package/dist/menu/item/MenuItem.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IconName, IconSize } from '../../icon';
+declare const MenuItem: React.FC<Props>;
+export interface Props {
+    /**
+     * Associated icon.
+     */
+    icon?: IconName;
+    /**
+     * Icon size.
+     */
+    iconSize?: IconSize;
+    /**
+     * Action label.
+     */
+    label: string;
+    /**
+     * Action invoked upon click.
+     */
+    onClick?: () => void;
+    /**
+     * Displays as disabled.
+     */
+    disabled?: boolean;
+}
+export default MenuItem;

package/dist/menu/item/index.d.ts

@@ -0,0 +1 @@
+export { default } from './MenuItem';

package/dist/menu/section/MenuSection.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare const MenuSection: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Adds bottom border.
+     */
+    borderBottom?: boolean;
+    /**
+     * Title of the section.
+     */
+    title: string;
+}
+export default MenuSection;

package/dist/menu/section/index.d.ts

@@ -0,0 +1 @@
+export { default } from './MenuSection';

package/dist/menu/subSection/MenuSubSection.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+declare const MenuSubSection: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Indicates how content and title should be aligned.
+     */
+    align?: 'column' | 'row';
+    /**
+     * Indicates how children should be aligned.
+     */
+    alignChildren?: 'column' | 'row';
+    /**
+     * Display title as label.
+     */
+    label?: boolean;
+    /**
+     * Sets `for` attribute if title is displayed as label.
+     */
+    labelFor?: string;
+    /**
+     * Title of the subsection.
+     */
+    title: string;
+}
+export default MenuSubSection;

package/dist/menu/subSection/index.d.ts

@@ -0,0 +1 @@
+export { default } from './MenuSubSection';

package/dist/navbar/Navbar.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const Navbar: React.FC<Props>;
+export interface Props {
+    /**
+     * Labels navigation element.
+     */
+    ariaLabel?: string;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+}
+export default Navbar;

package/dist/navbar/button/NavbarButton.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IconName } from '../../icon';
+declare const NavbarButton: React.FC<Props>;
+export interface Props {
+    /**
+     * Button's aria label.
+     */
+    label?: string;
+    /**
+     * Icon to show.
+     */
+    icon?: IconName;
+    /**
+     * Sets `click` event handler.
+     */
+    onClick?: React.MouseEventHandler;
+}
+export default NavbarButton;

package/dist/navbar/button/index.d.ts

@@ -0,0 +1 @@
+export { default } from './NavbarButton';

package/dist/navbar/creditLink/NavbarCreditLink.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+declare const NavbarCreditLink: React.FC<Props>;
+interface Props {
+    /**
+     * Renders the content of the credit link.
+     */
+    content: React.ReactNode;
+    /**
+     * Flag indicating if the link is collapsed.
+     */
+    collapsed?: boolean;
+    /**
+     * The URL that the hyperlink points to.
+     */
+    href?: string;
+    /**
+     * Describes the purpose of a link.
+     */
+    ariaLabel?: string;
+}
+export default NavbarCreditLink;

package/dist/navbar/creditLink/index.d.ts

@@ -0,0 +1 @@
+export { default } from './NavbarCreditLink';

package/dist/navbar/index.d.ts

@@ -0,0 +1,5 @@
+export { default as NavbarItem } from './item';
+export { default as NavbarItemFixed } from './itemFixed';
+export { default as NavbarButton } from './button';
+export { default as NavbarCreditLink } from './creditLink';
+export { default } from './Navbar';

package/dist/navbar/item/NavbarItem.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { IconName, IconRenderProp } from '../../icon';
+declare const NavbarItem: React.FC<Props>;
+export interface Props {
+    /**
+     * Applies active styling.
+     */
+    active?: boolean;
+    /**
+     * Toggles icon animation.
+     */
+    animateIcon?: boolean;
+    /**
+     * Marks item as disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Separator for the special element.
+     */
+    separated?: boolean;
+    /**
+     * Displayed icon.
+     */
+    icon?: IconName;
+    /**
+     * Renders custom icon.
+     *
+     * Pass either a React component or raw markup as string.
+     * Passed string must be sanitized beforehand so that it's safe to use.
+     */
+    iconRender?: IconRenderProp;
+    /**
+     * Displayed label.
+     */
+    label: string;
+    /**
+     * Toggles loader.
+     */
+    loading?: boolean;
+    /**
+     * Optional click handler.
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Optional buttons to be shown inside the navbar item.
+     */
+    buttons?: React.ReactNode;
+}
+export default NavbarItem;

package/dist/navbar/item/index.d.ts

@@ -0,0 +1 @@
+export { default } from './NavbarItem';

package/dist/navbar/itemFixed/NavbarItemFixed.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const NavbarItemFixed: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+}
+export default NavbarItemFixed;

package/dist/navbar/itemFixed/index.d.ts

@@ -0,0 +1 @@
+export { default } from './NavbarItemFixed';

package/dist/notifications/Notifications.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare const Notifications: React.FC<Props>;
+export interface Props {
+    /**
+     * Container's position will be adjusted in accordance with provided element's height.
+     */
+    bottomOffsetEl?: HTMLElement | null;
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Controls if bottom-offset should be applied to notifications container.
+     */
+    offsetBottom?: boolean;
+}
+export default Notifications;

package/dist/notifications/details/NotificationDetails.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+declare const NotificationDetails: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Label for close button.
+     */
+    closeLabel?: string;
+    /**
+     * Notification details close callback.
+     */
+    onClose?: () => void;
+    /**
+     * Toggles dialog.
+     */
+    open?: boolean;
+    /**
+     * Notification title.
+     */
+    title: string;
+    /**
+     * Notification type.
+     */
+    type: 'success' | 'error' | 'info';
+}
+export default NotificationDetails;

package/dist/notifications/details/index.d.ts

@@ -0,0 +1 @@
+export { default } from './NotificationDetails';

package/dist/notifications/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Notifications';
+export { default as NotificationDetails } from './details';
+export { default as Notification } from './notification';

package/dist/notifications/notification/Notification.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { TransitionProps } from 'react-transition-group/Transition';
+declare const Notification: React.FC<Props>;
+/**
+ * `Notification` component is rendered as part of `TransitionGroup` and therefore gets transition props in addition to its regular props.
+ */
+export declare type Props = Partial<TransitionProps> & {
+    /**
+     * Label for "Close" button.
+     */
+    closeLabel: string;
+    /**
+     * Label for "Close Details" button.
+     */
+    closeDetailsLabel?: string;
+    /**
+     * Optional notification details.
+     */
+    details?: React.ReactNode;
+    /**
+     * Notification close callback.
+     */
+    onClose?: () => void;
+    /**
+     * Label for "Open Details" button.
+     */
+    openDetailsLabel?: string;
+    /**
+     * Notification title.
+     */
+    title: string;
+    /**
+     * Notification type.
+     */
+    type: 'success' | 'error' | 'info';
+};
+export default Notification;

package/dist/notifications/notification/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Notification';

package/dist/overlay/Overlay.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+declare const Overlay: React.FC<Props>;
+export interface Props {
+    /**
+     * Optional children.
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback invoked upon clicking on the overlay.
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * Color variant.
+     */
+    variant?: 'transparent' | 'dark';
+    /**
+     * Optional class to append.
+     */
+    className?: string;
+}
+export default Overlay;

package/dist/overlay/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Overlay';

package/dist/pagination/Pagination.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+declare const Pagination: React.FC<Props>;
+export interface Props {
+    /**
+     * Disables interaction with pagination.
+     */
+    disabled?: boolean;
+    /**
+     * Aria label for input element.
+     */
+    enterPageLabel: string;
+    /**
+     * Total number of pages.
+     */
+    totalPages: number;
+    /**
+     * Label indicating total number of pages.
+     */
+    totalPagesLabel: string;
+    /**
+     * Callback invoked when page is changed.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * Currently selected page.
+     */
+    page: number;
+}
+export default Pagination;

package/dist/pagination/button/PaginationButton.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IconName } from '../../icon';
+declare const PaginationButton: React.FC<Props>;
+export interface Props {
+    /**
+     * Button icon.
+     */
+    icon: IconName;
+    /**
+     * Disables button.
+     */
+    disabled?: boolean;
+    /**
+     * Callback invoked upon clicking on item.
+     */
+    onClick: () => void;
+}
+export default PaginationButton;

package/dist/pagination/button/index.d.ts

@@ -0,0 +1 @@
+export { default } from './PaginationButton';

package/dist/pagination/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Pagination';

package/dist/panel/Panel.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { PanelContextShape } from './context';
+declare const Panel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export interface Props extends PanelContextShape {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Toggles component opacity.
+     */
+    opaque?: boolean;
+    /**
+     * Toggles component's `elevated` mode.
+     */
+    elevated?: boolean;
+}
+export default Panel;

package/dist/panel/actions/PanelActions.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const PanelActions: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children?: React.ReactNode;
+}
+export default PanelActions;

package/dist/panel/actions/index.d.ts

@@ -0,0 +1 @@
+export { default } from './PanelActions';

package/dist/panel/column/PanelColumn.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const PanelColumn: React.FC<Props>;
+export interface Props {
+    /**
+     * Main content of the component.
+     */
+    children: React.ReactNode;
+}
+export default PanelColumn;