@sebgroup/green-react 1.0.0-beta.2 → 1.0.0-beta.20

package/lib/alert/alert.d.ts

@@ -3,9 +3,10 @@ import { ReactNode } from 'react';
 export interface AlertProps {
     children: ReactNode;
     type: AlertType;
-    heading?: string;
+    header?: ReactNode;
+    footer?: ReactNode;
     isCloseable?: boolean;
     closeText?: string;
 }
-export declare function Alert({ type, heading, children, closeText, isCloseable, }: AlertProps): JSX.Element;
+export declare function Alert({ type, header, footer, children, closeText, isCloseable, }: AlertProps): JSX.Element;
 export default Alert;

package/lib/badge/badge.d.ts

@@ -0,0 +1,12 @@
+import { HTMLProps, ReactNode } from 'react';
+import { BadgeType } from '@sebgroup/extract';
+export interface BadgeProps extends HTMLProps<HTMLSpanElement> {
+    children?: ReactNode;
+    badgeType?: BadgeType;
+    isCloseable?: boolean;
+    closeText?: string;
+    customColor?: string;
+    customBackgroundColor?: string;
+}
+export declare function Badge({ children, badgeType, isCloseable, closeText, customColor, customBackgroundColor, ...props }: BadgeProps): JSX.Element | null;
+export default Badge;

package/lib/card/card.d.ts

@@ -1,9 +1,8 @@
 import { ReactNode } from 'react';
-import Button from '../form/button';
 export interface CardProps {
     children?: ReactNode;
-    headline?: string;
-    buttons?: typeof Button[];
+    header?: ReactNode;
+    footer?: ReactNode;
 }
-export declare function Card({ children, headline, buttons }: CardProps): JSX.Element;
+export declare function Card({ children, header, footer }: CardProps): JSX.Element;
 export default Card;

package/lib/datepicker/datepicker.d.ts

@@ -0,0 +1,2 @@
+import { DatepickerOptions } from '@sebgroup/extract';
+export declare const Datepicker: (options?: DatepickerOptions) => JSX.Element;

package/lib/datepicker/hook.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+import { Datepicker, DatepickerData, DatepickerOptions, DatepickerState } from '@sebgroup/extract';
+interface HookResult {
+    datepicker: Datepicker;
+    data: DatepickerData;
+    state: DatepickerState;
+}
+interface DatepickerHook {
+    (datepickerRef: RefObject<HTMLElement>, datepickerDialogRef: RefObject<HTMLElement>, dateInputRef: RefObject<HTMLInputElement>, datepickerTriggerRef: RefObject<HTMLButtonElement>, options?: DatepickerOptions): HookResult;
+}
+export declare const useDatepicker: DatepickerHook;
+export {};

package/lib/dropdown/dropdown.d.ts

@@ -1,9 +1,16 @@
-import { DropdownOption } from '@sebgroup/extract';
+import { DropdownOption, DropdownTexts } from '@sebgroup/extract';
+import { IValidator } from "@sebgroup/extract";
 export interface DropdownProps {
     id?: string;
-    children?: string;
+    texts?: DropdownTexts;
     options: DropdownOption[];
+    useValue?: string;
+    display?: string;
+    selectValue?: string;
     loop?: boolean;
+    multiSelect?: boolean;
+    onChange?: (o: DropdownOption) => void;
+    validator?: IValidator;
 }
-export declare const Dropdown: ({ id, options, loop, children }: DropdownProps) => JSX.Element;
+export declare const Dropdown: ({ id, options, loop, multiSelect, selectValue, useValue, display, texts, onChange, validator }: DropdownProps) => JSX.Element;
 export default Dropdown;

package/lib/dropdown/hooks.d.ts

@@ -1,19 +1,37 @@
-import { DropdownOption } from '@sebgroup/extract';
-import { HTMLAttributes } from 'react';
+import { DropdownHandler, DropdownOption, DropdownTexts } from '@sebgroup/extract';
+import { HTMLAttributes, InputHTMLAttributes, RefObject } from 'react';
+import { IValidator } from "@sebgroup/extract";
 interface HookArgs {
     id?: string;
-    text?: string;
+    texts?: DropdownTexts;
     options: DropdownOption[];
+    multiSelect?: boolean;
     loop?: boolean;
+    selectValue?: string;
+    useValue?: string;
+    display?: string;
+    togglerRef: RefObject<HTMLElement>;
+    listboxRef: RefObject<HTMLElement>;
+    onChange?: (o: DropdownOption) => void;
+    validator?: IValidator;
 }
 declare type Props = HTMLAttributes<HTMLElement>;
