@onewelcome/react-lib-components 0.1.0-alpha

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Daniel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,71 @@
+# OneWelcome React Component Library
+
+This project provides React components built according to the [UI Component Library design](https://xd.adobe.com/view/1f7161d7-5ade-4e54-bb3d-6e4aa3a1d1a0-4a22/grid/). It uses the [DTS tool](https://weiran-zsd.github.io/dts-cli/) which provides for a consistent setup and configuration.
+
+> Note: the package is publicly available.
+
+## Commands
+
+### Component library
+
+Run lib locally:
+
+```bash
+npm start # or yarn start
+```
+
+This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
+
+To run tests, use `npm test` or `yarn test`.
+
+```bash
+npm test # or yarn test
+```
+
+### Storybook
+
+Run Storybook locally:
+
+```bash
+npm run storybook # or yarn storybook
+```
+
+## Development
+Please see the [CONTRIBUTING.md](https://github.com/onewelcome/react-lib-components/blob/master/CONTRIBUTING.md) file for information on how to develop for the Component Library.
+
+### Adding new icons
+
+See [adding icons to font manual](font/README.md)
+
+## Configuration
+
+Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
+
+### Bundle analysis
+
+Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `npm run size` and visulize it with `npm run analyze`.
+
+### Rollup
+
+[DTS](https://weiran-zsd.github.io/dts-cli/) uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
+
+### TypeScript
+
+`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
+
+## Release
+
+The publishing process is fired by git tag creation. CircleCI builds a package and publishes it to the public npmjs.com registry. 
+Release notes should be provided via GitHub UI.
+After a successful release, the release notes are published on `#releases` slack channel.
+
+### Creating release
+
+Follow these steps to create a release:
+
+- note all changes introduced from the last release
+- create a release on the GitHub repository page:
+  - determine new version (bugfix/minor/major)
+  - put proper release notes based on previous releases
+  - click on the `CREATE RELEASE` button
+- check if the release is published on `https://www.npmjs.com/package/@onewelcome/react-lib-components`

package/dist/BaseModal/BaseModal.d.ts

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from 'react';
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    id: string;
+    children: React.ReactNode;
+    open: boolean;
+    onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;
+    className?: string;
+    containerClassName?: string;
+    labelledby?: string;
+    describedby?: string;
+    disableEscapeKeyDown?: boolean;
+    disableBackdrop?: boolean;
+    zIndex?: number;
+}
+export declare const useSetBodyScroll: (open: boolean) => void;
+export declare const BaseModal: ({ id, children, open, onClose, className, containerClassName, labelledby, describedby, disableEscapeKeyDown, disableBackdrop, zIndex, ...restProps }: Props) => JSX.Element;

package/dist/BaseModal/BaseModalActions/BaseModalActions.d.ts

@@ -0,0 +1,5 @@
+import React, { HTMLAttributes } from 'react';
+export interface Props extends HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+export declare const BaseModalActions: ({ children, className, ...restProps }: Props) => JSX.Element;

package/dist/BaseModal/BaseModalContent/BaseModalContent.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    id?: string;
+    children: React.ReactNode;
+    className?: string;
+    disableAutoFocus?: boolean;
+}
+export declare const BaseModalContent: ({ id, children, className, disableAutoFocus, ...restProps }: Props) => JSX.Element;

package/dist/BaseModal/BaseModalContext.d.ts

@@ -0,0 +1,2 @@
+export declare const labelId: (id: string) => string;
+export declare const descriptionId: (id: string) => string;

package/dist/BaseModal/BaseModalHeader/BaseModalHeader.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface Props extends HTMLAttributes<HTMLElement> {
+    id: string;
+    title: string;
+    children?: React.ReactNode;
+    onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const BaseModalHeader: ({ id, title, children, onClose, ...restProps }: Props) => JSX.Element;

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+import { HTMLProps, ReactElement } from 'react';
+import { Link, Props as LinkProps } from '../Link/Link';
+declare type ChildrenType = ReactElement<LinkProps, typeof Link>;
+export interface Props extends HTMLProps<HTMLElement> {
+    children: ChildrenType | ChildrenType[];
+    'aria-label': string;
+}
+export declare const Breadcrumbs: ({ children, "aria-label": ariaLabel, className, ...rest }: Props) => JSX.Element;
+export {};

package/dist/Button/BaseButton.d.ts

@@ -0,0 +1,8 @@
+import React, { RefObject } from 'react';
+export interface Props extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref'> {
+    type?: 'submit' | 'button' | 'reset';
+    disabled?: boolean;
+    ref?: RefObject<HTMLButtonElement>;
+    color?: 'primary' | 'secondary' | 'tertiary' | 'default';
+}
+export declare const BaseButton: React.ForwardRefExoticComponent<Pick<Props, "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" | "label" | "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" | "type" | "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" | "onChange" | "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<HTMLButtonElement>>;

package/dist/Button/Button.d.ts

@@ -0,0 +1,10 @@
+import React, { RefObject } from 'react';
+import { Props as BaseButtonProps } from './BaseButton';
+export interface Props extends Omit<BaseButtonProps, 'ref'> {
+    startIcon?: React.ReactNode | false;
+    endIcon?: React.ReactNode | false;
+    children?: React.ReactNode;
+    variant?: 'text' | 'fill' | 'outline';
+    ref?: RefObject<HTMLButtonElement>;
+}
+export declare const Button: React.ForwardRefExoticComponent<Pick<Props, "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" | "label" | "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" | "type" | "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" | "onChange" | "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" | "startIcon" | "endIcon" | "variant"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/Button/IconButton.d.ts

@@ -0,0 +1,10 @@
+import React, { RefObject } from 'react';
+import { Props as BaseButtonProps } from './BaseButton';
+export interface Props extends Omit<BaseButtonProps, 'ref'> {
+    children?: React.ReactNode;
+    iconSize?: 's' | 'm' | 'l';
+    className?: string;
+    title: string;
+    ref?: RefObject<HTMLButtonElement>;
+}
+export declare const IconButton: React.ForwardRefExoticComponent<Pick<Props, "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" | "label" | "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" | "type" | "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" | "onChange" | "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" | "iconSize"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,18 @@
+import { HTMLProps, ReactElement } from 'react';
+import { Props as ButtonProps } from '../Button/Button';
+import { Props as IconButtonProps } from '../Button/IconButton';
+import { Placement, Offset } from '../hooks/usePosition';
+import { Props as ContextMenuItemProps } from './ContextMenuItem';
+export interface Props extends HTMLProps<HTMLDivElement> {
+    trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
+    children: ReactElement<ContextMenuItemProps> | ReactElement<ContextMenuItemProps>[];
+    placement?: Placement;
+    transformOrigin?: Placement;
+    offset?: Offset;
+    id: string;
+    show?: boolean;
+    domRoot?: HTMLElement;
+    onShow?: () => void;
+    onClose?: () => void;
+}
+export declare const ContextMenu: ({ trigger, children, id, show, onShow, onClose, placement, offset, transformOrigin, domRoot, ...rest }: Props) => JSX.Element;

package/dist/ContextMenu/ContextMenuItem.d.ts

@@ -0,0 +1,6 @@
+import React, { HTMLProps } from 'react';
+export interface Props extends Omit<HTMLProps<HTMLLIElement>, 'onClick'> {
+    children?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const ContextMenuItem: ({ children, onClick, ...rest }: Props) => JSX.Element;

package/dist/Dialog/Dialog.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes } from 'react';
+import { Props as ButtonProps } from '../Button/Button';
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    id: string;
+    open: boolean;
+    children: React.ReactNode;
+    alignActions: 'left' | 'right';
+    onClose: () => void;
+    title: string;
+    primaryAction: Action;
+    secondaryAction?: Action;
+    zIndex?: number;
+}
+export interface Action extends Omit<ButtonProps, 'variant' | 'ref'> {
+    label: string;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => unknown;
+}
+export declare const Dialog: ({ id, open, children, alignActions, onClose, title, primaryAction, secondaryAction, zIndex, ...restProps }: Props) => JSX.Element;

