@luscii-healthtech/web-ui 0.0.0-alpha.38b1613

package/README.md

@@ -0,0 +1,109 @@
+# web-ui
+
+The web-ui repository contains the web UI components for Luscii's front end projects. It is published to NPM for inclusion into our projects. It also uses storybook and is published to chromatic for easy review of changes.
+
+## Running locally
+
+If you want to run storybook locally you can use
+
+```bash
+yarn install
+yarn storybook
+```
+
+## Testing your production build
+
+Assuming the following setup:
+
+- The `web-ui` and `cVitals-Web` repositories are siblings are in the same folder
+- You have ran `yarn install` on `cVitals-Web`
+- You have ran `yarn build` on `web-ui`
+
+Run the script below in your terminal, _in the parent folder of the repositories_.
+
+```
+cp -a web-ui/dist/. cVitals-Web/node_modules/@luscii-healthtech/web-ui/dist
+```
+
+Or use the shortcut:
+
+```
+yarn test-copy-build
+```
+
+When you run cVitals again, it should contain your latest updates in the component library. Use this to make sure your changes are solid before merging a pull request.
+
+## Contributing
+
+Make sure you understand our design system and follow its guidelines. They are document in storybook. We value consistency, simplicity and usability highly. Don't mess it up.
+
+If you want to add components, do so in
+
+```
+/src/components
+```
+
+Please stay vigilant when adding components that we implement them consistently in our projects and that it is clear when and where they have to be used. We want to avoid a lot of components that are similar.
+
+When you create new components, you must add them to storybook as well. Stories go in
+
+```
+/stories
+```
+
+### Adding icons
+
+Add new icons by:
+
+- Add the svg file(s) in `src/components/Icons/icons`
+- Run `yarn icons`
+
+The icons are optimized by SVGO and transformed into React components by [SVGR](https://react-svgr.com) which are placed in `src/components/Icons`.
+
+## CI setup
+
+#### Branching
+
+The `main` branch is our default branch. When you contribute, branch from there and name your branch
+
+```
+  //Branch names convention (enforced)
+
+  major/*      //for a new design system or changes that effect our foundations (typography, color)
+  minor/*      //for new components and stories
+  patch/*      //for small improvements to existing components, stories
+  bug/*        //for bugs, fixes
+```
+
+We have configured at lot of magic for your convenience.
+
+#### On every PR
+
+1. the module build, lint and tests are checked.
+2. The storybook build is published to chromatic.
+3. Labels are added based on the branch name and PR size.
+4. Branch names must follow the convention and are checked
+
+#### On merge to main
+
+1. Draft a github release
+2. Version bump of the package
+3. Publish new package to NPM
+
+---
+
+## IE11
+
+This package includes [dnd-kit](https://dndkit.com) as a peer dependency. The bundle of dnd-kit contains syntax which isn't compatible with IE11, therefore any application needing to support IE11 has to transpile dnd-kit.
+
+It should also at least include the following polyfills to make it work:
+
+- [core-js](https://www.npmjs.com/package/core-js)
+- [regenerator-runtime](https://www.npmjs.com/package/regenerator-runtime)
+- [smoothscroll-polyfill](https://www.npmjs.com/package/smoothscroll-polyfill)
+
+Optional:
+
+- [web-animations-js](https://www.npmjs.com/package/web-animations-js)
+
+This isn't necessary if the [drop animation is disabled](https://github.com/clauderic/dnd-kit/issues/705#issuecomment-1103056336). Check out [this ticket](https://github.com/clauderic/dnd-kit/issues/271) for more information on IE11.

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { AccordionItemProps } from "./AccordionItem";
+export interface AccordionProps {
+    dataTestId?: string;
+    items: AccordionItemProps[];
+    className?: string;
+    isCollapsedByDefault?: boolean;
+}
+declare const Accordion: React.VFC<AccordionProps>;
+export default Accordion;

package/dist/components/Accordion/AccordionItem.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface AccordionItemProps {
+    id: string | number;
+    title: string;
+    content: React.ReactNode;
+    className?: string;
+    isCollapsedByDefault?: boolean;
+}
+export declare const AccordionItem: React.VFC<AccordionItemProps>;

package/dist/components/AccordionList/AccordionList.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { AccordionProps } from "../Accordion/Accordion";
+import { DraggableListProps, ListItemProps, SortableListProps } from "../List/List.types";
+import { AccordionItemProps } from "../Accordion/AccordionItem";
+import { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
+import { AccordionListActions } from "./subcomponents/AccordionListActions";
+export interface AccordionListProps extends Omit<AccordionProps, "items"> {
+    localisations: {
+        title: string;
+        searchPlaceholder?: string;
+        emptyListText?: string;
+    };
+    accordionItems: AccordionItem[];
+    /**
+     * @deprecated
+     * Use the `actions` prop to render any button(s)
+     * or other component(s) automatically in the correct area.
+     */
+    buttonProps?: BaseButtonProps;
+    isSearchEnabled?: boolean;
+    isLoading?: boolean;
+    actions?: React.ReactNode;
+}
+export type AccordionListItemProps<T = ListItemProps> = Omit<AccordionItemProps, "content"> & {
+    listItems: T[];
+    draggableListType?: "default";
+};
+export type DraggableAccordionListItemProps = Omit<AccordionItemProps, "content"> & {
+    draggableListType: "draggable";
+    listItems: DraggableListProps["items"];
+};
+export type SortableAccordionListItemProps = Omit<AccordionItemProps, "content"> & {
+    draggableListType: "sortable";
+    draggableIdentifier: string;
+    listItems: SortableListProps["items"];
+};
+export type AccordionItem = AccordionListItemProps | DraggableAccordionListItemProps | SortableAccordionListItemProps;
+interface StaticComponents {
+    Actions: typeof AccordionListActions;
+}
+export declare const AccordionList: React.FC<AccordionListProps> & StaticComponents;
+export default AccordionList;

package/dist/components/AccordionList/subcomponents/AccordionListActions.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+/**
+ * Use in the actions of an AccordionList. Spaces out the action
+ * components correctly in relation to the styling of the AccordionList component.
+ *
+ * @usage
+ * ```tsx
+ * <AccordionList
+ *   actions={
+ *     <AccordionList.Actions>
+ *       <PrimaryButton />
+ *       <SecondaryButton />
+ *     </AccordionList.Actions>
+ *   }
+ * />
+ * ```
+ */
+export declare const AccordionListActions: React.FC<React.PropsWithChildren>;

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface BadgeProps {
+    badgeCount: number;
+    className?: string;
+}
+declare const Badge: (props: BadgeProps) => JSX.Element;
+export default Badge;

package/dist/components/BaseList/BaseList.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { BaseListItemProps, BaseListProps } from "./BaseList.types";
+declare const BaseListInner: <T extends BaseListItemProps>({ dataTestId, title, headerButton, emptyStateMessage, isLoading, items, headerTransparent, itemComponent, footer, withBorder, }: BaseListProps<T>, ref: React.ForwardedRef<HTMLUListElement>) => JSX.Element;
+export declare const BaseList: <T extends BaseListItemProps>(props: BaseListProps<T> & {
+    ref?: React.ForwardedRef<HTMLUListElement> | undefined;
+}) => ReturnType<typeof BaseListInner>;
+export {};

package/dist/components/BaseList/BaseList.types.d.ts

@@ -0,0 +1,55 @@
+import React, { Ref, ReactNode } from "react";
+import { PrimaryButtonProps } from "../..";
+import { ButtonDefinition } from "../ButtonV2/ButtonProps.type";
+import { IconProps } from "../Icons/types/IconProps.type";
+import { TitleProps } from "../Title/Title";
+export type BaseListItemProps = {
+    itemId: string | number;
+    title: string;
+    subtitle?: string;
+    icon?: React.FunctionComponent<IconProps> | string;
+    accessories?: JSX.Element[];
+    onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
+    /** Same as onClick to be compatible with listItem */
+    handleItemClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
+    onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;
+    tooltipId?: string;
+    isSelected?: boolean;
+    roundTop?: boolean;
+    roundBottom?: boolean;
+    withBorder?: boolean;
+    isDraggable?: boolean;
+    dataTestId?: string;
+    ref?: Ref<HTMLLIElement>;
+    renderDragHandle?: () => ReactNode;
+    htmlProps?: React.HTMLProps<HTMLLIElement>;
+};
+export type OnAssetLoadErrorPayload = Pick<BaseListItemProps, "itemId" | "subtitle" | "title" | "icon">;
+export interface BaseListProps<T extends BaseListItemProps = BaseListItemProps> {
+    items: T[];
+    title?: string | TitleProps;
+    headerButton?: ButtonDefinition<PrimaryButtonProps>;
+    headerTransparent?: boolean;
+    itemComponent?: React.FC<T>;
+    emptyStateMessage?: string;
+    isLoading?: boolean;
+    dataTestId?: string;
+    footer?: ReactNode;
+    withBorder?: boolean;
+    ref?: Ref<HTMLUListElement>;
+}
+export type BaseListHeaderProps = {
+    title?: string | TitleProps;
+    button?: ButtonDefinition<PrimaryButtonProps>;
+    transparent?: boolean;
+    withBorder?: boolean;
+};
+export type DraggableBaseListProps = Omit<BaseListProps<DraggableBaseListItemProps>, "itemComponent">;
+export type DraggableBaseListItemProps = BaseListItemProps & {
+    draggableIdentifier: string;
+    draggableData?: Record<string, unknown>;
+};
+export type SortableBaseListProps = DraggableBaseListProps & {
+    draggableIdentifier: string;
+};
+export type SortableBaseListItemProps = DraggableBaseListItemProps;

package/dist/components/BaseList/BaseListEmptyState.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export declare const BaseListEmptyState: React.FC<{
+    message: string;
+    roundTop?: boolean;
+    withBorder?: boolean;
+}>;
+export default BaseListEmptyState;

package/dist/components/BaseList/BaseListHeader.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BaseListHeaderProps } from "./BaseList.types";
+export declare const BaseListHeader: React.FC<BaseListHeaderProps>;
+export default BaseListHeader;

package/dist/components/BaseList/BaseListIcon.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { BaseListItemProps } from "./BaseList.types";
+export declare const BaseListIcon: React.FC<Pick<BaseListItemProps, "icon"> & {
+    onAssetLoadError?: () => void;
+}>;

package/dist/components/BaseList/BaseListItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BaseListItemProps } from "./BaseList.types";
+export declare const BaseListItem: React.FC<BaseListItemProps>;
+export default BaseListItem;

package/dist/components/BaseList/DraggableBaseList/DraggableBaseList.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { DraggableBaseListProps } from "../BaseList.types";
+export declare const DraggableBaseList: React.FC<DraggableBaseListProps>;
+export default DraggableBaseList;

package/dist/components/BaseList/DraggableBaseList/DraggableBaseListItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DraggableBaseListItemProps } from "../BaseList.types";
+export declare const DraggableBaseListItem: React.FC<DraggableBaseListItemProps>;

package/dist/components/BaseList/DraggableBaseList/index.d.ts

@@ -0,0 +1,2 @@
+export { DraggableBaseList } from "./DraggableBaseList";
+export { DraggableBaseListItem } from "./DraggableBaseListItem";

package/dist/components/BaseList/ListSkeleton/ListItemSkeleton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ListItemSkeleton: () => JSX.Element;

package/dist/components/BaseList/ListSkeleton/ListSkeleton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import "./ListSkeleton.scss";
+type ListSkeletonProps = {
+    items: number;
+    dataTestId?: string;
+};
+export declare const ListSkeleton: ({ items, dataTestId, }: ListSkeletonProps) => JSX.Element;
+export {};

package/dist/components/BaseList/SortableBaseList/SortableBaseList.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { SortableBaseListProps } from "../BaseList.types";
+export declare const SortableBaseList: React.FC<SortableBaseListProps>;
+export default SortableBaseList;

package/dist/components/BaseList/SortableBaseList/SortableBaseListItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SortableBaseListItemProps } from "../BaseList.types";
+export declare const SortableBaseListItem: React.FC<SortableBaseListItemProps>;

package/dist/components/BaseList/SortableBaseList/index.d.ts

@@ -0,0 +1,2 @@
+export { SortableBaseList } from "./SortableBaseList";
+export { SortableBaseListItem } from "./SortableBaseListItem";

package/dist/components/BaseList/index.d.ts

@@ -0,0 +1,6 @@
+export { BaseList } from "./BaseList";
+export { BaseListItem } from "./BaseListItem";
+export type { BaseListProps, BaseListItemProps, OnAssetLoadErrorPayload, DraggableBaseListProps, DraggableBaseListItemProps, } from "./BaseList.types";
+export { DraggableBaseList, DraggableBaseListItem } from "./DraggableBaseList";
+export { SortableBaseList, SortableBaseListItem } from "./SortableBaseList";
+export { getDndListItemProps } from "./utils";

package/dist/components/BaseList/utils.d.ts

@@ -0,0 +1,10 @@
+import { Active, Over } from "@dnd-kit/core";
+import { ListItemProps } from "../List/List";
+declare const draggableListItemPropsPointer: {
+    readonly symbol: symbol;
+};
+type DraggableListItemProps = WeakMap<typeof draggableListItemPropsPointer, Pick<ListItemProps, "itemId" | "title" | "subtitle" | "icon" | "isDraggable" | "isSelected">>;
+export declare const createDraggableListProps: ({ itemId, title, subtitle, icon, isDraggable, isSelected, }: ListItemProps) => DraggableListItemProps;
+export declare const draggableListPropsKey: "listItem";
+export declare const getDndListItemProps: (subject: Active | Over) => ListItemProps | null;
+export {};

package/dist/components/Breadcrumbs/BreadcrumbItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BreadcrumbDividerProps, Crumb } from "./Breadcrumbs.types";
+export declare const BreadcrumbItem: React.FC<Crumb>;
+export declare const BreadcrumbDividerItem: React.FC<BreadcrumbDividerProps>;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { BreadcrumbProps } from "./Breadcrumbs.types";
+export declare const Breadcrumbs: React.FC<BreadcrumbProps>;

package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,14 @@
+export interface Crumb {
+    name: string;
+    key?: string;
+    link?: string;
+}
+export interface BreadcrumbProps {
+    crumbs: Crumb[];
+    truncateAfter?: number;
+}
+export type BreadcrumbDividerProps = {
+    onClick: () => void;
+    truncatedCrumbs: Crumb[];
+};
+export declare const isBreadcrumbDividerProps: (subject: unknown) => subject is BreadcrumbDividerProps;

package/dist/components/Breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export type { BreadcrumbProps, Crumb } from "./Breadcrumbs.types";
+export { Breadcrumbs } from "./Breadcrumbs";

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BUTTON_ROLES, ButtonProps } from "./Button.types";
+/**
+ * TODO: We have to probably use [ButtonV2.tsx](../../components/ButtonV2/ButtonV2.tsx)
+ * to replace this component at some point.
+ */
+declare function Button(props: ButtonProps): JSX.Element;
+export default Button;
+export { BUTTON_ROLES };

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { RestPropped } from "../../types/general.types";
+import { IconProps } from "../Icons/types/IconProps.type";
+export declare const BUTTON_ROLES: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly SECONDARY_DARK: "secondaryDark";
+    readonly TERTIARY: "tertiary";
+    readonly QUATERNARY: "quaternary";
+    readonly NEGATIVE: "negative";
+    readonly TEXT: "text";
+    readonly LINK: "link";
+    readonly ICON: "icon";
+};
+type BUTTON_KEYS = keyof typeof BUTTON_ROLES;
+export type BUTTON_TYPE = (typeof BUTTON_ROLES)[BUTTON_KEYS];
+export type ButtonType = "button" | "submit";
+export interface ButtonProps extends RestPropped {
+    text?: string;
+    role?: BUTTON_TYPE;
+    type?: ButtonType;
+    title?: string;
+    link?: string;
+    isPending?: boolean;
+    isDisabled?: boolean;
+    onClick?: (arg: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    className?: string;
+    iconName?: string;
+    hasIcon?: boolean;
+    dynamicIcon?: React.FunctionComponent<IconProps>;
+}
+export {};

package/dist/components/Button/ButtonIcon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ButtonIconProps {
+    name: string;
+    className?: string;
+}
+export declare const ButtonIcon: (props: ButtonIconProps) => JSX.Element;
+export {};

package/dist/components/ButtonV2/ButtonProps.type.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import type { IconKey, IconProps } from "../Icons/types/IconProps.type";
+import { TextColor, TextHoverColor } from "../Text/Text";
+/**
+ * Properties that are present in all variants of the button
+ *
+ */
+export interface BaseButtonProps extends React.ComponentPropsWithRef<"button"> {
+    text?: string;
+    icon?: React.FunctionComponent<IconProps> | IconKey;
+    isDisabled?: boolean;
+    className?: string;
+    dataTestId?: string;
+}
+export type NonPrimaryButtonProps = BaseButtonProps;
+/**
+ * Extra properties that can be set when the variant of the button
+ * supports the pending state
+ *
+ */
+export interface ButtonWithPendingStateProps extends BaseButtonProps {
+    isPending?: boolean;
+}
+export type PrimaryButtonProps = ButtonWithPendingStateProps;
+/**
+ * All properties of BaseButtonProps and ButtonWithPendingStateProps,
+ * plus other properties that are assigned internally by the button variants.
+ *
+ */
+export interface ButtonProps extends BaseButtonProps, ButtonWithPendingStateProps {
+    textColor?: TextColor;
+    textHoverColor?: TextHoverColor;
+}
+/**
+ * Interface for defining a button
+ */
+export interface ButtonDefinition<Props extends BaseButtonProps = BaseButtonProps> {
+    buttonType: React.FunctionComponent<Props>;
+    buttonProps: React.Attributes & Props;
+}
+/**
+ * Interface for defining a button with mandatory key
+ */
+export interface ButtonDefinitionWithKey<Props extends BaseButtonProps = BaseButtonProps> {
+    buttonType: React.FunctionComponent<Props>;
+    buttonProps: {
+        key: string | number;
+    } & Props;
+}

package/dist/components/ButtonV2/ButtonV2.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ButtonProps } from "./ButtonProps.type";
+export declare const ButtonV2: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ButtonV2/PrimaryButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ButtonWithPendingStateProps } from "./ButtonProps.type";
+export declare const PrimaryButton: (props: ButtonWithPendingStateProps) => JSX.Element;

