@veracity/vui 0.3.1 → 0.4.0

package/link/link.js

@@ -50,27 +50,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = exports.LinkBase = void 0;
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 var linkIcon_1 = __importDefault(require("./linkIcon"));
 var linkText_1 = __importDefault(require("./linkText"));
-var core_1 = require("../core");
-var system_1 = require("../system");
-var utils_1 = require("../utils");
-exports.LinkBase = styled_components_1.default.a.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\toutline: none;\n\ttext-decoration: none;\n\twidth: fit-content;\n\n\t", "\n"])), system_1.system);
+exports.LinkBase = core_1.styled.aBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tborder-radius: sm;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\toutline: none;\n\ttext-decoration: none;\n\ttransition-duration: instant;\n\twidth: fit-content;\n"], ["\n\talign-items: center;\n\tborder-radius: sm;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\tline-height: normal;\n\toutline: none;\n\ttext-decoration: none;\n\ttransition-duration: instant;\n\twidth: fit-content;\n"
+    /**
+     * Displays a link item. Handles different underline scenarios and opening external links in new tab.
+     * Exposes some props to the children via context.
+     */
+])));
+/**
+ * Displays a link item. Handles different underline scenarios and opening external links in new tab.
+ * Exposes some props to the children via context.
+ */
 exports.Link = (0, core_1.vui)(function (props, ref) {
-    var children = props.children, className = props.className, colorScheme = props.colorScheme, decoration = props.decoration, disabled = props.disabled, _a = props.hoverDecoration, hoverDecoration = _a === void 0 ? 'underline' : _a, iconLeft = props.iconLeft, iconRight = props.iconRight, isExternal = props.isExternal, isUnderlined = props.isUnderlined, size = props.size, text = props.text, variant = props.variant, weight = props.weight, rest = __rest(props, ["children", "className", "colorScheme", "decoration", "disabled", "hoverDecoration", "iconLeft", "iconRight", "isExternal", "isUnderlined", "size", "text", "variant", "weight"]);
+    var children = props.children, className = props.className, colorScheme = props.colorScheme, decoration = props.decoration, _a = props.hoverDecoration, hoverDecoration = _a === void 0 ? 'underline' : _a, iconLeft = props.iconLeft, iconRight = props.iconRight, isExternal = props.isExternal, isUnderlined = props.isUnderlined, size = props.size, text = props.text, variant = props.variant, weight = props.weight, rest = __rest(props, ["children", "className", "colorScheme", "decoration", "hoverDecoration", "iconLeft", "iconRight", "isExternal", "isUnderlined", "size", "text", "variant", "weight"]);
     var styles = (0, core_1.useStyleConfig)('Link', props);
-    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, disabled: disabled, size: size, variant: variant }); }, [colorScheme, disabled, size, variant]);
+    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, size: size, variant: variant }); }, [colorScheme, size, variant]);
     var aliasedProps = (0, utils_1.filterUndefined)({
         fontWeight: weight,
-        hoverTextDecoration: hoverDecoration,
         rel: isExternal ? 'noopener' : undefined,
         target: isExternal ? '_blank' : undefined,
         textDecoration: decoration !== null && decoration !== void 0 ? decoration : (isUnderlined ? 'underline' : undefined)
     });
     return (react_1.default.createElement(context_1.LinkProvider, { value: context },
-        react_1.default.createElement(exports.LinkBase, __assign({ borderRadius: "sm", className: (0, utils_1.cs)('vui-link', className), focusRing: 2, ref: ref, transitionDuration: "instant" }, styles.container, aliasedProps, rest),
+        react_1.default.createElement(exports.LinkBase, __assign({ className: (0, utils_1.cs)('vui-link', className), focusRing: 2, hoverTextDecoration: hoverDecoration, ref: ref }, styles.container, aliasedProps, rest),
             (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(linkIcon_1.default, { mr: 1, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(linkText_1.default, { text: text }) : text),
             (0, utils_1.isString)(iconRight) ? react_1.default.createElement(linkIcon_1.default, { ml: 1, name: iconRight }) : iconRight)));
 });

package/link/link.types.d.ts

@@ -1,16 +1,24 @@
+/// <reference types="react" />
 import { IconProp } from '../icon';
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
-export interface LinkProps extends SystemProps, ThemingProps<'Link'> {
+export declare type LinkProps = SystemProps & ThemingProps<'Link'> & {
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'white';
+    /** Alias for textDecoration prop. @deprecated */
     decoration?: TypographyProps['textDecoration'];
-    disabled?: boolean;
+    /** Alias for hoverTextDecoration prop. @deprecated */
     hoverDecoration?: TypographyProps['textDecoration'];
-    iconLeft?: IconProp | AnyElement;
-    iconRight?: IconProp | AnyElement;
+    /** Socket displaying an icon on the left. */
+    iconLeft?: IconProp | JSX.Element;
+    /** Socket displaying an icon on the right. */
+    iconRight?: IconProp | JSX.Element;
+    /** Opens the link in new tab with appropriate attributes. */
     isExternal?: boolean;
+    /** Displays permanent underline. */
     isUnderlined?: boolean;
-    text?: number | string;
+    /** Socket displaying text within the Link. */
+    text?: number | string | JSX.Element;
+    /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight'];
-}
+};

package/link/linkIcon.d.ts

@@ -1,3 +1,4 @@
 import { IconProps } from '../icon';
+/** Displays an icon within the Link. */
 export declare const LinkIcon: import("../core").VuiComponent<"svg", IconProps>;
 export default LinkIcon;

package/link/linkIcon.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkIcon = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var context_1 = require("./context");
+/** Displays an icon within the Link. */
 exports.LinkIcon = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var linkProps = (_a = (0, context_1.useLink)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, linkProps), props);