+interface CheckboxItem {
+    labelProps: Props;
+    inputProps: InputHTMLAttributes<HTMLInputElement>;
+    spanProps: Props;
+}
+interface MultiSelectProps {
+    fieldsetProps?: Props;
+    legendProps?: Props;
+    checkboxes?: CheckboxItem[];
+}
 interface HookResult {
+    dropdown?: DropdownHandler;
     togglerProps: Props;
     listboxProps: Props;
     listItems: Props[];
-    activate: () => void;
-    deactivate: () => void;
-    close: () => void;
+    multiSelectProps: MultiSelectProps;
 }
-export declare const useDropdown: ({ id, text, options, loop }: HookArgs) => HookResult;
+export declare const useDropdown: ({ id, texts, options, loop, multiSelect, selectValue, useValue, display, togglerRef, listboxRef, onChange, validator }: HookArgs) => HookResult;
 export {};

package/lib/form/{buttonGroup.d.ts → buttonGroup/buttonGroup.d.ts}

@@ -1,10 +1,10 @@
 import { ReactElement } from 'react';
 import { ButtonVariant } from '@sebgroup/extract';
-import { ButtonProps } from './button';
+import { ButtonProps } from '../button/button';
 interface ButtonGroupProps {
     children: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];
     selectedIndex?: number;
     variant?: ButtonVariant;
 }
-export declare const ButtonGroup: ({ children, selectedIndex, variant }: ButtonGroupProps) => JSX.Element;
+export declare const ButtonGroup: ({ children, selectedIndex, variant, }: ButtonGroupProps) => JSX.Element;
 export default ButtonGroup;

package/lib/form/form.d.ts

@@ -1,9 +1,10 @@
 import { FormDirection, Size } from '@sebgroup/extract';
-import { ReactNode } from 'react';
-export interface FormProps {
+import { HTMLProps, ReactNode } from 'react';
+export interface FormProps extends HTMLProps<HTMLFormElement> {
     children?: ReactNode;
     direction?: FormDirection;
-    size?: Size;
+    formSize?: Size;
+    onFormSubmit?: (values: any) => void;
 }
-export declare function Form({ children, direction, size, }: FormProps): JSX.Element;
+export declare const Form: React.FC<FormProps>;
 export default Form;

package/lib/form/formContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FormProps } from './form';
+interface FormContextReturnType {
+    setValues: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+    setErrors: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+    setFields: React.Dispatch<React.SetStateAction<Record<string, any>>>;
+    errors?: Record<string, any>;
+    values?: Record<string, any>;
+}
+export declare const FormContext: React.Context<FormContextReturnType>;
+export declare const useFormContext: () => FormContextReturnType;
+export declare const FormProvider: ({ children, direction, formSize, onSubmit, onFormSubmit, ...props }: React.PropsWithChildren<FormProps>) => JSX.Element;
+export {};

package/lib/form/formItems.d.ts

@@ -0,0 +1,9 @@
+import { IValidator } from '@sebgroup/extract';
+import React from 'react';
+export interface FormItemsProps {
+    children: React.ReactNode;
+    validate?: IValidator;
+    name: string;
+}
+export declare const FormItems: React.FC<FormItemsProps>;
+export default FormItems;

package/lib/form/group/group.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface GroupProps {
+    children: ReactNode;
+    error?: Error | string;
+    groupBorder?: boolean;
+    invalid?: boolean;
+}
+export declare function Group({ children, error, groupBorder }: GroupProps): JSX.Element;
+export default Group;

package/lib/form/index.d.ts

@@ -1,5 +1,8 @@
-export * from './button';
-export * from './buttonGroup';
+export * from './button/button';
+export * from './buttonGroup/buttonGroup';
 export * from './form';
-export * from './input';
-export * from './text';
+export * from './formItems';
+export * from './group/group';
+export * from './input/input';
+export * from './text/text';
+export * from './radioButton/radioGroup';

