@os-design/core 1.0.254 → 1.0.256

package/dist/List/index.js

@@ -0,0 +1,111 @@
+import { useIsMinWidth } from '@os-design/media';
+import { useTheme } from '@os-design/theming';
+import { useFontSize, useForwardedRef, useSafeAreaInset, useSize } from '@os-design/utils';
+import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
+import { FixedSizeList } from 'react-window';
+import LayoutContext from '../Layout/LayoutContext';
+import WindowScroller from './WindowScroller';
+import useRWLoadNext from './utils/useRWLoadNext';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Virtualized list.
+ * Used the react-window library.
+ */
+const List = /*#__PURE__*/forwardRef(({
+  itemCount,
+  itemHeight = 4,
+  threshold = 10,
+  overscanCount = 10,
+  height: heightProp,
+  paddingTop = 0,
+  paddingBottom = 0,
+  style = {},
+  empty,
+  onLoadNext = () => {},
+  itemRenderer = () => null,
+  ...rest
+}, ref) => {
+  const [listRef, mergedListRef] = useForwardedRef(ref);
+  const size = useSize();
+  const fontSize = useFontSize(document.body);
+  const {
+    hasNavigation,
+    hasPageHeader
+  } = useContext(LayoutContext);
+  const {
+    theme
+  } = useTheme();
+  const isMinMd = useIsMinWidth('md');
+  const safeAreaInset = useSafeAreaInset();
+  const itemSize = useMemo(() => itemHeight * fontSize, [itemHeight, fontSize]);
+  const paddingTopSize = useMemo(() => ((hasPageHeader ? theme.pageHeaderHeight[isMinMd ? 1 : 0] : 0) + paddingTop) * fontSize, [hasPageHeader, theme.pageHeaderHeight, isMinMd, paddingTop, fontSize]);
+  const paddingBottomSize = useMemo(() => ((hasNavigation && !isMinMd ? theme.navigationTabHeight : 0) + paddingBottom) * fontSize + safeAreaInset.bottom, [hasNavigation, theme.navigationTabHeight, isMinMd, paddingBottom, fontSize, safeAreaInset.bottom]);
+  const height = useMemo(() => heightProp || size.height, [heightProp, size.height]);
+  const loadNext = useRWLoadNext({
+    itemCount,
+    threshold,
+    itemSize,
+    paddingTop: paddingTopSize,
+    height,
+    onLoadNext
+  });
+  const windowScrollHandler = useCallback(({
+    top
+  }) => {
+    // Set the scroll position to the list
+    if (listRef.current) listRef.current.scrollTo(top);
+    loadNext(top);
+  }, [listRef, loadNext]);
+  const InnerElement = useCallback(({
+    style: innerStyle,
+    ...innerRest
+  }) => /*#__PURE__*/_jsx("div", {
+    style: {
+      ...innerStyle,
+      height: `${parseFloat(innerStyle.height) + paddingTopSize + paddingBottomSize}px`
+    },
+    ...innerRest
+  }), [paddingBottomSize, paddingTopSize]);
+  const listChildren = useCallback(({
+    style: childrenStyle,
+    ...childrenRest
+  }) => itemRenderer({
+    style: {
+      ...childrenStyle,
+      top: `${parseFloat(childrenStyle.top ? childrenStyle.top.toString() : '0') + paddingTopSize}px`
+    },
+    ...childrenRest
+  }), [itemRenderer, paddingTopSize]);
+  const EmptyComponent = useCallback(() => /*#__PURE__*/_jsx(_Fragment, {
+    children: empty
+  }), [empty]);
+  const renderList = useCallback(() => /*#__PURE__*/_jsx(FixedSizeList, {
+    ref: mergedListRef,
+    itemCount: itemCount,
+    width: "100%",
+    height: height,
+    itemSize: itemSize,
+    style: heightProp ? style : {
+      ...style,
+      height: '100% important!'
+    },
+    overscanCount: overscanCount,
+    onScroll: heightProp ? ({
+      scrollOffset
+    }) => loadNext(scrollOffset) : undefined,
+    innerElementType: itemCount > 0 ? InnerElement : EmptyComponent,
+    ...rest,
+    children: listChildren
+  }), [EmptyComponent, InnerElement, height, heightProp, itemCount, itemSize, listChildren, loadNext, mergedListRef, overscanCount, rest, style]);
+  if (heightProp) {
+    return renderList();
+  }
+  return /*#__PURE__*/_jsx(WindowScroller, {
+    onScroll: windowScrollHandler,
+    children: renderList()
+  });
+});
+List.displayName = 'List';
+export { default as WindowScroller } from './WindowScroller';
+export { default as useRWLoadNext } from './utils/useRWLoadNext';
+export default List;