-    var styles = (0, core_1.useStyleConfig)('Link', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Link', __assign(__assign({}, (0, context_1.useLink)()), props));
     return react_1.default.createElement(icon_1.default, __assign({ className: "vui-linkIcon", ref: ref }, styles.icon, props));
 });
 exports.LinkIcon.displayName = 'LinkIcon';

package/link/linkText.d.ts

@@ -1,3 +1,4 @@
 import { TProps } from '../t';
+/** Displays text of the Link. */
 export declare const LinkText: import("../core").VuiComponent<"span", TProps>;
 export default LinkText;

package/link/linkText.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkText = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Displays text of the Link. */
 exports.LinkText = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var linkProps = (_a = (0, context_1.useLink)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, linkProps), props);
-    var styles = (0, core_1.useStyleConfig)('Link', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Link', __assign(__assign({}, (0, context_1.useLink)()), props));
     return react_1.default.createElement(t_1.default, __assign({ className: "vui-linkText", fontSize: "inherit", ref: ref }, styles.text, props));
 });
 exports.LinkText.displayName = 'LinkText';

package/link/theme.d.ts

@@ -12,6 +12,7 @@ declare function variantLight(props: Dict): {
     };
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         size: string;
@@ -47,6 +48,11 @@ declare const _default: {
     variants: {
         default: typeof variantDefault;
         light: typeof variantLight;
+        plain: {
+            container: {
+                hoverTextDecoration: string;
+            };
+        };
     };
 };
 export default _default;

package/link/theme.js

@@ -20,6 +20,12 @@ function variantLight(props) {
     };
     return { container: container };
 }
+var variantPlain = {
+    container: {
+        hoverTextDecoration: 'none'
+    }
+};
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
@@ -54,9 +60,11 @@ var sizes = {
 };
 var variants = {
     default: variantDefault,
-    light: variantLight
+    light: variantLight,
+    plain: variantPlain
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/list/index.d.ts

@@ -1,9 +1,9 @@
 export * from './context';
 export * from './list';
+export { default } from './list';
 export * from './list.types';
 export * from './listDivider';
 export * from './listHeading';
 export * from './listIcon';
 export * from './listItem';
 export * from './listText';
-export { default } from './list';

package/list/index.js

@@ -16,11 +16,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./context"), exports);
 __exportStar(require("./list"), exports);
+var list_1 = require("./list");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(list_1).default; } });
 __exportStar(require("./list.types"), exports);
 __exportStar(require("./listDivider"), exports);
 __exportStar(require("./listHeading"), exports);
 __exportStar(require("./listIcon"), exports);
 __exportStar(require("./listItem"), exports);
 __exportStar(require("./listText"), exports);
-var list_1 = require("./list");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(list_1).default; } });

package/list/list.d.ts