package/dist/Dialog/DialogActions/DialogActions.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Props as BaseModalActionsProps } from '../../BaseModal/BaseModalActions/BaseModalActions';
+export interface Props extends BaseModalActionsProps {
+    align: 'left' | 'right';
+}
+export declare const DialogActions: ({ children, align, ...restProps }: Props) => JSX.Element;

package/dist/Dialog/DialogTitle/DialogTitle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface Props {
+    id: string;
+    title: string;
+}
+export declare const DialogTitle: ({ id, title }: Props) => JSX.Element;

package/dist/Form/Checkbox/Checkbox.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { Props as FormHelperTextProps } from '../FormHelperText/FormHelperText';
+import { FormSelector } from '../form.interfaces';
+import { HTMLProps } from '../../interfaces';
+export interface CheckboxProps extends FormSelector<HTMLInputElement> {
+    children: ReactNode;
+    label?: string;
+    indeterminate?: boolean;
+    helperProps?: FormHelperTextProps;
+    wrapperProps?: HTMLProps<HTMLDivElement>;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const Checkbox: ({ children, name, helperText, helperProps, indeterminate, parentErrorId, errorMessage, disabled, label, parentHelperId, className, error, checked, wrapperProps, onChange, ...rest }: CheckboxProps) => JSX.Element;

package/dist/Form/Fieldset/Fieldset.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { HTMLProps } from '../../interfaces';
+import { Variant } from '../../Typography/Typography';
+export interface Props extends HTMLProps<HTMLFieldSetElement> {
+    children?: ReactElement | ReactElement[];
+    title: string;
+    titleVariant?: Variant;
+    hideTitle?: boolean;
+    background?: string;
+    noPadding?: boolean;
+    noBackground?: boolean;
+}
+export declare const Fieldset: ({ children, className, title, titleVariant, hideTitle, noBackground, background, noPadding, disabled, ...rest }: Props) => JSX.Element;

package/dist/Form/Form.d.ts

@@ -0,0 +1,5 @@
+import { HTMLProps, ReactNode } from 'react';
+export interface Props extends HTMLProps<HTMLFormElement> {
+    children?: ReactNode;
+}
+export declare const Form: ({ children, className, ...rest }: Props) => JSX.Element;

package/dist/Form/FormControl/FormControl.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { HTMLProps } from '../../interfaces';
+export interface Props extends HTMLProps<HTMLDivElement> {
+    children: ReactElement | ReactElement[];
+    grid?: 1 | 2 | 3;
+    align?: 'top' | 'start' | 'middle' | 'center' | 'bottom' | 'end' | 'stretch';
+}
+export declare const FormControl: ({ children, disabled, className, grid, align, ...rest }: Props) => JSX.Element;

package/dist/Form/FormGroup/FormGroup.d.ts

@@ -0,0 +1,18 @@
+/** The empty className property on FormHelperText is on purpose! We want to basically "filter" out the className from helperProps because we're adding this to the surrounding div. This makes it so also the errormessage receives this styling. */
+import { ReactChild } from 'react';
+import { Props as HelperProps } from '../FormHelperText/FormHelperText';
+import { Icons } from '../../Icon/Icon';
+import { HTMLProps } from '../../interfaces';
+export interface Props extends HTMLProps<HTMLDivElement> {
+    children: ReactChild[] | ReactChild;
+    error?: boolean;
+    errorMessageIcon?: Icons;
+    errorMessageIconPosition?: 'before' | 'after';
+    errorMessage?: string;
+    errorId?: string;
+    helperIndent?: number;
+    helperText?: string;
+    helperId?: string;
+    helperProps?: HelperProps;
+}
+export declare const FormGroup: ({ children, className, error, errorMessage, errorId, errorMessageIcon, errorMessageIconPosition, helperText, helperId, helperProps, helperIndent, ...rest }: Props) => JSX.Element;

package/dist/Form/FormHelperText/FormHelperText.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { HTMLProps } from '../../interfaces';
+export interface Props extends HTMLProps<HTMLDivElement> {
+    children?: ReactNode;
+    error?: boolean;
+}
+export declare const FormHelperText: ({ children, error, className, ...rest }: Props) => JSX.Element;

package/dist/Form/FormSelectorWrapper/FormSelectorWrapper.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { HTMLProps } from '../../interfaces';
+import { Props as FormHelperTextProps } from '../FormHelperText/FormHelperText';
+export interface Props extends HTMLProps<HTMLDivElement> {
+    children?: ReactNode;
+    nestedChildren?: ReactNode;
+    containerProps: HTMLProps<HTMLDivElement>;
+    helperProps?: FormHelperTextProps;
+    error?: boolean;
+    disabled?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    parentHelperId?: string;
+    parentErrorId?: string;
+    errorId: string;
+    identifier: string;
+}
+export declare const FormSelectorWrapper: ({ children, className, nestedChildren, containerProps, helperProps, error, disabled, helperText, errorMessage, parentErrorId, errorId, identifier, ...rest }: Props) => JSX.Element;

package/dist/Form/Input/Input.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { HTMLProps } from '../../interfaces';
+declare const dateTypes: readonly ["date", "time", "datetime-local"];
+export declare type Type = 'text' | 'email' | 'file' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'hidden' | typeof dateTypes[number];
+export interface Props extends HTMLProps<HTMLInputElement> {
+    wrapperProps?: HTMLProps<HTMLInputElement>;
+    labeledBy?: string;
+    type: Type;
+    error?: boolean;
+}
+export declare const Input: ({ error, className, name, style, wrapperProps, type, labeledBy, ...rest }: Props) => JSX.Element;
+export {};

package/dist/Form/Label/Label.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { HTMLProps } from '../../interfaces';
+export interface Props extends HTMLProps<HTMLLabelElement> {
+    children?: string;
+}
+export declare const Label: ({ children, className, hidden, ...rest }: Props) => JSX.Element;

package/dist/Form/Radio/Radio.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Props as HelperProps } from '../FormHelperText/FormHelperText';
+import { FormSelector } from '../form.interfaces';
+import { HTMLProps } from '../../interfaces';
+export interface Props extends FormSelector<HTMLInputElement> {
+    children: string;
+    value: string;
+    wrapperProps?: HTMLProps<HTMLDivElement>;
+    helperProps?: HelperProps;
+}
+export declare const Radio: ({ children, disabled, className, value, name, helperText, parentErrorId, parentHelperId, error, errorMessage, checked, wrapperProps, helperProps, onChange, ...rest }: Props) => JSX.Element;

