@luscii-healthtech/web-ui 0.0.0-alpha.00bf0f6

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

@@ -0,0 +1,2 @@
+import type { FC, ComponentPropsWithoutRef } from "react";
+export declare const Actions: FC<ComponentPropsWithoutRef<"div">>;

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

@@ -0,0 +1,67 @@
+import type { ComponentProps, ElementType, ReactNode } from "react";
+import type { ELEVATION } from "../../system/Elevation";
+import { Box } from "../Box/Box";
+import { type TitleProps } from "../Title/Title";
+type TitleAndMaybeActions = {
+    title: string;
+    /**
+     * Spaces and positions the action components correctly in relation to
+     * the styling of the card.
+     *
+     * @usage
+     * ```tsx
+     * <Card
+     *   actions={
+     *     <Card.Actions>
+     *       <PrimaryButton />
+     *       <SecondaryButton />
+     *     </Card.Actions>
+     *   }
+     * />
+     * ```
+     */
+    actions: ReactNode;
+} | {
+    title: undefined;
+    actions: undefined;
+} | {
+    title?: string;
+    /**
+     * The `actions` prop can only be used in conjunction with the `title` prop.
+     */
+    actions?: never;
+};
+export type Props<C extends ElementType = "div"> = ComponentProps<typeof Box<C>> & {
+    border?: boolean;
+    children: ReactNode;
+    /**
+     * Adds a box-shadow to the element based on the design system when hovering
+     */
+    elevationOnHover?: keyof typeof ELEVATION;
+    /**
+     * Whether or not to add the default padding to the card. Set this
+     * to `false` if you want to render something full width inside of the
+     * card, like an image or a list. You have access to the `Card.Padding`
+     * subcomponent to then add back the default padding wherever needed.
+     *
+     * @default true
+     */
+    padding?: boolean;
+} & TitleAndMaybeActions;
+export declare function Card<C extends ElementType = "div">(props: Props<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Card {
+    var Title: (props: TitleProps) => import("react/jsx-runtime").JSX.Element;
+    var TopBar: import("react").FC<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        children?: ReactNode;
+    }> & {
+        Actions: typeof import("./Actions").Actions;
+    };
+    var Padding: import("react").FC<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        children?: ReactNode;
+    }>;
+    var Section: import("react").FC<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        children?: ReactNode;
+    }>;
+    var Actions: import("react").FC<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>;
+}
+export {};

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

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef, FC, ReactNode } from "react";
+type Props = ComponentPropsWithoutRef<"div"> & {
+    children?: ReactNode;
+};
+export declare const Padding: FC<Props>;
+export {};

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

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef, FC, ReactNode } from "react";
+type Props = ComponentPropsWithoutRef<"div"> & {
+    children?: ReactNode;
+};
+export declare const Section: FC<Props>;
+export {};

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

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef, FC, ReactNode } from "react";
+import { Actions } from "./Actions";
+type StaticComponents = {
+    Actions: typeof Actions;
+};
+type Props = ComponentPropsWithoutRef<"div"> & {
+    children?: ReactNode;
+};
+export declare const TopBar: FC<Props> & StaticComponents;
+export {};

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

@@ -0,0 +1,30 @@
+import type { FC, ReactNode } from "react";
+type Props = {
+    /**
+     * An array of react nodes to be presented in the Carousel.
+     */
+    slides?: ReactNode[];
+    id?: string;
+    className?: string;
+    /**
+     * aria-label attributes for various controls
+     */
+    labels?: {
+        /**
+         * aria-label attribute for next button
+         */
+        nextButton?: string;
+        /**
+         * aria-label attribute for previous button
+         */
+        previousButton?: string;
+        /**
+         * aria-label attribute for dot indicator button based on its index
+         *
+         * @example (index) => `Page ${index}`
+         */
+        dotButton?: (index: number) => string;
+    };
+};
+export declare const Carousel: FC<Props>;
+export default Carousel;

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

