@luscii-healthtech/web-ui 0.0.0-alpha.01cea45

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/Actions.d.ts

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

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

@@ -0,0 +1,57 @@
+import React from "react";
+import { 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: React.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 React.ElementType> = React.ComponentPropsWithoutRef<C> & {
+    as?: C;
+    children: React.ReactNode;
+    /**
+     * 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 React.ElementType = "div">(props: Props<C>): React.JSX.Element;
+export declare namespace Card {
+    var Title: (props: TitleProps) => React.JSX.Element;
+    var TopBar: typeof import("./TopBar").TopBar;
+    var Padding: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        children?: React.ReactNode;
+    }>;
+    var Section: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        children?: React.ReactNode;
+    }>;
+    var Actions: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>;
+}
+export {};

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

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

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

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = React.ComponentPropsWithoutRef<"div"> & {
+    children?: React.ReactNode;
+};
+export declare function TopBar(props: Props): React.JSX.Element;
+export declare namespace TopBar {
+    var Actions: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>;
+}
+export {};

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,64 @@
+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;
+    /**
+     * 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;
+    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/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, isCollapsed, collapsible, }: CheckboxGroupProps) => JSX.Element;

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

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

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

@@ -0,0 +1,74 @@
+export declare enum CheckboxState {
+    CHECKED = "checked",
+    INDETERMINATE = "indeterminate",
+    UNCHECKED = "unchecked"
+}
+export interface 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/components/ConfirmationDialog/ConfirmationDialog.d.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import type { IconKey, IconProps } from "../../Icons/types/IconProps.type";
+import type { NotificationBannerColor } from "../../NotificationBanner/NotificationBanner";
+interface ConfirmationDialogTexts {
+    message: string | string[];
+    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 {
+    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/components/Container/FlexColumn.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { 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: React.FC<FlexContainerProps>;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { 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: React.FC<FlexContainerBaseProps & {
+    type: "column" | "row";
+}>;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { 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: React.FC<FlexContainerProps>;

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

@@ -0,0 +1,26 @@
+import React 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: React.ReactNode;
+};
+export type FlexContainerProps = Omit<FlexContainerBaseProps, "verticalSpacing" | "horizontalSpacing"> & {
+    spacing?: Spacing;
+};
+export {};

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type DividerProps = React.ComponentPropsWithoutRef<"div"> & {
+    dark?: boolean;
+};
+export declare const Divider: React.FC<DividerProps>;
+export {};

package/dist/components/DragHandle/DragHandle.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const DragHandle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & {
+    grabbing: boolean;
+    disabled?: boolean | undefined;
+    dataTestId?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default DragHandle;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type DragHandleProps = React.HTMLAttributes<HTMLButtonElement> & {
+    grabbing: boolean;
+    disabled?: boolean;
+    dataTestId?: string;
+};

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

@@ -0,0 +1,2 @@
+export { default } from "./DragHandle";
+export type { DragHandleProps } from "./DragHandle.types";

package/dist/components/Dropzone/Dropzone.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import "./Dropzone.scss";
+import type { DropzoneProps, DropzonePresentationProps } from "./Dropzone.types";
+export declare const DropzonePresentation: React.FC<DropzonePresentationProps>;
+export declare const Dropzone: React.FC<DropzoneProps>;
+export default Dropzone;

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

@@ -0,0 +1,33 @@
+import { ReactNode, Ref } from "react";
+import type { IconKey } from "../Icons/types/IconProps.type";
+export type DropzonePresentationProps = {
+    /**
+     * Message shown to the user hinting how to use the component
+     * Usually something like "Click or Drag"
+     */
+    message?: string;
+    /**
+     * @deprecated
+     * Dropzones no longer support icons
+     */
+    icon?: IconKey;
+    isHighlighted?: boolean;
+    isClickable?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    className?: string;
+    dataTestId?: string;
+    /**
+     * @deprecated
+     * use alignMessage instead
+     */
+    horizontal?: boolean;
+    alignMessage?: "left" | "center";
+};
+export type DropzoneProps = Omit<DropzonePresentationProps, "isHighlighted" | "isClickable"> & {
+    draggableIdentifier: string | number;
+    disabled?: boolean;
+    data?: Record<string, unknown>;
+    dataTestId?: string;
+    onClick?: React.HTMLAttributes<HTMLButtonElement>["onClick"];
+};

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

@@ -0,0 +1,2 @@
+export { Dropzone, DropzonePresentation } from "./Dropzone";
+export type { DropzoneProps } from "./Dropzone.types";

package/dist/components/EmptyListMessage/EmptyListMessage.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+declare const imageSrc: {
+    "no-open-alerts": string;
+    "search-not-found": string;
+    "no-notes-found": string;
+};
+interface EmptyListMessageProps {
+    text: string;
+    imageName?: keyof typeof imageSrc;
+    dataTestId?: string;
+    className?: string;
+}
+export declare const EmptyListMessage: ({ text, imageName, dataTestId, className, }: EmptyListMessageProps) => JSX.Element;
+export {};

package/dist/components/FilterBar/ActiveFilters.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { CategorizedFilters, FilterBarLocalization, OnFilterBarFilterChange } from "./FilterBarProps.type";
+type ActiveFiltersProps = {
+    filters: CategorizedFilters;
+    onRemoveActiveFilter: OnFilterBarFilterChange;
+    localization: Pick<FilterBarLocalization, "filtersLabel">;
+};
+export declare const ActiveFilters: React.FC<ActiveFiltersProps>;
+export {};

package/dist/components/FilterBar/FilterBar.d.ts

@@ -0,0 +1,96 @@
+import { ReactElement } from "react";
+import { CategorizedFilters, FilterBarLocalization, TransformedSortingOptions } from "./FilterBarProps.type";
+type FilterBarProps<SortableEntity extends object> = {
+    /**
+     * A list of grouped filters to be displayed in the FilterBar.
+     *
+     * This is an array with items shaped as:
+     * ```ts
+     * type CategorizedFilter = {
+     *    key: string;
+     *    label: string;
+     *    options: TransformedFilterOptions;
+     * }
+     * ```
+     *
+     * You can choose to manually create this option or use the `getFilterGroups` helper function that will do the same
+     * for you based on your data.
+     *
+     * @example
+     *
+     * If you decided to use the `getFilterGroups` function:
+     *
+     *
+     * ```ts
+     * const items = []; // any list of object you are working with
+     *
+     * // the list of filter generators, the `filterValuePredicate` will be the displayed
+     * // value in the filter dropdown, so you can map and transform it to any custom string if necessary, or use
+     * // the value from the object entry
+     *
+     * const filterGenerators: FilterGenerator<TShirtFromApi>[] = [
+     *   {
+     *     id: "brand",
+     *     label: "Brand",
+     *     filterValuePredicate: (tshirt) => tshirt.brand,
+     *   },
+     *   {
+     *     id: "size",
+     *     label: "Size",
+     *     filterValuePredicate: (tshirt) => tshirt.size,
+     *   },
+     *   {
+     *     id: "color",
+     *     label: "Color",
+     *     filterValuePredicate: (tshirt) => tshirt.color,
+     *   },
+     * ];
+     *
+     * const categorizedFilters = getFilterGroups(items, filterGenerators);
+     * ```
+     *
+     *
+     * A compliant entry in the `categorizedFilters` has a shape like the object below:
+     *
+     *
+     * ```json
+     * {
+     *  "key": "color",
+     *  "label": "Color",
+     *  "options": [
+     *     {
+     *         "isChecked": false,
+     *         "id": "yellow",
+     *         "label": "yellow",
+     *         "value": "yellow"
+     *     },
+     *     {
+     *         "isChecked": false,
+     *         "id": "red",
+     *         "label": "red",
+     *         "value": "red"
+     *     },
+     *     {
+     *         "isChecked": false,
+     *         "id": "green",
+     *         "label": "green",
+     *         "value": "green"
+     *     }
+     *   ]
+     * }
+     *```
+     */
+    categorizedFilters: CategorizedFilters;
+    /**
+     * For more details, see {@link TransformedSortingOptions}.
+     */
+    sortingOptions: TransformedSortingOptions<SortableEntity>;
+    onFilterChange: (updatedFilters: CategorizedFilters) => void;
+    onSortingChange: (updatedSortingOptions: TransformedSortingOptions<SortableEntity>) => void;
+    /**
+     * See {@link FilterBarLocalization}.
+     */
+    localization: FilterBarLocalization;
+};
+export declare const FilterBar: <SortableEntity extends object>({ localization, categorizedFilters, sortingOptions, ...props }: FilterBarProps<SortableEntity>) => ReactElement | null;
+export {};