@@ -1,12 +1,12 @@
+import { VuiComponent } from '../core';
 import { ListProps } from './list.types';
 import ListDivider from './listDivider';
 import ListHeading from './listHeading';
 import ListIcon from './listIcon';
 import ListItem from './listItem';
 import ListText from './listText';
-import { VuiComponent } from '../core';
-import { SystemProps } from '../system';
-export declare const ListBase: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const ListBase: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
 export declare const List: VuiComponent<"ul", ListProps> & {
     Divider: typeof ListDivider;
     Heading: typeof ListHeading;

package/list/list.js

@@ -50,25 +50,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = exports.ListBase = void 0;
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 var listDivider_1 = __importDefault(require("./listDivider"));
 var listHeading_1 = __importDefault(require("./listHeading"));
 var listIcon_1 = __importDefault(require("./listIcon"));
 var listItem_1 = __importDefault(require("./listItem"));
 var listText_1 = __importDefault(require("./listText"));
-var core_1 = require("../core");
-var system_1 = require("../system");
-var utils_1 = require("../utils");
-exports.ListBase = styled_components_1.default.ul.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.ListBase = core_1.styled.ulBox(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""
+    /** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
+])));
+/** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
 exports.List = (0, core_1.vui)(function (props, ref) {
-    var children = props.children, className = props.className, colorScheme = props.colorScheme, heading = props.heading, isInteractive = props.isInteractive, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "heading", "isInteractive", "size", "variant"]);
+    var children = props.children, className = props.className, colorScheme = props.colorScheme, heading = props.heading, isInteractive = props.isInteractive, items = props.items, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "colorScheme", "heading", "isInteractive", "items", "size", "variant"]);
     var styles = (0, core_1.useStyleConfig)('List', props);
     var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, isInteractive: isInteractive, size: size, variant: variant }); }, [colorScheme, isInteractive, size, variant]);
     return (react_1.default.createElement(context_1.ListProvider, { value: context },
         react_1.default.createElement(exports.ListBase, __assign({ className: (0, utils_1.cs)('vui-list', className), ref: ref }, styles.container, rest),
-            (0, utils_1.isReactText)(heading) ? react_1.default.createElement(listHeading_1.default, { text: heading }) : heading,
-            children)));
+            (0, utils_1.isReactText)(heading) ? react_1.default.createElement(listHeading_1.default, { text: heading }) : heading, children !== null && children !== void 0 ? children : ((0, utils_1.isArray)(items)
+            ? items.map(function (_a, index) {
+                var key = _a.key, props = __rest(_a, ["key"]);
+                return react_1.default.createElement(listItem_1.default, __assign({ key: key !== null && key !== void 0 ? key : index }, props));
+            })
+            : items))));
 });
 exports.List.displayName = 'List';
 exports.List.Divider = listDivider_1.default;

package/list/list.types.d.ts

@@ -1,26 +1,47 @@
 /// <reference types="react" />
 import { IconProp } from '../icon';
+import { LinkProps } from '../link';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
-import { AnyElement } from '../utils';
-export interface ListProps extends SystemProps, ThemingProps<'List'> {
+import { PropsOf } from '../utils';
+export declare type ListProps = SystemProps & ThemingProps<'List'> & {
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'grey';
-    disabled?: boolean;
+    /** Socket displaying a heading above the items. */
     heading?: React.ReactNode;
+    /** Passed to all nested items to make them interactive. */
     isInteractive?: boolean;
-}
-export interface ListItemProps extends SystemProps, ThemingProps<'List'> {
+    /** Socket displaying a list of items. */
+    items?: PropsOf<'li', ListItemProps>[] | JSX.Element;
+};
+export declare type ListItemLinkProps = PropsOf<'a', LinkProps> | object;
+export declare type ListItemProps = SystemProps & ThemingProps<'List'> & {
+    /** Centers the content vertically and horizontally. @deprecated */
     center?: boolean;
+    /** Centers the content horizontally. @deprecated */
     centerH?: boolean;
+    /** Centers the content vertically. @deprecated */
     centerV?: boolean;
+    /** Available theme colors for this component. */
     colorScheme?: 'blue' | 'grey';
+    /** Displays content in a column. @deprecated */
     column?: boolean;
+    /** Displays item and its content in disabled state with appropriate styling. */
     disabled?: boolean;
-    iconLeft?: IconProp | AnyElement;
-    iconRight?: IconProp | AnyElement;
+    /** Socket displaying an icon on the left. */
+    iconLeft?: IconProp | JSX.Element;
+    /** Socket displaying an icon on the right. */
+    iconRight?: IconProp | JSX.Element;
+    /** Makes item clickable and focusable with appropriate styling. */
     isInteractive?: boolean;
+    /** Displays item in selected state with appropriate styling. */
     isSelected?: boolean;
+    /** Socket displaying a custom item on the left. */
     itemLeft?: React.ReactNode;
+    /** Socket displaying a custom item on the right. */
     itemRight?: React.ReactNode;
+    /** If provided, content is wrapper with a link and the props are provided to the element. */
+    linkProps?: ListItemLinkProps;
+    /** Socket displaying text within the item. */
     text?: React.ReactNode;
-}
+};