package/dist/Form/Select/Option.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { HTMLProps } from '../../interfaces';
+export interface Props extends HTMLProps<HTMLLIElement> {
+    children: string;
+    value: string;
+    disabled?: boolean;
+    selected?: boolean;
+    label?: string;
+    filter?: string;
+    onOptionSelect?: (event: React.SyntheticEvent<HTMLLIElement>) => void;
+}
+export declare const Option: ({ children, className, selected, onOptionSelect, disabled, filter, ...rest }: Props) => JSX.Element | null;

package/dist/Form/Select/Select.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react';
+import { FormElement } from '../form.interfaces';
+export interface Props extends FormElement<HTMLSelectElement> {
+    children: ReactElement[];
+    name?: string;
+    labeledBy?: string;
+    describedBy?: string;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    className?: string;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child?: ReactElement) => void;
+    onClear?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const Select: ({ children, name, disabled, labeledBy, placeholder, describedBy, searchPlaceholder, className, error, value, onChange, onClear, ...rest }: Props) => JSX.Element;

package/dist/Form/Textarea/Textarea.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FormElement } from '../form.interfaces';
+export interface Props extends FormElement<HTMLTextAreaElement> {
+    wrapperClassName?: string;
+    errorClassName?: string;
+}
+export declare const Textarea: ({ error, disabled, className, rows, wrapperClassName, errorClassName, ...rest }: Props) => JSX.Element;

