@luscii-healthtech/web-ui 0.0.0-alpha.caf5372 → 0.0.0-alpha.ccdf511

package/README.md

@@ -1,109 +1,113 @@
-# web-ui
+# WebUI
 
-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.
+The `web-ui` repository contains the UI components for Luscii's frontend projects. It is published to NPM for usage into our projects. It uses Storybook and is published to Chromatic for easy review and tracking of visual changes.
 
-## Running locally
+## Table of contents
 
-If you want to run storybook locally you can use
+- 🚀 [Getting started](#getting-started)
+  - 📖 [Fonts](#fonts)
+- 📦 [How to use](#how-to-use)
+- 🤝 [Contributing](#contributing)
 
-```bash
-yarn install
-yarn storybook
-```
-
-## Testing your production build
+## Getting started
 
-Assuming the following setup:
+To use WebUI, you need to add it as a dependency to your project:
 
-- 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
+```bash
+yarn add @luscii-healthtech/web-ui
 ```
 
-Or use the shortcut:
+Then you can use components like this:
 
-```
-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
+```tsx
+import { Text } from "@luscii-healthtech/web-ui";
 
+function MyComponent() {
+  return <Text>Some beautiful text from WebUI!</Text>;
+}
 ```
-/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
+### Fonts
+
+WebUI uses the Avenir Next LT Pro font family for some headings. If you want to use these, you need to make them available in your project. You can do this by declaring the following `@font-face` rules in your CSS:
+
+```css
+@font-face {
+  font-family: "AvenirNextLTPro-Regular";
+  src:
+    url("./<regular-font-file>.eot") format("embedded-opentype"),
+    url("./<regular-font-file>.woff2") format("woff2"),
+    url("./<regular-font-file>.woff") format("woff"),
+    url("./<regular-font-file>.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "AvenirNextLTPro-Bold";
+  src:
+    url("./<bold-font-file>.eot") format("embedded-opentype"),
+    url("./<bold-font-file>.woff2") format("woff2"),
+    url("./<bold-font-file>.woff") format("woff"),
+    url("./<bold-font-file>.ttf") format("truetype");
+}
 ```
 
-### Adding icons
+The `font-family` property value is important, as this is what WebUI is referencing to use the font. The `src` property values should point to the font files you want to use.
 
-Add new icons by:
+If you don't declare these `@font-face` rules, the font will not be available and the headings will gracefully fall back to next available font in your application.
 
-- Add the svg file(s) in `src/components/Icons/icons`
-- Run `yarn icons`
+## How to use
 
-The icons are optimized by SVGO and transformed into React components by [SVGR](https://react-svgr.com) which are placed in `src/components/Icons`.
+The primary goal of WebUI is to make frontend development faster. It does this by providing a set of commonly used components that can be composed together to build user interfaces.  
+WebUI aims to have every component well documented, both in the code and in Storybook. You can find all available components and documentation on how to
+use them at [design.luscii.com](https://design.luscii.com/).
 
-## CI setup
+### Example scenario
 
-#### Branching
+Say you're tasked with building a UI that contains a card. This card has a title, a subtitle, some body text and a button. You could build this UI by writing the following code:
 
-The `main` branch is our default branch. When you contribute, branch from there and name your branch
+```tsx
+import { Card, Text, Button } from "@luscii-healthtech/web-ui";
 
+function MyComponent() {
+  return (
+    <div className="my-layout">
+      <Card>
+        <Card.Title>Heart program</Card.Title>
+        <Card.Subtitle>79 participants</Card.Subtitle>
+        <Card.Text>Some description of how great this program is.</Card.Text>
+        <Card.Button>View program</Card.Button>
+      </Card>
+    </div>
+  );
+}
 ```
-  //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
-```
+Often times WebUI will provide a component that is a composition of other components. In this case, the `Card` component is a composition of `Card.Title`, `Card.Subtitle`, `Card.Text` and `Card.Button`. This allows you to build UIs faster, as you don't have to think about where to get a certain component. You can just use `Card` and its subcomponents and everything will be styled correctly.
 
-We have configured at lot of magic for your convenience.
+## Frequently asked questions
 
-#### On every PR
+<details>
+<summary>The feature I'm building needs a component from WebUI that doesn't exist.</summary>
 
-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
+Please get in touch with the design system circle by sending us a message in the [#design-system-circle channel](https://luscii.slack.com/archives/C03507ZKRCY). We'll discuss your needs and see what would be the best way to move forward.
 
-#### On merge to main
+</details>
 
-1. Draft a github release
-2. Version bump of the package
-3. Publish new package to NPM
+<details>
+<summary>The component I'm using doesn't have the props/subcomponents to build my feature.</summary>
 
----
+In most cases you can build the UI you need by composing the components that are available. If for instance `Card.Text` doesn't exist, go "one level up" and find the component that is closest to what you need. In this case, you can use the `Text` component and configure it with the correct props to match the design.
 
-## IE11
+In case the component is missing a prop that you need, please get in touch with the design system circle by sending us a message in the [#design-system-circle channel](https://luscii.slack.com/archives/C03507ZKRCY). We'll discuss your needs and see what would be the best way to move forward.
 
-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.
+</details>
 
-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)
+## Contributing
 
-Optional:
+Great to have you help making WebUI better! We have a few guidelines and tips
+to make sure we can keep the library consistent and easy to use. You can find
+them in our [contributing guide](CONTRIBUTING.md).
 
-- [web-animations-js](https://www.npmjs.com/package/web-animations-js)
+### Reporting bugs
 
-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.
+If you find a bug, please report it by sending us a message in the [#design-system-circle channel](https://luscii.slack.com/archives/C03507ZKRCY). It helps us a lot knowing of anything that is not working as expected.

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

@@ -1,11 +1,15 @@
-import p from "react";
-declare const I: ({ dataTestId: a, isCollapsedByDefault: o, items: r, className: i }: {
-    dataTestId: any;
-    isCollapsedByDefault?: boolean | undefined;
-    items: any;
-    className: any;
-}) => p.DetailedReactHTMLElement<{
-    "data-test-id": any;
-    className: any;
-}, HTMLElement>;
-export default I;
+import React from "react";
+import { AccordionItemProps } from "./AccordionItem";
+export interface AccordionProps {
+    dataTestId?: string;
+    items: AccordionItemProps[];
+    className?: string;
+    isCollapsedByDefault?: boolean;
+    /**
+     * A section at the bottom of the accordion that is
+     * always visible, even when the accordion is closed.
+     */
+    footer?: React.ReactNode;
+}
+declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

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

@@ -1,10 +1,17 @@
-import e from "react";
-export declare const AccordionItem: ({ id: t, title: s, content: i, isCollapsedByDefault: l }: {
-    id: any;
-    title: any;
-    content: any;
-    isCollapsedByDefault?: boolean | undefined;
-}) => e.DetailedReactHTMLElement<{
-    className: string;
-    "data-test-id": any;
-}, HTMLElement>;
+import React from "react";
+export interface AccordionItemProps {
+    id: string | number;
+    title: React.ReactNode;
+    content: React.ReactNode;
+    className?: string;
+    isCollapsedByDefault?: boolean;
+    /**
+     * Called when the accordion item opens.
+     */
+    onOpened?: () => void;
+    /**
+     * Called when the accordion item closes.
+     */
+    onClosed?: () => void;
+}
+export declare const AccordionItem: React.FC<AccordionItemProps>;

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

@@ -1,5 +1,45 @@
-import n from "react";
-export declare const AccordionList: (z: any) => n.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
-export default AccordionList;
+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, "title" | "content"> & {
+    listItems: T[];
+    draggableListType?: "default";
+    title: string;
+};
+export type DraggableAccordionListItemProps = Omit<AccordionItemProps, "title" | "content"> & {
+    draggableListType: "draggable";
+    listItems: DraggableListProps["items"];
+    title: string;
+};
+export type SortableAccordionListItemProps = Omit<AccordionItemProps, "title" | "content"> & {
+    draggableListType: "sortable";
+    draggableIdentifier: string;
+    listItems: SortableListProps["items"];
+    title: string;
+};
+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/Avatar/Avatar.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+type AvatarSize = "large" | "medium" | "small";
+type Props = {
+    initials: string;
+    src?: string;
+    /**
+     * Put the name of the person here, so less sighted
+     * users can know who the avatar belongs to.
+     *
+     * In case of rendering the default image or the
+     * initials, this will also be used as the `alt` text.
+     */
+    alt?: string;
+    size?: AvatarSize;
+    /**
+     * URL to an image to be used as the default image.
+     * If this is set, the image provided via `src` will never render.
+     */
+    defaultImage?: string;
+    className?: string;
+};
+export declare const Avatar: ({ size, src, alt, defaultImage, initials, className, }: Props) => React.JSX.Element;
+export {};

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

@@ -1,5 +1,7 @@
-import s from "react";
-declare const o: (e: any) => s.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
-export default o;
+/// <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

@@ -1,13 +1,7 @@
-import o from "react";
-export declare const BaseList: o.ForwardRefExoticComponent<{
-    dataTestId: any;
-    title: any;
-    headerButton: any;
-    emptyStateMessage: any;
-    isLoading: any;
-    items: any;
-    headerTransparent: any;
-    itemComponent: any;
-    footer: any;
-    withBorder?: boolean | undefined;
-} & o.RefAttributes<unknown>>;
+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

@@ -1,55 +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;
+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

@@ -1,9 +1,7 @@
-import e from "react";
-export declare const BaseListEmptyState: ({ message: t, roundTop: o, withBorder: r }: {
-    message: any;
-    roundTop: any;
-    withBorder: any;
-}) => e.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
-export default BaseListEmptyState;
+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

@@ -1,11 +1,4 @@
-import p from "react";
-export declare const BaseListHeader: ({ title: s, button: e, transparent: r, withBorder: o }: {
-    title: any;
-    button: any;
-    transparent: any;
-    withBorder: any;
-}) => p.DetailedReactHTMLElement<{
-    "data-test-id": string;
-    className: string;
-}, HTMLElement>;
-export default BaseListHeader;
+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

@@ -1,7 +1,5 @@
-import o from "react";
-export declare const BaseListIcon: ({ icon: t, onAssetLoadError: e }: {
-    icon: any;
-    onAssetLoadError: any;
-}) => o.FunctionComponentElement<{
-    children?: o.ReactNode;
-}>;
+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

@@ -1,3 +1,4 @@
-import s from "react";
-export declare const BaseListItem: s.ForwardRefExoticComponent<s.RefAttributes<unknown>>;
-export default BaseListItem;
+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

@@ -1,14 +1,4 @@
-import b from "react";
-export declare const DraggableBaseList: (r: any) => b.FunctionComponentElement<{
-    dataTestId: any;
-    title: any;
-    headerButton: any;
-    emptyStateMessage: any;
-    isLoading: any;
-    items: any;
-    headerTransparent: any;
-    itemComponent: any;
-    footer: any;
-    withBorder?: boolean | undefined;
-} & b.RefAttributes<unknown>>;
-export default DraggableBaseList;
+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

@@ -1,2 +1,3 @@
-import d from "react";
-export declare const DraggableBaseListItem: (r: any) => d.FunctionComponentElement<d.RefAttributes<unknown>>;
+import React from "react";
+import { DraggableBaseListItemProps } from "../BaseList.types";
+export declare const DraggableBaseListItem: React.FC<DraggableBaseListItemProps>;

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

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

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

@@ -1,4 +1,2 @@
-import e from "react";
-export declare const ListItemSkeleton: () => e.DetailedReactHTMLElement<{
-    className: string;
-}, HTMLElement>;
+/// <reference types="react" />
+export declare const ListItemSkeleton: () => JSX.Element;

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

@@ -1,9 +1,8 @@
-import e from "react";
-import "./ListSkeleton.scss";
-export declare const ListSkeleton: ({ items: t, dataTestId: s }: {
-    items: any;
-    dataTestId?: string | undefined;
-}) => e.DetailedReactHTMLElement<{
-    "data-test-id": string;
-    className: string;
-}, HTMLElement>;
+/// <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

@@ -1,3 +1,4 @@
-import f from "react";
-export declare const SortableBaseList: (o: any) => f.DetailedReactHTMLElement<f.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export default SortableBaseList;
+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

@@ -1,7 +1,3 @@
-import i from "react";
-export declare const SortableBaseListItem: (a: any) => i.FunctionComponentElement<i.RefAttributes<unknown>> | i.DetailedReactHTMLElement<{
-    style: {
-        transform: string | undefined;
-        position: "relative";
-    };
-}, HTMLElement>;
+import React from "react";
+import { SortableBaseListItemProps } from "../BaseList.types";
+export declare const SortableBaseListItem: React.FC<SortableBaseListItemProps>;

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

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