package/lib/form/input/input.d.ts

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react';
+import { CheckboxProps, NumberInputProps, RadioButtonProps, TextInputProps } from '../types';
+import { IValidator } from '@sebgroup/extract';
+import React from 'react';
+export declare type Renderer = (type: string, props: InputHTMLAttributes<HTMLInputElement>, onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void, onChangeInput?: (value: string) => string, label?: string, info?: string, validator?: IValidator) => JSX.Element;
+export declare const RenderInput: Renderer;
+export declare const TextInput: ({ label, info, onChange, onChangeInput, validator, ...props }: TextInputProps) => JSX.Element;
+export declare const EmailInput: ({ label, info, onChange, onChangeInput, validator, ...props }: TextInputProps) => JSX.Element;
+export declare const NumberInput: ({ label, info, onChange, onChangeInput, validator, ...props }: NumberInputProps) => JSX.Element;
+export declare const Checkbox: ({ label, onChange, validator, ...props }: CheckboxProps) => JSX.Element;
+export declare const RadioButton: React.ForwardRefExoticComponent<Pick<RadioButtonProps, "label" | "onChange" | "validator" | "type" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLInputElement>>;

package/lib/form/radioButton/radioGroup.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IValidator } from '@sebgroup/extract';
+export interface RadioGroupProps {
+    title?: string;
+    defaultSelected?: string;
+    description?: string;
+    validator?: IValidator;
+    onChangeRadio?: (value: string) => string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
+}
+export declare const RadioGroup: ({ defaultSelected, description, title, validator, onChangeRadio, onChange, name, children }: React.PropsWithChildren<RadioGroupProps>) => JSX.Element;
+export default RadioGroup;

package/lib/form/{text.d.ts → text/text.d.ts}

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 interface TextProps {
     children: ReactNode;
 }
-declare const Text: ({ children }: TextProps) => JSX.Element;
+export declare const Text: ({ children }: TextProps) => JSX.Element;
 export default Text;

package/lib/form/types.d.ts