package/dist/components/ButtonV2/SecondaryButton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ButtonProps } from "./ButtonProps.type";
+export declare const SecondaryButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ButtonV2/TertiaryButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BaseButtonProps } from "./ButtonProps.type";
+export declare const TertiaryButton: (props: BaseButtonProps) => JSX.Element;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type CardProps = {
+    title: string;
+    children: React.ReactNode;
+    dataTestId?: string;
+};
+/**
+ * Card component that centralizes itself inside a container.
+ * Specific variant made with ui-w-135 to suffice the use case needed,
+ * more variants can be added.
+ */
+export declare const Card: React.FC<CardProps>;

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface CarouselProps {
+    id: string;
+    slides: React.ReactNode[];
+    className?: string;
+}
+declare const Carousel: ({ slides, className, id }: CarouselProps) => JSX.Element;
+export default Carousel;

package/dist/components/Carousel/GliderContainer.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./GliderContainer.scss";
+interface GliderContainerProps {
+    children: React.ReactNode;
+}
+export declare const GliderContainer: (props: GliderContainerProps) => JSX.Element;
+export {};

package/dist/components/CenteredHero/CenteredHero.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ButtonProps } from "../Button/Button.types";
+export type BackgroundColor = "white" | "slate-50";
+export type ImageSize = "small" | "large";
+export interface CenteredHeroProps {
+    title: string;
+    text: string;
+    image: string;
+    imageSize?: ImageSize;
+    buttons?: ButtonProps[];
+    background?: BackgroundColor;
+}
+declare const CenteredHero: ({ title, text, image, buttons, background, imageSize, }: CenteredHeroProps) => JSX.Element;
+export default CenteredHero;