package/list/listDivider.d.ts

@@ -1,3 +1,4 @@
 import { DividerProps } from '../divider';
+/** Displays a divider line within the List. */
 export declare const ListDivider: import("../core").VuiComponent<"hr", DividerProps>;
 export default ListDivider;

package/list/listDivider.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListDivider = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var divider_1 = __importDefault(require("../divider"));
+var context_1 = require("./context");
+/** Displays a divider line within the List. */
 exports.ListDivider = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
     return react_1.default.createElement(divider_1.default, __assign({ className: "vui-listDivider", my: 1, ref: ref }, styles.divider, props));
 });
 exports.ListDivider.displayName = 'ListDivider';

package/list/listHeading.d.ts

@@ -1,3 +1,4 @@
 import { TProps } from '../t';
+/** Displays a heading within the List. */
 export declare const ListHeading: import("../core").VuiComponent<"span", TProps>;
 export default ListHeading;

package/list/listHeading.js

@@ -16,15 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListHeading = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = require("../t");
+var context_1 = require("./context");
+/** Displays a heading within the List. */
 exports.ListHeading = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
-    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", display: "inline-block", p: 1, ref: ref, weight: "demi" }, styles.heading, props)));
+    var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
+    return (react_1.default.createElement(t_1.T, __assign({ className: "vui-listHeading", display: "inline-block", px: 2, py: 1, ref: ref, weight: "demi" }, styles.heading, props)));
 });
 exports.ListHeading.displayName = 'ListHeading';
 exports.default = exports.ListHeading;

package/list/listIcon.d.ts

@@ -1,3 +1,4 @@
 import { IconProps } from '../icon';
+/** Displays an icon on the side of the ListItem. */
 export declare const ListIcon: import("../core").VuiComponent<"svg", IconProps>;
 export default ListIcon;

package/list/listIcon.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListIcon = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var context_1 = require("./context");
+/** Displays an icon on the side of the ListItem. */
 exports.ListIcon = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
     return react_1.default.createElement(icon_1.default, __assign({ className: "vui-listIcon", ref: ref }, styles.icon, props));
 });
 exports.ListIcon.displayName = 'ListIcon';

package/list/listItem.d.ts

@@ -1,5 +1,8 @@
 import { ListItemProps } from './list.types';
-import { SystemProps } from '../system';
-export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const ListItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/**
+ * Displays a list item with text and optional icons. Can be shown as interactive or selected.
+ * Optionally wraps the content with an <a> element when rendering a link.
+ */
 export declare const ListItem: import("../core").VuiComponent<"li", ListItemProps>;
 export default ListItem;

package/list/listItem.js