@@ -1,25 +1,23 @@
-import { ChangeEventHandler, FocusEventHandler } from 'react';
-export interface InputProps {
-    id?: string;
-    label?: string;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-}
-export interface TextInputProps<T> extends InputProps {
+import { IValidator } from '@sebgroup/extract';
+import { HTMLProps } from 'react';
+export interface TextInputProps extends HTMLProps<HTMLInputElement> {
     type?: 'text' | 'email' | 'number';
-    value?: T;
+    label?: string;
     info?: string;
-    onChangeText?: (text?: T) => unknown;
+    validator?: IValidator;
+    onChangeInput?: (value: string) => string;
 }
-export interface NumberInputProps extends TextInputProps<number> {
+export interface NumberInputProps extends TextInputProps {
     min?: number;
     max?: number;
     step?: number;
 }
-export interface CheckboxProps extends InputProps {
-    checked?: boolean;
-    value?: string;
-    onChecked?: (checked: boolean | undefined) => unknown;
+export interface CheckboxProps extends HTMLProps<HTMLInputElement> {
+    validator?: IValidator;
+}
+export interface RadioButtonProps extends HTMLProps<HTMLInputElement> {
+    label: string;
+    validator?: string;
+    value: string;
 }
 export declare type InputListener<T> = (newValue?: T) => unknown;

package/lib/form/useInput.d.ts

@@ -1,6 +1,5 @@
-import { InputHTMLAttributes, RefObject } from 'react';
-import { InputListener } from './types';
-declare const useInput: <T>(props: InputHTMLAttributes<HTMLInputElement>, evaluator: (element: HTMLInputElement) => T | undefined, notify?: InputListener<T> | undefined) => InputHTMLAttributes<HTMLInputElement> & {
+import React, { InputHTMLAttributes, RefObject } from 'react';
+declare const useInput: (props: InputHTMLAttributes<HTMLInputElement>, onChanges?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined, onChangeInput?: ((value: string) => string) | undefined) => React.InputHTMLAttributes<HTMLInputElement> & {
     ref: RefObject<HTMLInputElement>;
 };
 export default useInput;

package/lib/form/validateInput.d.ts

@@ -0,0 +1,9 @@
+import { ValidatorRules } from '@sebgroup/extract';
+interface InputTargetType {
+    name: string;
+    value: string;
+    type?: string;
+    checked?: boolean;
+}
+export declare const validateInputValue: (target: InputTargetType, rules: ValidatorRules, setError: React.Dispatch<React.SetStateAction<Record<string, any>>>) => string;
+export {};

package/lib/layout/flexbox/flexbox.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren, HTMLProps } from 'react';
+import { AlignContentType, AlignType, FlexDirectionType, FlexWrapType, JustifyContentType } from './types';
+export interface FlexboxProps extends HTMLProps<HTMLDivElement> {
+    alignContent?: AlignContentType;
+    alignItems?: AlignType;
+    alignSelf?: AlignType;
+    justifyContent?: JustifyContentType;
+    flexDirection?: FlexDirectionType;
+    flexWrap?: FlexWrapType;
+    className?: string;
+}
+export declare const Flexbox: ({ alignContent, alignItems, alignSelf, children, justifyContent, flexDirection, flexWrap, className, ...props }: PropsWithChildren<FlexboxProps>) => JSX.Element;
+export default Flexbox;

package/lib/layout/flexbox/types.d.ts

@@ -0,0 +1,5 @@
+export declare type AlignContentType = 'start' | 'between' | 'center' | 'stretch' | 'around' | 'end' | 'sm-start' | 'sm-between' | 'sm-center' | 'sm-stretch' | 'sm-around' | 'sm-end' | 'md-start' | 'md-between' | 'md-center' | 'md-stretch' | 'md-around' | 'md-end' | 'lg-start' | 'lg-between' | 'lg-center' | 'lg-stretch' | 'lg-around' | 'lg-end' | 'xl-start' | 'xl-between' | 'xl-center' | 'xl-stretch' | 'xl-around' | 'xl-end' | 'xxl-start' | 'xxl-between' | 'xxl-center' | 'xxl-stretch' | 'xxl-around' | 'xxl-end';
+export declare type AlignType = 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'sm-start' | 'sm-end' | 'sm-center' | 'sm-baseline' | 'sm-stretch' | 'md-start' | 'md-end' | 'md-center' | 'md-baseline' | 'md-stretch' | 'lg-start' | 'lg-end' | 'lg-center' | 'lg-baseline' | 'lg-stretch' | 'xl-start' | 'xl-end' | 'xl-center' | 'xl-baseline' | 'xl-stretch' | 'xxl-start' | 'xxl-end' | 'xxl-center' | 'xxl-baseline' | 'xxl-stretch';
+export declare type JustifyContentType = 'start' | 'between' | 'center' | 'evenly' | 'around' | 'end' | 'sm-start' | 'sm-between' | 'sm-center' | 'sm-evenly' | 'sm-around' | 'sm-end' | 'md-start' | 'md-between' | 'md-center' | 'md-evenly' | 'md-around' | 'md-end' | 'lg-start' | 'lg-between' | 'lg-center' | 'lg-evenly' | 'lg-around' | 'lg-end' | 'xl-start' | 'xl-between' | 'xl-center' | 'xl-evenly' | 'xl-around' | 'xl-end' | 'xxl-start' | 'xxl-between' | 'xxl-center' | 'xxl-evenly' | 'xxl-around' | 'xxl-end';
+export declare type FlexDirectionType = 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'sm-row' | 'sm-row-reverse' | 'sm-column' | 'sm-column-reverse' | 'md-row' | 'md-row-reverse' | 'md-column' | 'md-column-reverse' | 'lg-row' | 'lg-row-reverse' | 'lg-column' | 'lg-column-reverse' | 'xl-row' | 'xl-row-reverse' | 'xl-column' | 'xl-column-reverse' | 'xxl-row' | 'xxl-row-reverse' | 'xxl-column' | 'xxl-column-reverse';
+export declare type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse' | 'sm-nowrap' | 'sm-wrap' | 'sm-wrap-reverse' | 'md-nowrap' | 'md-wrap' | 'md-wrap-reverse' | 'lg-nowrap' | 'lg-wrap' | 'lg-wrap-reverse' | 'xl-nowrap' | 'xl-wrap' | 'xl-wrap-reverse' | 'xxl-nowrap' | 'xxl-wrap' | 'xxl-wrap-reverse';

package/lib/layout/index.d.ts

@@ -1 +1 @@
-export * from './group';
+export * from './flexbox/flexbox';

package/lib/link/link.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PropsWithChildren } from 'react';
+import { ButtonVariant } from '@sebgroup/extract';
+interface LinkProps extends HTMLProps<HTMLAnchorElement> {
+    button?: boolean | ButtonVariant;
+}
+export declare const Link: ({ button, children, ...props }: PropsWithChildren<LinkProps>) => JSX.Element;
+export default Link;

package/lib/list/list.d.ts

@@ -0,0 +1,14 @@
+import { ListType } from '@sebgroup/extract';
+import { ReactNode, HTMLAttributes } from 'react';
+export interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {
+    listType?: ListType;
+    tableCaption?: string;
+    tableData?: TableListProps[];
+    children?: ReactNode[];
+}
+export interface TableListProps {
+    title: string;
+    definition: string[];
+}
+export declare const List: ({ listType, tableCaption, tableData, children, ...props }: ListProps) => JSX.Element;
+export default List;

package/lib/list/listItem.d.ts

@@ -0,0 +1,10 @@
+import { ListType } from '@sebgroup/extract';
+import { HTMLAttributes, ReactNode } from 'react';
+import { TableListProps } from './list';
+interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+    listType?: ListType;
+    tableRowData?: TableListProps;
+    children?: ReactNode;
+}
+declare const ListItem: ({ listType, tableRowData, children, ...props }: ListItemProps) => JSX.Element;
+export default ListItem;

package/lib/modal/modal.d.ts

@@ -8,9 +8,10 @@ export interface ModalProps {
     confirm?: string;
     dismiss?: string;
     size?: Size;
+    isOpen?: boolean;
     onClose?: ModalEventListener;
     onConfirm?: ModalEventListener;
     onDismiss?: ModalEventListener;
 }
-export declare const Modal: ({ type, ...props }: ModalProps) => JSX.Element;
+export declare const Modal: ({ type, isOpen, ...props }: ModalProps) => JSX.Element | null;
 export default Modal;

package/lib/navbar/navbar.d.ts

@@ -0,0 +1,12 @@
+import { NavbarVariant } from '@sebgroup/extract';
+import { HTMLAttributes, ReactNode } from 'react';
+export interface NavProps extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    titleLink?: string;
+    brandLink?: string;
+    brandAriaLabel?: string;
+    variant?: NavbarVariant;
+    children?: ReactNode;
+}
+export declare const Navbar: ({ children, variant, title, titleLink, brandLink, brandAriaLabel, }: NavProps) => JSX.Element;
+export default Navbar;