package/dist/List/utils/bodyPointerEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bodyPointerEvents.d.ts","sourceRoot":"","sources":["../../../src/List/utils/bodyPointerEvents.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,wBAAwB,QAAO,IAK3C,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAO,IAM1C,CAAC;AAEF,eAAO,MAAM,iCAAiC,UAAW,MAAM,KAAG,IAGjE,CAAC"}

package/dist/List/utils/bodyPointerEvents.js

@@ -0,0 +1,20 @@
+import { clearFrameTimeout, setFrameTimeout } from './frameTimeout';
+let originalBodyPointerEvents = null;
+let timeoutId = null;
+export const disableBodyPointerEvents = () => {
+  if (originalBodyPointerEvents === null) {
+    originalBodyPointerEvents = document.body.style.pointerEvents;
+    document.body.style.pointerEvents = 'none';
+  }
+};
+export const enableBodyPointerEvents = () => {
+  timeoutId = null;
+  if (originalBodyPointerEvents !== null) {
+    document.body.style.pointerEvents = originalBodyPointerEvents;
+    originalBodyPointerEvents = null;
+  }
+};
+export const enableBodyPointerEventsAfterDelay = delay => {
+  if (timeoutId) clearFrameTimeout(timeoutId);
+  timeoutId = setFrameTimeout(enableBodyPointerEvents, delay);
+};

package/dist/List/utils/frameTimeout.d.ts

@@ -0,0 +1,12 @@
+export interface Frame {
+    id: number;
+}
+/**
+ * Cancels a timeout previously created by setFrameTimeout.
+ */
+export declare const clearFrameTimeout: (frame: Frame) => void;
+/**
+ * Sets a timeout using requestAnimationFrame.
+ */
+export declare const setFrameTimeout: (handler: () => void, timeout: number) => Frame;
+//# sourceMappingURL=frameTimeout.d.ts.map

package/dist/List/utils/frameTimeout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frameTimeout.d.ts","sourceRoot":"","sources":["../../../src/List/utils/frameTimeout.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,KAAK,KAAG,IAEhD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,YACjB,MAAM,IAAI,WACV,MAAM,KACd,KAkBF,CAAC"}

package/dist/List/utils/frameTimeout.js

@@ -0,0 +1,28 @@
+/**
+ * Cancels a timeout previously created by setFrameTimeout.
+ */
+export const clearFrameTimeout = frame => {
+  window.cancelAnimationFrame(frame.id);
+};
+
+/**
+ * Sets a timeout using requestAnimationFrame.
+ */
+export const setFrameTimeout = (handler, timeout) => {
+  let start = 0;
+  const frame = {
+    id: 0
+  };
+  const frameRequestCallback = timestamp => {
+    if (!start) start = timestamp;
+    const timePassed = timestamp - start;
+    if (timePassed >= timeout) {
+      clearFrameTimeout(frame);
+      handler();
+    } else {
+      frame.id = window.requestAnimationFrame(frameRequestCallback);
+    }
+  };
+  frame.id = window.requestAnimationFrame(frameRequestCallback);
+  return frame;
+};

package/dist/List/utils/useRWLoadNext.d.ts

@@ -0,0 +1,16 @@
+interface UseRWLoadNextProps {
+    itemCount: number;
+    threshold: number;
+    itemSize: number;
+    paddingTop: number;
+    height: number;
+    onLoadNext: () => void;
+}
+type OnScroll = (scrollOffset: number) => void;
+/**
+ * Creates the onScroll callback for react-window to implement
+ * the onLoadNext function.
+ */
+declare const useRWLoadNext: (props: UseRWLoadNextProps) => OnScroll;
+export default useRWLoadNext;
+//# sourceMappingURL=useRWLoadNext.d.ts.map

package/dist/List/utils/useRWLoadNext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRWLoadNext.d.ts","sourceRoot":"","sources":["../../../src/List/utils/useRWLoadNext.ts"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,KAAK,QAAQ,GAAG,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;AAE/C;;;GAGG;AACH,QAAA,MAAM,aAAa,UAAW,kBAAkB,KAAG,QAkBlD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/List/utils/useRWLoadNext.js

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * Creates the onScroll callback for react-window to implement
+ * the onLoadNext function.
+ */
+const useRWLoadNext = props => {
+  const propsRef = useRef(props);
+  useEffect(() => {
+    propsRef.current = props;
+  }, [props]);
+  return useCallback(scrollOffset => {
+    const {
+      itemCount,
+      threshold,
+      itemSize,
+      paddingTop,
+      height,
+      onLoadNext
+    } = propsRef.current;
+    const maxItemBeforeLoad = itemCount - threshold;
+    const maxScrollOffsetBeforeLoad = maxItemBeforeLoad * itemSize + paddingTop - height;
+    if (scrollOffset < maxScrollOffsetBeforeLoad) return;
+    onLoadNext();
+  }, []);
+};
+export default useRWLoadNext;