package/dist/Form/Toggle/Toggle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { CheckboxProps } from '../Checkbox/Checkbox';
+export interface Props extends Omit<CheckboxProps, 'indeterminate' | 'errorMessage' | 'error' | 'children'> {
+    children: string;
+}
+export declare const Toggle: ({ children, checked, ...rest }: Props) => JSX.Element;

package/dist/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { WrapperProps } from '../Wrapper/Wrapper';
+import { Props as FieldsetProps } from '../../../Form/Fieldset/Fieldset';
+export interface Props extends WrapperProps {
+    children: ReactElement[] | ReactElement;
+    fieldsetProps: FieldsetProps;
+}
+export declare const CheckboxWrapper: ({ children, error, helperText, helperProps, fieldsetProps, ...rest }: Props) => JSX.Element;

package/dist/Form/Wrapper/InputWrapper/InputWrapper.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Type, Props as InputProps } from '../../Input/Input';
+import { WrapperProps } from '../Wrapper/Wrapper';
+interface OptionalInputProps extends Omit<InputProps, 'type'> {
+}
+export interface Props extends WrapperProps {
+    label: string;
+    type: Type;
+    name: string;
+    inputProps?: OptionalInputProps;
+    value: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+export declare const InputWrapper: ({ type, name, inputProps, helperText, helperProps, value, error, onChange, onBlur, onFocus, ...rest }: Props) => JSX.Element;
+export {};

package/dist/Form/Wrapper/RadioWrapper/RadioWrapper.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactElement } from 'react';
+import { WrapperProps } from '../Wrapper/Wrapper';
+import { Props as FieldsetProps } from '../../../Form/Fieldset/Fieldset';
+export interface Props extends WrapperProps {
+    children: ReactElement | ReactElement[];
+    fieldsetProps: FieldsetProps;
+    value: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const RadioWrapper: ({ children, error, name, helperText, helperProps, fieldsetProps, value, onChange, disabled, ...rest }: Props) => JSX.Element;

package/dist/Form/Wrapper/SelectWrapper/SelectWrapper.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactChild } from 'react';
+import { WrapperProps } from '../Wrapper/Wrapper';
+import { Props as SelectProps } from '../../Select/Select';
+export interface Props extends Omit<WrapperProps, 'onChange'> {
+    children: ReactChild | ReactChild[];
+    placeholder?: string;
+    value: string;
+    selectProps?: SelectProps;
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    onClear?: () => void;
+}
+export declare const SelectWrapper: ({ children, error, value, placeholder, selectProps, helperProps, onChange, onClear, ...rest }: Props) => JSX.Element;