@@ -0,0 +1,16 @@
+import type { FC, ReactNode } from "react";
+export type BackgroundColor = "white" | "slate-50";
+export type ImageSize = "small" | "large";
+export interface CenteredHeroProps {
+    title?: string;
+    text?: string;
+    image?: string;
+    imageSize?: ImageSize;
+    slots?: {
+        bottom?: ReactNode;
+    };
+    background?: BackgroundColor;
+    dataTestId?: string;
+}
+declare const CenteredHero: FC<CenteredHeroProps>;
+export default CenteredHero;

package/dist/src/components/ChatBubble/ChatBubble.d.ts

@@ -0,0 +1,54 @@
+import type { ComponentProps, ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import { Text } from "../Text/Text";
+type Props = {
+    /**
+     * Whatever the content of the message is.
+     */
+    children: string | ReactNode;
+    className?: string;
+    /**
+     * The name of the person who sent this message.
+     *
+     * @example "Dr. Mike Brown"
+     */
+    sender?: string;
+    /**
+     * The moment this message was sent or delivered. This
+     * can be a full date, or the time, or a relative time,
+     * even including other additional information.
+     *
+     * @example "14:02"
+     * @example "Yesterday at 14:02"
+     * @example "Delivered"
+     */
+    timestamp?: string;
+    /**
+     * Text to indicate the message was read. Can be a full
+     * date, or the time, or a relative time, even including
+     * other additional information.
+     *
+     * @example "Read yesterday at 14:10"
+     */
+    readReceipt?: string;
+    color?: "blue" | "grey";
+    /**
+     * Where to position the tip of the chat bubble.
+     */
+    tipPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+};
+type RootProps<C extends ElementType> = Props & ComponentPropsWithoutRef<C> & {
+    as?: C;
+};
+export declare function ChatBubble<C extends ElementType = "div">(props: RootProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatBubble {
+    var Text: typeof ChatBubbleText;
+    var DateIndicator: typeof ChatBubbleDateIndicator;
+}
+/**
+ * SUBCOMPONENTS
+ */
+declare function ChatBubbleText(props: ComponentProps<typeof Text>): import("react/jsx-runtime").JSX.Element;
+declare function ChatBubbleDateIndicator(props: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,35 @@
+import { type 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;
+    searchInputLabel?: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    searchPlaceHolder?: string;
+    emptyState: string;
+}
+export interface CheckboxListModalProps {
+    texts: CheckboxListModalTexts;
+    /**
+     * Accessory component to be rendered above the search input.
+     * For example, a button or any control that fit the use case.
+     */
+    accessory?: React.ReactNode;
+    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, accessory, initialItems, isLoadingInitialItems, isOpen, onSave, onCloseClick, filterItem, hasSearch, }: CheckboxListModalProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,68 @@
+import React from "react";
+import "./Checkbox.scss";
+export interface CheckboxProps {
+    /**
+     * ID used for semantic targeting, as can be used in attributes like `<label htmlFor="some-id">`.
+     */
+    id?: string;
+    /**
+     * The visible text labeling the checkbox element.
+     */
+    text?: string;
+    /**
+     * Helper text that adds some more information on what the option means, or inform
+     * the user about the consequences of the checkbox.
+     *
+     * Only works if the `renderLabel` prop isn't set.
+     */
+    explanation?: string;
+    /**
+     * @deprecated - this works exclusively as a checkbox now, if you want a different component,
+     * use the `Switch` component.
+     *
+     * Shows a different checkbox variant. `type="switch"` shows a switch-like component
+     * without a visual label.
+     */
+    type?: "regular" | "switch";
+    /**
+     * Set the value.
+     * Same as `checked` on `<input type="checkbox" />`.
+     */
+    isChecked?: boolean;
+    /**
+     * Value for when it is not clear if the state of this checkbox
+     * is "checked" or not (for hierarchical checkboxes).
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Disallow the user to change the checkbox value.
+     * Same as `disabled` on `<input type="checkbox" />`.
+     */
+    isDisabled?: boolean;
+    /**
+     * The name that the value of the checkbox will be associated with.
+     * Same as `name` on `<input type="checkbox" />`.
+     */
+    name?: string;
+    /**
+     * This can be used to retrieve the value it is referring to through onChange.
+     */
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+    className?: string;
+    classNameCheckboxLabel?: string;
+    /**
+     * Visually show that the currently selected value has an issue the user needs to attend to.
+     */
+    error?: boolean;
+    innerRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Renders a completely custom label. Can change its contents or
+     * appearance based on the props of the checkbox item.
+     *
+     * Overrides the `text` prop.
+     */
+    renderLabel?: (props: CheckboxProps) => JSX.Element | null;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import { type CheckboxGroupProps, type CheckboxListItem } from "./CheckboxList.types";
+type Props = CheckboxGroupProps & {
+    onStateChange?: (state: CheckboxListItem[]) => void;
+};
+export declare const CheckboxGroup: FC<Props>;
+export {};

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

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+import { type CheckboxListProps } from "./CheckboxList.types";
+type Props = {
+    groups: CheckboxListProps["groups"];
+    onChange?: CheckboxListProps["onChange"];
+    onStateChange?: (state: CheckboxListProps["groups"]) => void;
+    className?: string;
+};
+export { type Props as CheckboxListProps };
+export declare const CheckboxList: FC<Props>;

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

@@ -0,0 +1,74 @@
+export declare enum CheckboxState {
+    CHECKED = "checked",
+    INDETERMINATE = "indeterminate",
+    UNCHECKED = "unchecked"
+}
+export type CheckboxListProps = {
+    /**
+     * An array of items to render as checkboxes. Each item can be a single item or a group. When the
+     * title isn't specified, the group will render as a non-collapsible list. This is the way to
+     * render a regular list of checkboxes.
+     *
+     * @example
+     * Single list of checkboxes without visual grouping.
+     *
+     * ```tsx
+     * const groups = [{
+     *   items: [
+     *     {
+     *       id: "1",
+     *       label: "Item 1",
+     *     },
+     *     {
+     *       id: "2",
+     *       label: "Item 2",
+     *     },
+     *   ],
+     * }]
+     * ```
+     */
+    groups: CheckboxGroup[];
+    onChange: (event: CheckboxChangeEvent) => void;
+    className?: string;
+};
+type WithCollapsible = {
+    /**
+     * When `false` will prevent the checkbox list from being collapsed (also disabling clicking to expand/collapse)
+     * in the component and it will be displayed expanded by default.
+     * @default true
+     */
+    collapsible?: boolean;
+};
+export type CheckboxGroupProps = CheckboxGroup & {
+    onChange?: (event: CheckboxChangeEvent) => void;
+    className?: string;
+} & WithCollapsible;
+export interface CheckboxGroupItemProps extends CheckboxListItem {
+    onChange: (event: CheckboxChangeEvent) => void;
+}
+export interface CheckboxListItem {
+    id: string;
+    label: string;
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+}
+export type CheckboxGroup = {
+    /**
+     * When the title isn't specified, the group will render as a non-collapsible list.
+     */
+    title?: string;
+    /**
+     * The checkbox items to be shown inside of this group.
+     */
+    items: CheckboxListItem[];
+    /**
+     * Whether the group is initially collapsed or not.
+     */
+    isCollapsed?: boolean;
+} & WithCollapsible;
+export interface CheckboxChangeEvent {
+    id: string;
+    newCheckedValue: boolean;
+}
+export {};

package/dist/src/components/Chip/Chip.d.ts

@@ -0,0 +1,9 @@
+import type React from "react";
+type ChipProps = {
+    accessory?: React.ReactNode;
+    leadingIcon?: React.ReactNode;
+    onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    text: string | React.ReactNode;
+};
+export declare const Chip: ({ accessory, leadingIcon, onClick, text }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Collapse/Collapse.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    /**
+     * Use this prop to apply a custom class name to the root element
+     */
+    className?: string;
+    /**
+     * Use this prop to control the height of the collapsed content
+     * for example by using Tailwinds line-clamp utility classes.
+     * Hiding the overflow will be handled by the component.
+     *
+     * If this prop is not supplied, the component will not collapse and get the height of the content.
+     *
+     * @example "h-20"
+     * @example "ui:line-clamp-5"
+     */
+    contentClassName?: string;
+    isCollapsed?: boolean;
+    onClick?: () => void;
+    moreIndicator?: ReactNode;
+    showMoreIndicator?: boolean;
+};
+export declare const Collapse: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ConfirmationDialog/ConfirmationDialog.d.ts

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

package/dist/src/components/ConfirmationDialog/ConfirmationDialogChoices.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import { type ConfirmationDialogChoice, type ConfirmationDialogProps } from "./types/ConfirmationDialog.types";
+export declare const ConfirmationDialogChoices: FC<{
+    choices: ConfirmationDialogProps["choices"];
+    onChoiceChangeCallback?: (choice: ConfirmationDialogChoice) => void;
+    selectedChoice?: ConfirmationDialogChoice;
+}>;

package/dist/src/components/ConfirmationDialog/ConfirmationDialogMessage.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+export declare const ConfirmationDialogMessage: FC<{
+    message: string | string[];
+}>;

package/dist/src/components/ConfirmationDialog/ConfirmationDialogTitle.d.ts

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

package/dist/src/components/ConfirmationDialog/types/ConfirmationDialog.types.d.ts

@@ -0,0 +1,52 @@
+import type { IconKey, IconProps } from "../../../components/Icons/types/IconProps.type";
+import type { NotificationBannerColor } from "../../../components/NotificationBanner/NotificationBanner";
+interface ConfirmationDialogTexts {
+    /**
+     * You can also use the `children` prop for this.
+     */
+    message?: string | string[];
+    /**
+     * If this is `undefined`, the confirm button will not be shown.
+     */
+    confirmLabel?: string;
+    cancelLabel: string;
+}
+export interface ConfirmationDialogChoice<T extends string = string> {
+    text: string;
+    value: T;
+    description?: string;
+    displaysInfo?: {
+        level: NotificationBannerColor;
+        text: string;
+    };
+}
+export interface ConfirmationDialogProps {
+    children?: React.ReactNode;
+    /**
+     * Defaults to "dialog-small". These are a subset
+     * of the sizes of the BaseModal component.
+     */
+    size?: "dialog-small" | "dialog-medium";
+    texts: ConfirmationDialogTexts;
+    isOpen: boolean;
+    onCancel: () => void;
+    onConfirm?: (choice?: ConfirmationDialogChoice) => void;
+    isProcessing?: boolean;
+    withTitle?: {
+        title: string;
+        icon?: React.FC<IconProps> | IconKey;
+    };
+    choices?: {
+        defaultChoice?: ConfirmationDialogChoice["value"];
+        onChoiceChange: (choice: ConfirmationDialogChoice) => void;
+        options: {
+            0: ConfirmationDialogChoice;
+            1: ConfirmationDialogChoice;
+        } & ConfirmationDialogChoice[];
+    };
+    dataTestId?: string;
+}
+export interface ConfirmationDialogTitleProps {
+    title: ConfirmationDialogProps["withTitle"];
+}
+export {};

package/dist/src/components/Container/FlexColumn.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import { type FlexContainerProps } from "./types/FlexContainerProps.type";
+/**
+ * Container to be used for layouting instead of divs around the project.
+ * The spacing here has been coded according to our guidelines.
+ */
+export declare const FlexColumn: FC<FlexContainerProps>;

package/dist/src/components/Container/FlexContainer.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from "react";
+import { type FlexContainerBaseProps } from "./types/FlexContainerProps.type";
+/**
+ * Container to be used for layouting instead of divs around the project.
+ * The spacing here has been coded according to our guidelines.
+ */
+export declare const FlexContainer: FC<FlexContainerBaseProps & {
+    type: "column" | "row";
+}>;

package/dist/src/components/Container/FlexRow.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from "react";
+import { type FlexContainerProps } from "./types/FlexContainerProps.type";
+/**
+ * Container to be used for layouting instead of divs around the project.
+ * The spacing here has been coded according to our guidelines.
+ */
+export declare const FlexRow: FC<FlexContainerProps>;

package/dist/src/components/Container/types/FlexContainerProps.type.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+type Spacing = "tiny" | "none" | "small" | "medium" | "large";
+type FlexContainerBase = {
+    alignItems?: "center" | "start" | "end";
+    justifyContent?: "center" | "start" | "end" | "between";
+    position?: "static" | "fixed" | "absolute" | "relative" | "sticky";
+    verticalSpacing?: Spacing;
+    horizontalSpacing?: Spacing;
+    /**
+     * Applies the default padding (`"ui:p-4"`) inside the container.
+     */
+    hasPadding?: boolean;
+    backgroundColor?: string;
+    /**
+     * If `true`, will make the flexbox full width and not size itui:relative to its content.
+     * @default true
+     */
+    stretch?: boolean;
+};
+export type FlexContainerBaseProps = FlexContainerBase & {
+    children: ReactNode;
+};
+export type FlexContainerProps = Omit<FlexContainerBaseProps, "verticalSpacing" | "horizontalSpacing"> & {
+    spacing?: Spacing;
+};
+export {};

package/dist/src/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,72 @@
+import { LOCALE_MAP } from "../../system/Locale";
+import "react-datepicker/dist/react-datepicker.min.css";
+import "./DatePicker.scss";
+/**
+ * These are the props that are part of the `react-datepicker` library, rather than our own component.
+ * When we upgrade `react-datepicker` to v7, we should be able to remove these since that version
+ * introduces TypeScript support.
+ */
+type ReactDatePickerProps = {
+    /**
+     * Limits the choices in the calendar to the dates supplied in this list
+     */
+    includeDates?: Date[];
+    openToDate?: Date;
+    placeholderText?: string;
+    portalId?: string;
+    /**
+     * @default undefined
+     */
+    zIndex?: 10 | 20 | 30 | 40 | 50;
+    /**
+     * @default 30
+     */
+    popperZIndex?: 10 | 20 | 30 | 40 | 50;
+};
+export type DatePickerProps = {
+    /**
+     * @deprecated please use the LocaleContext instead
+     *
+     * The locale determines the language and formatting of the dates
+     * shown in this component. E.g. for "nl-NL" the date will be
+     * shown as "dd-mm-yyyy", while for "en-GB" it shows as "dd/mm/yyyy".
+     *
+     */
+    locale?: keyof typeof LOCALE_MAP;
+    className?: string;
+    selected?: Date;
+    hasCloseButton?: boolean;
+    closeButtonText?: string;
+    onChange?: (date: Date | null) => void;
+    /**
+     * @default true
+     */
+    showMonthDropdown?: boolean;
+    /**
+     * @default true
+     */
+    showYearDropdown?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    isDisabled?: boolean;
+    /**
+     * When set to `true`, if e.g. 10 January 2023 is selected and the user
+     * changes to a different month or year, the 10th will still be selected.
+     * When set to `false`, the date that the user has selected will not change
+     * until they select a new date.
+     *
+     * @default true
+     */
+    adjustDateOnChange?: boolean;
+    /**
+     * @default false
+     */
+    formatDateWithTime?: boolean;
+    shouldCloseOnSelect?: boolean;
+    /**
+     * @default false
+     */
+    allowSameDay?: boolean;
+} & ReactDatePickerProps;
+export declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/DatePicker/LabeledDatePicker.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type DatePickerProps } from "./DatePicker";
+type Props = DatePickerProps & {
+    label?: string;
+    helperText?: React.ReactNode;
+    errorText?: React.ReactNode;
+};
+export declare const LabeledDatePicker: React.FC<Props>;
+export {};