package/dist/components/CheckBoxListModal/CheckboxListModal.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { CheckboxGroupItemProps } from "../CheckboxList/CheckboxList.types";
+export type Item = {
+    group?: string;
+    isPinned?: boolean;
+} & Pick<CheckboxGroupItemProps, "id" | "label" | "isChecked" | "isDisabled">;
+export interface Group {
+    title?: string;
+    items: Item[];
+}
+interface CheckboxListModalTexts {
+    title: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    searchPlaceHolder?: string;
+    emptyState: string;
+}
+export interface CheckboxListModalProps {
+    texts: CheckboxListModalTexts;
+    initialItems: Array<Item>;
+    isLoadingInitialItems?: boolean;
+    isOpen: boolean;
+    onSave: (newItems: Item[]) => void;
+    onCloseClick: () => void;
+    filterItem: (item: Item, searchQuery: string) => boolean;
+    className?: string;
+    hasSearch: boolean;
+}
+export declare const CheckboxListModal: ({ texts, initialItems, isLoadingInitialItems, isOpen, onSave, onCloseClick, filterItem, hasSearch, }: CheckboxListModalProps) => JSX.Element;
+export {};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import "./Checkbox.scss";
+export interface CheckboxProps {
+    id?: string;
+    text?: string;
+    explanation?: string;
+    type?: "regular" | "switch";
+    isChecked?: boolean;
+    isIndeterminate?: boolean;
+    isDisabled?: boolean;
+    name?: string;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    error?: boolean;
+    innerRef?: React.Ref<HTMLInputElement>;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/components/CheckboxList/CheckboxGroup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CheckboxGroupProps } from "./CheckboxList.types";
+export declare const CheckboxGroup: ({ title, items, onChange, className, hasDividers, isCollapsed, collapsible, }: CheckboxGroupProps) => JSX.Element;

package/dist/components/CheckboxList/CheckboxList.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CheckboxListProps } from "./CheckboxList.types";
+export { CheckboxListProps };
+export declare const CheckboxList: ({ groups, onChange, className, hasDividers, }: CheckboxListProps) => JSX.Element;
+export default CheckboxList;