@@ -14,6 +14,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -30,46 +49,60 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = exports.ListItemBase = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var react_1 = __importStar(require("react"));
+var core_1 = require("../core");
+var link_1 = __importDefault(require("../link"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 var listIcon_1 = __importDefault(require("./listIcon"));
 var listText_1 = __importDefault(require("./listText"));
-var core_1 = require("../core");
-var system_1 = require("../system");
-var utils_1 = require("../utils");
-exports.ListItemBase = styled_components_1.default.li.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\tmargin-bottom: 1px;\n\toutline: none;\n\n\t&[data-disabled='true'] {\n\t\tbackground-color: var(--vui-colors-disabled-bg);\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n\n\t", "\n"])), system_1.system);
+/** Used as optional content wrapper when list item should be a link. */
+var ListItemLink = (0, core_1.vui)(function (props, ref) { return (react_1.default.createElement(link_1.default, __assign({ borderRadius: "none", h: "100%", px: 2, ref: ref, variant: "plain", w: "100%" }, props))); });
+exports.ListItemBase = core_1.styled.liBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"], ["\n\tdisplay: flex;\n\tline-height: normal;\n\toutline: none;\n\ttransition-duration: fast;\n\n\t&[aria-disabled='true'] {\n\t\tbackground-color: disabled.bg;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t\tuser-select: none;\n\t}\n"
+    /**
+     * Displays a list item with text and optional icons. Can be shown as interactive or selected.
+     * Optionally wraps the content with an <a> element when rendering a link.
+     */
+])));
+/**
+ * Displays a list item with text and optional icons. Can be shown as interactive or selected.
+ * Optionally wraps the content with an <a> element when rendering a link.
+ */
 exports.ListItem = (0, core_1.vui)(function (props, ref) {
-    var listProps = (0, context_1.useList)();
-    var mergedProps = __assign(__assign({}, listProps), props);
-    var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconLeft = mergedProps.iconLeft, iconRight = mergedProps.iconRight, _b = mergedProps.isInteractive, isInteractive = _b === void 0 ? props.onClick !== undefined : _b, isSelected = mergedProps.isSelected, isTruncated = mergedProps.isTruncated, itemLeft = mergedProps.itemLeft, itemRight = mergedProps.itemRight, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconLeft", "iconRight", "isInteractive", "isSelected", "isTruncated", "itemLeft", "itemRight", "onClick", "text"]);
+    var mergedProps = __assign(__assign({}, (0, context_1.useList)()), props);
+    var children = mergedProps.children, center = mergedProps.center, centerH = mergedProps.centerH, _a = mergedProps.centerV, centerV = _a === void 0 ? true : _a, className = mergedProps.className, column = mergedProps.column, disabled = mergedProps.disabled, iconLeft = mergedProps.iconLeft, iconRight = mergedProps.iconRight, isInteractiveProp = mergedProps.isInteractive, isSelected = mergedProps.isSelected, isTruncated = mergedProps.isTruncated, itemLeft = mergedProps.itemLeft, itemRight = mergedProps.itemRight, linkProps = mergedProps.linkProps, onClick = mergedProps.onClick, text = mergedProps.text, rest = __rest(mergedProps, ["children", "center", "centerH", "centerV", "className", "column", "disabled", "iconLeft", "iconRight", "isInteractive", "isSelected", "isTruncated", "itemLeft", "itemRight", "linkProps", "onClick", "text"]);
     var styles = (0, core_1.useStyleConfig)('List', mergedProps);
-    var _c = styles.item, activeBg = _c.activeBg, hoverBg = _c.hoverBg, itemStyles = __rest(_c, ["activeBg", "hoverBg"]);
+    var _b = styles.item, activeBg = _b.activeBg, hoverBg = _b.hoverBg, selectedBg = _b.selectedBg, itemStyles = __rest(_b, ["activeBg", "hoverBg", "selectedBg"]);
+    var isLinkItem = linkProps !== undefined;
+    var isInteractive = isInteractiveProp || isLinkItem || onClick !== undefined;
     var alignItems = (center || (column ? centerH : centerV)) && 'center';
     var flexDirection = column && 'column';
     var justifyContent = (center || (column ? centerV : centerH)) && 'center';
+    var ContentWrapper = isLinkItem ? ListItemLink : react_1.Fragment;
     var interactiveProps = !disabled && isInteractive
         ? {
             cursor: 'pointer',
             focusVisibleRing: 2,
             hoverBg: hoverBg,
             activeBg: activeBg,
-            tabIndex: 0,
+            tabIndex: !isLinkItem ? 0 : undefined,
             userSelect: 'none'
         }
         : {};
     var aliasedProps = (0, utils_1.filterUndefined)({
         alignItems: alignItems,
-        bg: isSelected ? hoverBg : undefined,
-        'data-disabled': disabled,
+        bg: isSelected ? selectedBg : undefined,
+        'aria-disabled': disabled,
         flexDirection: flexDirection,
-        justifyContent: justifyContent
+        justifyContent: justifyContent,
+        px: isLinkItem ? 0 : undefined
     });
-    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: (0, utils_1.cs)('vui-listItem', className), onClick: !disabled ? onClick : undefined, px: 1, ref: ref, transitionDuration: "fast" }, itemStyles, interactiveProps, aliasedProps, rest),
-        itemLeft,
-        (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(listIcon_1.default, { mr: 1, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(listText_1.default, { isTruncated: isTruncated, text: text }) : text),
-        (0, utils_1.isString)(iconRight) ? react_1.default.createElement(listIcon_1.default, { ml: "auto", name: iconRight }) : iconRight,
-        itemRight));
+    return (react_1.default.createElement(exports.ListItemBase, __assign({ className: (0, utils_1.cs)('vui-listItem', className), onClick: !disabled ? onClick : undefined, ref: ref }, itemStyles, interactiveProps, aliasedProps, rest),
+        react_1.default.createElement(ContentWrapper, __assign({}, linkProps),
+            itemLeft,
+            (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(listIcon_1.default, { mr: 1, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(listText_1.default, __assign({}, { isTruncated: isTruncated, text: text })) : text),
+            (0, utils_1.isString)(iconRight) ? react_1.default.createElement(listIcon_1.default, { ml: "auto", name: iconRight }) : iconRight,
+            itemRight)));
 });
 exports.ListItem.displayName = 'ListItem';
 exports.default = exports.ListItem;