package/dist/Form/Wrapper/TextareaWrapper/TextareaWrapper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { WrapperProps } from '../Wrapper/Wrapper';
+import { Props as TextareaProps } from '../../Textarea/Textarea';
+export interface Props extends Omit<WrapperProps, 'onFocus' | 'onChange' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'> {
+    placeholder?: string;
+    textareaProps?: TextareaProps;
+    value: string;
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+}
+export declare const TextareaWrapper: ({ name, error, value, label, placeholder, textareaProps, helperProps, onChange, onFocus, onBlur, onMouseEnter, onMouseLeave, disabled, ...rest }: Props) => JSX.Element;

package/dist/Form/Wrapper/Wrapper/Wrapper.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement } from 'react';
+import { Props as FormGroupProps } from '../../FormGroup/FormGroup';
+import { Props as LabelProps } from '../../Label/Label';
+import { Props as HelperProps } from '../../FormHelperText/FormHelperText';
+import { HTMLProps } from '../../../interfaces';
+export interface Props extends Omit<FormGroupProps, 'children'> {
+    children: ReactElement | ReactElement[];
+    floatingLabelActive?: boolean;
+    floatingLabel?: boolean;
+    helperIndent?: number;
+    label?: string;
+    labelProps?: LabelProps;
+    name: string;
+    /** This does NOT add validation! It simply adds an asterix on the Label! */
+    required?: boolean;
+    innerClassName?: string;
+}
+/** For components that extend this component we create an interface (InputWrapper, SelectWrapper, etc.) */
+export interface WrapperProps extends HTMLProps<HTMLDivElement> {
+    errorMessage?: string;
+    error: boolean;
+    helperText?: string;
+    helperProps?: HelperProps;
+    label?: string;
+    name: string;
+    required?: boolean;
+}
+export declare const Wrapper: ({ children, className, error, errorMessage, errorId, errorMessageIcon, errorMessageIconPosition, helperText, helperId, floatingLabel, floatingLabelActive, required, helperProps, helperIndent, labelProps, label, disabled, name, innerClassName, ...rest }: Props) => JSX.Element;

package/dist/Form/form.interfaces.d.ts

@@ -0,0 +1,12 @@
+import { HTMLProps } from '../interfaces';
+/** Radios */
+export interface FormSelector<T> extends FormElement<T> {
+    helperText?: string;
+    errorMessage?: string;
+    parentHelperId?: string;
+    parentErrorId?: string;
+}
+/** Default form elements */
+export interface FormElement<T> extends HTMLProps<T> {
+    error?: boolean;
+}