@paubox/ui 0.10.2 → 0.12.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "0.10.2",
+  "version": "0.12.0",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/icons/SvgProps.d.ts

@@ -1,7 +1,7 @@
 import { SVGProps as ReactSVGProps } from 'react';
 export interface SvgProps extends ReactSVGProps<SVGSVGElement> {
 }
-export interface IconProps {
+export interface IconProps extends SvgProps {
     size?: string;
     color?: string;
 }

package/src/index.d.ts

@@ -3,10 +3,10 @@ export * from './lib/Button/Button';
 export * from './lib/Calendar/Calendar';
 export * from './lib/Checkbox/Checkbox';
 export * from './lib/DatePicker/DatePicker';
-export * from './lib/Dropdown/Dropdown';
-export * from './lib/Dropdown/DropdownOption';
+export * from './lib/FilterForm/FilterForm';
 export * from './lib/IconButton/IconButton';
 export * from './lib/Inputs/index';
+export * from './lib/MenuItem/MenuItem';
 export * from './lib/Modal/Modal';
 export * from './lib/Pagination/Pagination';
 export * from './lib/Popper/Popper';

package/src/lib/FilterForm/FilterForm.d.ts

@@ -0,0 +1,26 @@
+export interface FilterValue {
+    field: string;
+    op: string;
+    terms: string[];
+}
+export interface FilterFormValues {
+    filters: Record<string, Record<string, FilterValue>>;
+}
+interface FilterFormProps {
+    values: FilterFormValues;
+    fieldOptions: {
+        label: string;
+        value: string;
+    }[];
+    operatorOptions: {
+        label: string;
+        value: string;
+    }[];
+    onSubmit: () => void;
+    onClear?: () => void;
+    onChange: (path: string, value: any) => void;
+    errors?: any;
+    touched?: any;
+}
+export declare const FilterForm: ({ values, fieldOptions, operatorOptions, onSubmit, onClear, onChange, errors, touched, }: FilterFormProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/FilterForm/FilterRow.d.ts

@@ -0,0 +1,21 @@
+import { FilterFormValues } from './FilterForm';
+interface FilterRowProps {
+    filterKey: string;
+    rowIndex: string;
+    values: FilterFormValues;
+    errors?: any;
+    touched?: any;
+    onChange: (path: string, value: any) => void;
+    onRemove: () => void;
+    fieldOptions: {
+        label: string;
+        value: string;
+    }[];
+    operatorOptions: {
+        label: string;
+        value: string;
+    }[];
+    showRemove: boolean;
+}
+export declare const FilterRow: ({ filterKey, rowIndex, values, errors, touched, onChange, onRemove, fieldOptions, operatorOptions, showRemove, }: FilterRowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/Inputs/MultiSelect.d.ts

@@ -1,19 +1,18 @@
+import { BaseSelectProps } from '@components';
 export interface MultiSelectOption {
     value: string;
     label: string;
 }
-export interface MultiSelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
+export interface MultiSelectProps extends BaseSelectProps {
+    values: string[];
+    setValues: (values: string[]) => void;
+    options: MultiSelectOption[];
+    placeholder?: string;
+    value?: string | string[];
     sz?: 'sm' | 'lg';
-    error?: boolean;
-    leftIcon?: React.ElementType;
-    rightIcon?: React.ElementType;
-    options?: MultiSelectOption[];
-    checkbox?: boolean;
-    initialValue?: MultiSelectOption;
-    type?: 'primary' | 'secondary';
 }
 export interface ChipProps {
     sz?: 'sm' | 'lg';
     secondary?: boolean;
 }
-export declare const MultiSelect: ({ sz, error, options, checkbox, placeholder, initialValue, type, ...props }: MultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: ({ sz, error, options, checkbox, placeholder, values, setValues, type, ...props }: MultiSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/Inputs/MultiText.d.ts

@@ -0,0 +1,12 @@
+interface MultiInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    sz?: 'sm' | 'lg';
+    error?: boolean;
+    type?: 'primary' | 'secondary';
+    isFocused?: boolean;
+}
+export interface MultiInputValues extends MultiInputProps {
+    values: string[];
+    setValues: (values: string[]) => void;
+}
+export declare const MultiInput: ({ sz, error, type, values, setValues, placeholder, ...props }: MultiInputValues) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/Inputs/Select.d.ts

@@ -0,0 +1,19 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+export interface BaseSelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
+    sz?: 'sm' | 'lg';
+    error?: boolean;
+    leftIcon?: React.ElementType;
+    rightIcon?: React.ElementType;
+    options?: SelectOption[];
+    checkbox?: boolean;
+    initialValue?: SelectOption;
+    type?: 'primary' | 'secondary';
+}
+export interface SelectProps extends BaseSelectProps {
+    value: any;
+    setValue: (value: string) => void;
+}
+export declare const Select: ({ sz, error, options, checkbox, placeholder, value, setValue, initialValue, type, ...props }: SelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/Inputs/TextArea.d.ts

@@ -0,0 +1,16 @@
+import { TextareaHTMLAttributes } from 'react';
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    sz?: 'sm' | 'lg';
+    error?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
+}
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BaseTextArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & TextAreaProps, import("react").DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
+export declare const TextArea: ({ sz, error, clearable, onClear, style, ...props }: TextAreaProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/Inputs/index.d.ts

@@ -1,3 +1,6 @@
 export * from './Input';
 export * from './MultiSelect';
 export * from './Search';
+export * from './MultiText';
+export * from './Select';
+export * from './TextArea';

package/src/lib/MenuItem/MenuItem.d.ts

@@ -0,0 +1,10 @@
+export interface MenuItemProps {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    selected?: boolean;
+    checkbox?: boolean;
+    disabled?: boolean;
+}
+export declare const MenuItem: ({ label, href, selected, checkbox, onClick, icon, disabled, }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/Popper/Popper.d.ts

@@ -1,4 +1,4 @@
-import { FC, MutableRefObject, ReactNode, RefObject } from 'react';
+import { FC, MutableRefObject, ReactNode, RefObject, CSSProperties } from 'react';
 export type AnchorSide = 'top' | 'right' | 'bottom' | 'left';
 export type AnchorAlign = 'start' | 'middle' | 'end';
 export interface PopperProps {
@@ -15,5 +15,7 @@ export interface PopperProps {
     children: ReactNode;
     containerRefOverride?: RefObject<HTMLDivElement>;
     childContainerRefs?: RefObject<HTMLElement>[];
+    detectEdges?: boolean;
+    style?: CSSProperties;
 }
 export declare const Popper: FC<PopperProps>;

package/src/lib/SearchBar/SearchBar.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-interface SearchBarProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface SearchBarProps extends InputHTMLAttributes<HTMLInputElement> {
     placeholder?: string;
     onClear?: () => void;
     onSubmit: () => void;
@@ -8,4 +8,3 @@ interface SearchBarProps extends InputHTMLAttributes<HTMLInputElement> {
     showFilters?: boolean;
 }
 export declare const SearchBar: ({ placeholder, error, onClear, onSubmit, showButton, showFilters, ...props }: SearchBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/src/lib/Toggle/Toggle.d.ts

@@ -1,9 +1,11 @@
-import React from 'react';
+import { FC, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 import { UseSwitchParameters } from '@mui/base/useSwitch';
 export type ToggleProps = UseSwitchParameters & {
+    inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;
+    labelProps?: Partial<LabelHTMLAttributes<HTMLDivElement>>;
     className?: string;
     labelText?: string;
     align?: 'left' | 'right';
     size?: 'large' | 'small';
 };
-export declare const Toggle: React.FC<ToggleProps>;
+export declare const Toggle: FC<ToggleProps>;

package/src/lib/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-export interface TooltipProps {
+export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     y?: 'top' | 'bottom' | 'center';
     x?: 'left' | 'right' | 'center';
     size?: 'small' | 'large';

package/src/lib/Dropdown/Dropdown.d.ts

@@ -1,10 +0,0 @@
-export interface DropdownProps {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    children: React.ReactNode;
-    right?: number;
-    left?: number;
-    top?: number;
-    bottom?: number;
-}
-export declare const Dropdown: ({ children, open, setOpen, right, left, top, bottom, ...rest }: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/Dropdown/DropdownOption.d.ts

@@ -1,9 +0,0 @@
-export interface DropdownOptionProps {
-    label: string;
-    href?: string;
-    onClick?: () => void;
-    icon?: React.ReactNode;
-    selected?: boolean;
-    checkbox?: boolean;
-}
-export declare const DropdownOption: ({ label, href, selected, checkbox, onClick, icon, }: DropdownOptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;