@sebgroup/green-react 1.0.0-beta.9 → 1.0.1

package/lib/accordion/accordion-item.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface AccordionItemProps {
+    item: AccordionItemInterface;
+    index: number;
+    uuid: string;
+}
+export interface AccordionItemInterface {
+    label: string;
+    labelElementLevel: 2 | 3 | 4 | 5 | 6;
+    subLabel?: string;
+    content: JSX.Element;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onOpen?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onClose?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+declare const AccordionItem: ({ item, index, uuid }: AccordionItemProps) => JSX.Element;
+export default AccordionItem;

package/lib/accordion/accordion.d.ts

@@ -0,0 +1,6 @@
+import { AccordionItemInterface } from './accordion-item';
+export interface AccordionInterface {
+    items: AccordionItemInterface[];
+}
+declare const Accordion: ({ items }: AccordionInterface) => JSX.Element;
+export default Accordion;

package/lib/alert-ribbon/alert-ribbon.d.ts

@@ -0,0 +1,16 @@
+import React, { AriaAttributes, ReactNode } from 'react';
+import { AlertRibbonType } from '@sebgroup/extract';
+export interface AlertRibbonProps {
+    children: ReactNode;
+    type?: AlertRibbonType;
+    header?: ReactNode;
+    footer?: ReactNode;
+    isCloseable?: boolean;
+    closeText?: string;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    role?: 'alert';
+    ["aria-live"]?: AriaAttributes["aria-live"];
+    closeAriaLabel?: string;
+}
+export declare function AlertRibbon({ type, header, footer, children, closeText, isCloseable, onClose, role, "aria-live": ariaLive, closeAriaLabel }: AlertRibbonProps): JSX.Element;
+export default AlertRibbon;

package/lib/badge/badge.d.ts

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

package/lib/datepicker/hook.d.ts

@@ -6,7 +6,7 @@ interface HookResult {
     state: DatepickerState;
 }
 interface DatepickerHook {
-    (datepickerRef: RefObject<HTMLElement>, datepickerDialogRef: RefObject<HTMLElement>, dateInputRef: RefObject<HTMLInputElement>, options?: DatepickerOptions): HookResult;
+    (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,6 @@
-import { DropdownOption } from '@sebgroup/extract';
-export interface DropdownProps {
-    id?: string;
-    children?: string;
-    options: DropdownOption[];
-    loop?: boolean;
+import { DropdownArgs, OnChange } from '@sebgroup/extract';
+export interface DropdownProps extends DropdownArgs {
+    onChange?: OnChange;
 }
-export declare const Dropdown: ({ id, options, loop, children }: DropdownProps) => JSX.Element;
+export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, loop, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, }: DropdownProps) => JSX.Element;
 export default Dropdown;

package/lib/dropdown/hooks.d.ts

@@ -1,19 +1,29 @@
-import { DropdownHandler, DropdownOption } from '@sebgroup/extract';
-import { HTMLAttributes, RefObject } from 'react';
-interface HookArgs {
-    id?: string;
-    text?: string;
-    options: DropdownOption[];
-    loop?: boolean;
+import { DropdownHandler, OnChange, DropdownArgs } from '@sebgroup/extract';
+import { HTMLAttributes, InputHTMLAttributes, RefObject } from 'react';
+import { IValidator } from '@sebgroup/extract';
+interface HookArgs extends DropdownArgs {
     togglerRef: RefObject<HTMLElement>;
     listboxRef: RefObject<HTMLElement>;
+    onChange?: OnChange;
+    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[];
+    multiSelectProps: MultiSelectProps;
 }
-export declare const useDropdown: ({ id, text, options, loop, togglerRef, listboxRef }: HookArgs) => HookResult;
+export declare const useDropdown: ({ id, value, texts, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display, togglerRef, listboxRef, onChange, validator, }: HookArgs) => HookResult;
 export {};

package/lib/form/button/button.d.ts

@@ -1,11 +1,13 @@
 import { MouseEventHandler, ReactNode } from 'react';
-import { ButtonType, ButtonVariant } from '@sebgroup/extract';
+import { ButtonSize, ButtonType, ButtonVariant } from '@sebgroup/extract';
 export interface ButtonProps {
     children?: ReactNode;
     type?: ButtonType;
     variant?: ButtonVariant;
     active?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+    size?: ButtonSize;
 }
-export declare function Button({ children, variant, onClick, active, type, }: ButtonProps): JSX.Element;
+export declare function Button({ children, variant, onClick, disabled, active, type, size }: ButtonProps): JSX.Element;
 export default Button;

package/lib/form/formItems.d.ts

@@ -1,5 +1,5 @@
+import { IValidator } from '@sebgroup/extract';
 import React from 'react';
-import { IValidator } from './types';
 export interface FormItemsProps {
     children: React.ReactNode;
     validate?: IValidator;

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

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes } from 'react';
-import { CheckboxProps, IValidator, NumberInputProps, RadioButtonProps, TextInputProps } from '../types';
+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;

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

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

package/lib/form/types.d.ts

@@ -1,4 +1,4 @@
-import { IndicatorType, ValidatorRules } from '@sebgroup/extract';
+import { IValidator } from '@sebgroup/extract';
 import { HTMLProps } from 'react';
 export interface TextInputProps extends HTMLProps<HTMLInputElement> {
     type?: 'text' | 'email' | 'number';
@@ -21,8 +21,3 @@ export interface RadioButtonProps extends HTMLProps<HTMLInputElement> {
     value: string;
 }
 export declare type InputListener<T> = (newValue?: T) => unknown;
-export interface IValidator {
-    message: string;
-    indicator: IndicatorType;
-    rules?: ValidatorRules;
-}

package/lib/icons/check.d.ts

@@ -0,0 +1 @@
+export declare const Check: JSX.Element;

package/lib/icons/chevronDown.d.ts

@@ -0,0 +1 @@
+export declare const ChevronDown: JSX.Element;

package/lib/icons/index.d.ts

@@ -0,0 +1,4 @@
+export * from './square-exclamation';
+export * from './square-info';
+export * from './check';
+export * from './chevronDown';

package/lib/icons/square-exclamation.d.ts

@@ -0,0 +1 @@
+export declare const SquareExclamation: JSX.Element;

package/lib/icons/square-info.d.ts

@@ -0,0 +1 @@
+export declare const SquareInfo: JSX.Element;

package/lib/list/index.d.ts

@@ -0,0 +1,2 @@
+export * from './list';
+export * as ValueList from './valueList';

package/lib/list/valueList.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+interface ValueListProps {
+    children?: ReactElement<ValueListItemProps> | ReactElement<ValueListItemProps>[];
+    inverted?: boolean;
+}
+interface ValueListItemProps {
+    children: string;
+}
+export declare const Label: ({ children }: ValueListItemProps) => JSX.Element;
+export declare const Value: ({ children }: ValueListItemProps) => JSX.Element;
+export declare const List: ({ children, inverted }: ValueListProps) => JSX.Element;
+declare const _default: {
+    List: ({ children, inverted }: ValueListProps) => JSX.Element;
+    Label: ({ children }: ValueListItemProps) => JSX.Element;
+    Value: ({ children }: ValueListItemProps) => JSX.Element;
+};
+export default _default;

package/lib/select/index.d.ts

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

package/lib/select/select.d.ts

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+import { IValidator } from '@sebgroup/extract';
+import { SelectorAttributesProps, LabelProps } from '../../types';
+export interface SelectProps extends SelectorAttributesProps, LabelProps {
+    children: ReactNode;
+    validator?: IValidator;
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    onSelect?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    defaultValue?: string | number;
+    value?: string | number;
+}
+interface OptionProps {
+    children: string;
+    value: string | number;
+    disabled?: boolean;
+    invalid?: boolean;
+    autocomplete?: string;
+    autofocus?: boolean;
+    form?: string;
+    name?: string;
+    required?: boolean;
+    size?: number;
+    selected?: boolean;
+}
+interface OptionGroupProps {
+    label: string;
+    children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
+    disabled?: boolean;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export declare const Option: ({ value, children, ...rest }: OptionProps) => JSX.Element;
+export declare const OptionGroup: ({ label, disabled, children, }: OptionGroupProps) => JSX.Element;
+declare const _default: {
+    Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+    Option: ({ value, children, ...rest }: OptionProps) => JSX.Element;
+    OptionGroup: ({ label, disabled, children, }: OptionGroupProps) => JSX.Element;
+};
+export default _default;

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, onChange }: StepperArgs) => [AbstractStepper, StepperData];

package/lib/stepper/stepper.d.ts

@@ -0,0 +1,9 @@
+import { StepperArgs } from './hook';
+import { IValidator } from "@sebgroup/extract";
+export interface StepperProps extends StepperArgs {
+    label?: string;
+    description?: string;
+    statusMessage?: string;
+    validator?: IValidator;
+}
+export declare function Stepper({ label, description, statusMessage, validator, ...stepperArgs }: StepperProps): JSX.Element;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.1",
   "peerDependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "^1.0.0-beta.9",
-    "@sebgroup/extract": "^1.0.0-beta.9"
+    "@sebgroup/chlorophyll": "^1.0.0",
+    "@sebgroup/extract": "^1.0.0"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",
   "repository": {

package/types/index.d.ts

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

package/types/props/index.d.ts

@@ -0,0 +1,9 @@
+export interface SelectorAttributesProps {
+    id?: string;
+    className?: string;
+    testId?: string;
+}
+export interface LabelProps {
+    label?: string;
+    labelInformation?: string;
+}

package/lib/alert/alert.d.ts

@@ -1,12 +0,0 @@
-import { AlertType } from '@sebgroup/extract';
-import { ReactNode } from 'react';
-export interface AlertProps {
-    children: ReactNode;
-    type: AlertType;
-    header?: ReactNode;
-    footer?: ReactNode;
-    isCloseable?: boolean;
-    closeText?: string;
-}
-export declare function Alert({ type, header, footer, children, closeText, isCloseable, }: AlertProps): JSX.Element;
-export default Alert;