package/dist/ListItem/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type ListItemActionsProps } from '../ListItemActions';
+export interface ListItemProps extends ListItemActionsProps {
+    /**
+     * The title of the item.
+     */
+    title?: string;
+    /**
+     * The description of the item.
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * The component located on the left side.
+     * For example, avatar, button, checkbox.
+     * @default undefined
+     */
+    left?: React.ReactNode;
+    /**
+     * The component located on the right side.
+     * For example, date.
+     */
+    right?: React.ReactNode;
+}
+/**
+ * The base list item.
+ */
+declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLDivElement>>;
+export default ListItem;
+//# sourceMappingURL=index.d.ts.map

package/dist/ListItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ListItem/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAwB,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACzD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AA4CD;;GAEG;AACH,QAAA,MAAM,QAAQ,sFAeb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/ListItem/index.js

@@ -0,0 +1,70 @@
+import styled from '@emotion/styled';
+import { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import React, { forwardRef } from 'react';
+import ListItemActions from '../ListItemActions';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = styled(ListItemActions)`
+  box-sizing: border-box;
+  min-height: 4em;
+  overflow: hidden;
+
+  display: flex;
+  align-items: center;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${p => clr(p.theme.listItemColorBorder)};
+  }
+
+  ${horizontalPaddingStyles()};
+`;
+const Content = styled.div`
+  overflow: hidden;
+`;
+const Title = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  font-weight: 500;
+  ${ellipsisStyles};
+`;
+const Description = styled.div`
+  color: ${p => clr(p.theme.listItemColorDescription)};
+  font-size: ${p => p.theme.sizes.small}em;
+  ${ellipsisStyles};
+`;
+const LeftAddon = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  padding-right: ${p => p.theme.listItemAddonPaddingHorizontal}em;
+`;
+const RightAddon = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  margin-left: auto;
+  padding-left: ${p => p.theme.listItemAddonPaddingHorizontal}em;
+`;
+
+/**
+ * The base list item.
+ */
+const ListItem = /*#__PURE__*/forwardRef(({
+  title,
+  description,
+  left,
+  right,
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/_jsxs(Container, {
+  ...rest,
+  ref: ref,
+  children: [left && /*#__PURE__*/_jsx(LeftAddon, {
+    children: left
+  }), children || /*#__PURE__*/_jsxs(Content, {
+    children: [/*#__PURE__*/_jsx(Title, {
+      children: title
+    }), description && /*#__PURE__*/_jsx(Description, {
+      children: description
+    })]
+  }), right && /*#__PURE__*/_jsx(RightAddon, {
+    children: right
+  })]
+}));
+ListItem.displayName = 'ListItem';
+export default ListItem;

package/dist/ListItemActions/index.d.ts

@@ -0,0 +1,21 @@
+import { type WithSize } from '@os-design/styles';
+import React from 'react';
+import { type ButtonProps } from '../Button';
+export interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {
+    icon: React.ReactElement;
+}
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface ListItemActionsProps extends JsxDivProps, WithSize {
+    /**
+     * Buttons to control the item.
+     * For example, edit, delete.
+     * @default undefined
+     */
+    actions?: ListItemAction[];
+}
+/**
+ * Shows the menu in the list item.
+ */
+declare const ListItemActions: React.ForwardRefExoticComponent<ListItemActionsProps & React.RefAttributes<HTMLDivElement>>;
+export default ListItemActions;
+//# sourceMappingURL=index.d.ts.map

package/dist/ListItemActions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ListItemActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQhF,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IACxE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;CAC1B;AAED,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,oBAAqB,SAAQ,WAAW,EAAE,QAAQ;IACjE;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAqED;;GAEG;AACH,QAAA,MAAM,eAAe,6FAqGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/dist/ListItemActions/index.js

@@ -0,0 +1,135 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { sizeStyles, transitionStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { isTouchDevice, omitEmotionProps, useForwardedRef, useSwipe } from '@os-design/utils';
+import React, { forwardRef, useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import Button from '../Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = styled.div`
+  position: relative;
+  overflow: hidden;
+
+  @media (hover: hover) {
+    // Hide actions by default
+    & > nav {
+      opacity: 0;
+    }
+
+    // Display actions either on focus, or on hover
+    &:hover,
+    &:focus-within {
+      & > nav {
+        opacity: 1;
+      }
+    }
+  }
+`;
+const swipeableStyles = p => p.swipeable && css`
+    transform: translateX(100%);
+    ${transitionStyles('transform')(p)};
+  `;
+const openedStyles = p => p.opened && css`
+    transform: translateX(0);
+  `;
+const Actions = styled('nav', omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size'))`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  align-items: center;
+
+  padding-left: ${p => p.theme.listItemActionsPaddingLeft}em;
+  padding-right: ${p => p.paddingRight}px;
+
+  background: linear-gradient(
+    to right,
+    ${p => clr([...p.theme.colorBg.slice(0, 3), 0])},
+    ${p => clr(p.theme.colorBg)}
+      ${p => p.theme.listItemActionsPaddingLeft}em
+  );
+
+  ${swipeableStyles};
+  ${openedStyles};
+  ${sizeStyles}
+`;
+let actionIndex = 0;
+
+/**
+ * Shows the menu in the list item.
+ */
+const ListItemActions = /*#__PURE__*/forwardRef(({
+  actions = [],
+  onTouchStart = () => {},
+  onTouchMove = () => {},
+  onTouchEnd = () => {},
+  children,
+  size,
+  ...rest
+}, ref) => {
+  const [containerRef, mergedContainerRef] = useForwardedRef(ref);
+  const {
+    opened,
+    handlers
+  } = useSwipe();
+  const swipeable = useMemo(() => isTouchDevice(), []);
+  const touchStartHandler = useCallback(e => {
+    handlers.onTouchStart(e);
+    onTouchStart(e);
+  }, [handlers, onTouchStart]);
+  const touchMoveHandler = useCallback(e => {
+    handlers.onTouchMove(e);
+    onTouchMove(e);
+  }, [handlers, onTouchMove]);
+  const touchEndHandler = useCallback(e => {
+    handlers.onTouchEnd(e);
+    onTouchEnd(e);
+  }, [handlers, onTouchEnd]);
+  const [paddingRight, setPaddingRight] = useState(0);
+  useLayoutEffect(() => {
+    if (!containerRef.current) return;
+    const value = Number(window.getComputedStyle(containerRef.current).getPropertyValue('padding-right').replace('px', ''));
+    setPaddingRight(value);
+  }, [containerRef]);
+  const actionsComponent = useMemo(() => {
+    if (actions.length === 0) return null;
+    const items = actions.map(({
+      icon,
+      onClick = () => {},
+      ...actionRest
+    }) => {
+      actionIndex += 1;
+      return /*#__PURE__*/_jsx(Button, {
+        type: "ghost",
+        wide: "never",
+        size: size,
+        onClick: e => {
+          e.preventDefault();
+          e.stopPropagation();
+          onClick(e);
+        },
+        ...actionRest,
+        children: icon
+      }, actionIndex);
+    });
+    return /*#__PURE__*/_jsx(Actions, {
+      swipeable: swipeable,
+      opened: opened,
+      paddingRight: paddingRight,
+      size: size,
+      children: items
+    });
+  }, [actions, opened, paddingRight, size, swipeable]);
+  return /*#__PURE__*/_jsxs(Container, {
+    onTouchStart: touchStartHandler,
+    onTouchMove: touchMoveHandler,
+    onTouchEnd: touchEndHandler,
+    ...rest,
+    ref: mergedContainerRef,
+    children: [children, actionsComponent]
+  });
+});
+ListItemActions.displayName = 'ListItemActions';
+export default ListItemActions;

package/dist/ListItemLink/index.d.ts

@@ -0,0 +1,10 @@
+import type { LinkProps, ReactRouterLinkProps } from '../Link';
+import { type ListItemProps } from '../ListItem';
+type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+export type ListItemLinkProps = JsxAProps & ReactRouterLinkProps & Pick<LinkProps, 'as'> & ListItemProps;
+/**
+ * The list item with a link.
+ */
+declare const ListItemLink: import("react").ForwardRefExoticComponent<JsxAProps & ReactRouterLinkProps & Pick<LinkProps, "as"> & ListItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export default ListItemLink;
+//# sourceMappingURL=index.d.ts.map

package/dist/ListItemLink/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ListItemLink/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GACvC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,aAAa,CAAC;AAgChB;;GAEG;AACH,QAAA,MAAM,YAAY,wKAcjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/ListItemLink/index.js

@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+import { resetFocusStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { forwardRef } from 'react';
+import ListItem from '../ListItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Link = styled.a`
+  ${resetFocusStyles};
+
+  cursor: pointer;
+  text-decoration: none;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid ${p => clr(p.theme.listItemColorBorder)};
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus-within {
+      & > div {
+        background-color: ${p => clr(p.theme.listItemColorBgHover)};
+
+        & > nav {
+          background: linear-gradient(
+            to right,
+            ${p => clr([...p.theme.listItemColorBgHover.slice(0, 3), 0])},
+            ${p => clr(p.theme.listItemColorBgHover)}
+              ${p => p.theme.listItemActionsPaddingLeft}em
+          );
+        }
+      }
+    }
+  }
+`;
+
+/**
+ * The list item with a link.
+ */
+const ListItemLink = /*#__PURE__*/forwardRef(({
+  title,
+  description,
+  left,
+  right,
+  actions,
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(Link, {
+  ...rest,
+  ref: ref,
+  children: /*#__PURE__*/_jsx(ListItem, {
+    title: title,
+    description: description,
+    left: left,
+    right: right,
+    actions: actions,
+    children: children
+  })
+}));
+ListItemLink.displayName = 'ListItemLink';
+export default ListItemLink;

package/dist/ListItemSkeleton/index.d.ts

@@ -0,0 +1,24 @@
+import { type ListItemProps } from '../ListItem';
+export interface ListItemSkeletonProps extends Omit<ListItemProps, 'title' | 'description' | 'actions'> {
+    /**
+     * The description placeholder.
+     * @default false
+     */
+    hasDescription?: boolean;
+    /**
+     * The width of the title.
+     * @default 30%
+     */
+    titleWidth?: string;
+    /**
+     * The width of the description.
+     * @default 40%
+     */
+    descriptionWidth?: string;
+}
+/**
+ * Provides a list item placeholder while a user waits for the content to load.
+ */
+declare const ListItemSkeleton: import("react").ForwardRefExoticComponent<ListItemSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ListItemSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/ListItemSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ListItemSkeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAG3D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,GAAG,aAAa,GAAG,SAAS,CAAC;IAChE;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAWD;;GAEG;AACH,QAAA,MAAM,gBAAgB,kHAoBrB,CAAC;AAIF,eAAe,gBAAgB,CAAC"}

package/dist/ListItemSkeleton/index.js

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+import { forwardRef } from 'react';
+import ListItem from '../ListItem';
+import Skeleton from '../Skeleton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Content = styled.div`
+  width: 100%;
+`;
+const DescriptionSkeleton = styled(Skeleton)`
+  height: ${p => p.theme.sizes.small}em;
+  margin-top: 0.3em;
+`;
+
+/**
+ * Provides a list item placeholder while a user waits for the content to load.
+ */
+const ListItemSkeleton = /*#__PURE__*/forwardRef(({
+  hasDescription = false,
+  titleWidth = '30%',
+  descriptionWidth = '40%',
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(ListItem, {
+  ...rest,
+  ref: ref,
+  children: children || /*#__PURE__*/_jsxs(Content, {
+    children: [/*#__PURE__*/_jsx(Skeleton, {
+      width: titleWidth
+    }), hasDescription && /*#__PURE__*/_jsx(DescriptionSkeleton, {
+      width: descriptionWidth
+    })]
+  })
+}));
+ListItemSkeleton.displayName = 'ListItemSkeleton';
+export default ListItemSkeleton;

package/dist/ListSkeleton/index.d.ts

@@ -0,0 +1,16 @@
+import { FixedSizeList } from 'react-window';
+import { type ListProps } from '../List';
+import { type ListItemSkeletonProps } from '../ListItemSkeleton';
+export interface ListSkeletonProps extends Omit<ListProps, 'itemCount' | 'itemRenderer' | 'children'>, Pick<ListItemSkeletonProps, 'hasDescription' | 'titleWidth' | 'descriptionWidth' | 'left' | 'right' | 'children'> {
+    /**
+     * Total count of items.
+     * @default 10
+     */
+    itemCount?: number;
+}
+/**
+ * Provides a list placeholder while a user waits for the content to load.
+ */
+declare const ListSkeleton: import("react").ForwardRefExoticComponent<ListSkeletonProps & import("react").RefAttributes<FixedSizeList<any>>>;
+export default ListSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/ListSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ListSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAyB,EACvB,KAAK,qBAAqB,EAC3B,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,cAAc,GAAG,UAAU,CAAC,EAChE,IAAI,CACF,qBAAqB,EACnB,gBAAgB,GAChB,YAAY,GACZ,kBAAkB,GAClB,MAAM,GACN,OAAO,GACP,UAAU,CACb;IACH;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,QAAA,MAAM,YAAY,kHAuCjB,CAAC;AAIF,eAAe,YAAY,CAAC"}