package/list/listText.d.ts

@@ -1,3 +1,4 @@
 import { TProps } from '../t';
+/** Displays text within the ListItem. */
 export declare const ListText: import("../core").VuiComponent<"span", TProps>;
 export default ListText;

package/list/listText.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListText = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Displays text within the ListItem. */
 exports.ListText = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
     return react_1.default.createElement(t_1.default, __assign({ className: "vui-listText", fontSize: "inherit", ref: ref }, styles.text, props));
 });
 exports.ListText.displayName = 'ListText';

package/list/theme.d.ts

@@ -3,6 +3,7 @@ declare function variantDefault(props: Dict): {
     item: Dict<any>;
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         size: string;

package/list/theme.js

@@ -4,11 +4,13 @@ function variantDefault(props) {
     var c = props.colorScheme;
     var item = {
         activeBg: c + ".30",
-        borderRadius: 'md',
-        hoverBg: c + ".20"
+        hoverBg: c + ".20",
+        selectedBg: c + ".10",
+        px: 2
     };
     return { item: item };
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
@@ -81,6 +83,7 @@ var variants = {
     }
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/menu/menu.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { MenuProps } from './menu.types';
+/** Wraps Popover component and exposes some props to the children via context. */
 declare function Menu(props: MenuProps): JSX.Element;
 declare namespace Menu {
     var Button: import("..").VuiComponent<"button", import("..").ButtonProps>;

package/menu/menu.js

@@ -51,6 +51,7 @@ var context_1 = require("./context");
 var menuButton_1 = __importDefault(require("./menuButton"));
 var menuItem_1 = __importDefault(require("./menuItem"));
 var menuList_1 = __importDefault(require("./menuList"));
+/** Wraps Popover component and exposes some props to the children via context. */
 function Menu(props) {
     var _a = props.closeOnSelect, closeOnSelect = _a === void 0 ? true : _a, size = props.size, variant = props.variant, rest = __rest(props, ["closeOnSelect", "size", "variant"]);
     var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ closeOnSelect: closeOnSelect, size: size, variant: variant }); }, [closeOnSelect, size, variant]);

package/menu/menu.types.d.ts

@@ -3,9 +3,12 @@ import { ListProps } from '../list';
 import { PopoverContentProps, PopoverProps } from '../popover';
 import { ThemingProps } from '../theme';
 export declare type MenuListProps = ListProps & {
+    /** Props object passed to the inner PopoverContent. */
     contentProps?: PopoverContentProps;
+    /** Ref passed to the inner PopoverContent. */
     contentRef?: RefObject<HTMLDivElement>;
 };
 export declare type MenuProps = ThemingProps<'Menu'> & PopoverProps & {
+    /** Content closes when clicking on a list item. */
     closeOnSelect?: boolean;
 };

package/menu/menuButton.d.ts

@@ -1,3 +1,4 @@
 import { ButtonProps } from '../button';
+/** Displays PopoverTrigger as a button. */
 export declare const MenuButton: import("../core").VuiComponent<"button", ButtonProps>;
 export default MenuButton;