package/lib/stepper/hook.d.ts

@@ -0,0 +1,3 @@
+import { AbstractStepper, StepperArgs, StepperData } from '@sebgroup/extract';
+export { StepperArgs };
+export declare const useStepper: ({ min, max, value, step, id }: StepperArgs) => [AbstractStepper, StepperData];

package/lib/stepper/stepper.d.ts

@@ -0,0 +1,8 @@
+import { StepperArgs } from './hook';
+export interface StepperProps extends StepperArgs {
+    label?: string;
+    description?: string;
+    statusMessage?: string;
+    onChange?: (value: number) => void;
+}
+export declare function Stepper({ label, description, statusMessage, onChange, ...props }: StepperProps): JSX.Element;

package/lib/tabs/tabs.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface IList {
+    text?: string;
+    href?: string;
+    disabled?: boolean;
+}
+interface TabsProps {
+    list?: IList[];
+    onTabChange?: (index: number) => void;
+    children?: ReactNode[];
+}
+export declare const Tabs: ({ list, onTabChange, children }: TabsProps) => JSX.Element;
+export default Tabs;

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.20",
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rxjs": "^6.6.7",
-    "merge": "^2.1.1"
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "1.0.0-beta.2",
-    "@sebgroup/extract": "1.0.0-beta.2",
-    "react-popper": "^2.2.5"
+    "@sebgroup/chlorophyll": "^1.0.0-beta.19",
+    "@sebgroup/extract": "^1.0.0-beta.19"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",
   "repository": {
@@ -28,7 +25,7 @@
     "url": "https://github.com/sebgroup/green/labels/react"
   },
   "homepage": "https://sebgroup.github.io/green/latest/react/",
-  "main": "./react.umd.js",
-  "module": "./react.esm.js",
+  "main": "./index.umd.js",
+  "module": "./index.esm.js",
   "typings": "./index.d.ts"
 }

package/lib/form/input.d.ts

@@ -1,5 +0,0 @@
-import { CheckboxProps, TextInputProps } from './types';
-export declare const TextInput: ({ label, info, onChangeText, ...props }: TextInputProps<string>) => JSX.Element;
-export declare const EmailInput: ({ label, info, onChangeText, ...props }: TextInputProps<string>) => JSX.Element;
-export declare const NumberInput: ({ label, info, onChangeText, ...props }: TextInputProps<number>) => JSX.Element;
-export declare const Checkbox: ({ label, onChecked, ...props }: CheckboxProps) => JSX.Element;

package/lib/layout/group.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-export interface GroupProps {
-    children: ReactNode;
-}
-export declare function Group({ children }: GroupProps): JSX.Element;
-export default Group;