@veracity/vui 1.7.0-beta.0 → 1.7.0-beta.1

package/dist/cjs/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
 import { AccordionProps } from './accordion.types';
 export declare const AccordionBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** [BETA] Allows to show and hide sections of related content on a page. */
+/** Allows to show and hide sections of related content on a page. */
 export declare const Accordion: import("../core").VuiComponent<"div", AccordionProps>;
 export default Accordion;
 //# sourceMappingURL=accordion.d.ts.map

package/dist/cjs/accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAItE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,4EAA4E;AAC5E,eAAO,MAAM,SAAS,uDAmBpB,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAKtE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS,uDAyBpB,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/cjs/accordion/accordion.js

@@ -43,23 +43,23 @@ const core_1 = require("../core");
 const list_1 = __importDefault(require("../list"));
 const utils_1 = require("../utils");
 const accordionItem_1 = __importDefault(require("./accordionItem"));
+const accordionItemHorizontal_1 = __importDefault(require("./accordionItemHorizontal"));
 const context_1 = require("./context");
 exports.AccordionBase = core_1.styled.divBox `
   display: flex;
   min-width: 0;
   transition-duration: normal;
 `;
-/** [BETA] Allows to show and hide sections of related content on a page. */
+/** Allows to show and hide sections of related content on a page. */
 exports.Accordion = (0, core_1.vui)((props, ref) => {
-    var _a;
-    const { children, className, items, size } = props, rest = __rest(props, ["children", "className", "items", "size"]);
+    var _a, _b;
+    const { children, className, orientation = 'vertical', items, size } = props, rest = __rest(props, ["children", "className", "orientation", "items", "size"]);
     const styles = (0, core_1.useStyleConfig)('Accordion', props);
     const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ size }), [size]);
     const aliasedProps = (0, utils_1.filterUndefined)({});
     return (react_1.default.createElement(context_1.AccordionProvider, { value: context },
-        react_1.default.createElement(exports.AccordionBase, Object.assign({ className: (0, utils_1.cs)('vui-accordion', className), ref: ref }, styles, aliasedProps, rest),
-            react_1.default.createElement(list_1.default, { w: "100%" }, items
-                ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => react_1.default.createElement(accordionItem_1.default, Object.assign({ key: key }, item)))
-                : children))));
+        react_1.default.createElement(exports.AccordionBase, Object.assign({ className: (0, utils_1.cs)('vui-accordion', className), ref: ref }, styles, aliasedProps, rest), orientation === 'vertical' ? (react_1.default.createElement(list_1.default, { w: "100%" }, items
+            ? (_a = items === null || items === void 0 ? void 0 : items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item, key) => react_1.default.createElement(accordionItem_1.default, Object.assign({ key: key }, item)))
+            : children)) : items ? ((_b = items === null || items === void 0 ? void 0 : items.map) === null || _b === void 0 ? void 0 : _b.call(items, (item, key) => react_1.default.createElement(accordionItemHorizontal_1.default, Object.assign({ key: key }, item)))) : (children))));
 });
 exports.default = exports.Accordion;

package/dist/cjs/accordion/accordion.types.d.ts

@@ -2,7 +2,10 @@ import { ReactNode } from 'react';
 import { ListItemProps } from '../list';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
+export declare type Orientation = 'vertical' | 'horizontal';
 export declare type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
+    /** Items orientation @default 'vertical' */
+    orientation?: Orientation;
     items?: AccordionItemProps[];
 };
 export declare type AccordionItemId = string | number;
@@ -11,15 +14,23 @@ export declare type AccordionOnToggleEvent = {
     collapsed: boolean;
 };
 export declare type AccordionItemProps = ListItemProps & {
+    /** Unique ID */
     id: AccordionItemId;
+    /** Custom class name */
     className?: string;
+    /** Content */
     children?: ReactNode;
+    /** Alternative way to provide content */
     content?: ReactNode;
+    /** Collapsed state */
     collapsed?: boolean;
+    /** Title */
     title?: string | ReactNode;
+    /** Collapse change state */
     onToggle?: (event: AccordionOnToggleEvent) => void;
 };
 export declare type AccordionItemArrowProps = {
     collapsed?: boolean;
+    orientation?: Orientation;
 };
 //# sourceMappingURL=accordion.types.d.ts.map

package/dist/cjs/accordion/accordion.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAE/C,EAAE,EAAE,eAAe,CAAA;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,OAAO,CAAC,EAAE,SAAS,CAAA;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAE1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA"}
+{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAA;AAEnD,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA"}

package/dist/cjs/accordion/accordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBA2CtD,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBAkDtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/cjs/accordion/accordionItem.js

@@ -59,12 +59,12 @@ const AccordionItem = (props) => {
             setIsCollapsedInternal(!collapsedInternal);
         }
     };
-    return (react_1.default.createElement(list_1.ListItem, Object.assign({ borderBottom: "1px solid grey.40", className: (0, utils_1.cs)('vui-accordion-item', className), disabled: disabled, flexDirection: "column", h: "auto", hoverBg: "blue.10", id: `${id}`, w: "100%" }, styles.item, rest),
-        react_1.default.createElement(box_1.Box, { cursor: disabled ? 'not-allowed' : 'pointer', justifyContent: "space-between", onClick: toggle, w: "100%" },
+    return (react_1.default.createElement(list_1.ListItem, Object.assign({ borderBottom: "1px solid grey.40", className: (0, utils_1.cs)('vui-accordion-item', className), disabled: disabled, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%" }, rest),
+        react_1.default.createElement(box_1.Box, Object.assign({ cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: "blue.10", justifyContent: "space-between", onClick: toggle, px: 2, w: "100%" }, styles.item),
             react_1.default.createElement(box_1.Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit' }, title),
             react_1.default.createElement(box_1.Box, null,
                 react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal }))),
-        !collapsedInternal && (react_1.default.createElement(box_1.Box, { mb: 2, mt: 2, w: "100%" }, children !== null && children !== void 0 ? children : content))));
+        !collapsedInternal && (react_1.default.createElement(box_1.Box, { mb: 2, mt: 2, px: 2, py: 1, w: "100%" }, children !== null && children !== void 0 ? children : content))));
 };
 exports.AccordionItem = AccordionItem;
 exports.default = exports.AccordionItem;

package/dist/cjs/accordion/accordionItemArrow.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { AccordionItemArrowProps } from './accordion.types';
-declare const _default: React.MemoExoticComponent<(props: AccordionItemArrowProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ collapsed, orientation }: AccordionItemArrowProps) => JSX.Element>;
 export default _default;
 //# sourceMappingURL=accordionItemArrow.d.ts.map

package/dist/cjs/accordion/accordionItemArrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAO3D,wBAA6C"}
+{"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAiB3D,wBAA6C"}

package/dist/cjs/accordion/accordionItemArrow.js

@@ -5,8 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const icon_1 = __importDefault(require("../icon"));
-const AccordionItemArrow = (props) => {
-    const { collapsed } = props;
-    return react_1.default.createElement(icon_1.default, { name: collapsed ? 'falChevronDown' : 'falChevronUp', size: "xs" });
+const names = {
+    horizontal: {
+        collapsed: 'falChevronRight',
+        expanded: 'falChevronLeft'
+    },
+    vertical: {
+        collapsed: 'falChevronDown',
+        expanded: 'falChevronUp'
+    }
 };
+const AccordionItemArrow = ({ collapsed, orientation = 'vertical' }) => (react_1.default.createElement(icon_1.default, { name: names[orientation][collapsed ? 'collapsed' : 'expanded'], size: "xs" }));
 exports.default = react_1.default.memo(AccordionItemArrow);

package/dist/cjs/accordion/accordionItemHorizontal.d.ts

@@ -0,0 +1,5 @@
+import { AccordionItemProps } from './accordion.types';
+/** [Beta] An accordion item (horizontal orientation). */
+export declare const AccordionItemHorizontal: (props: AccordionItemProps) => JSX.Element;
+export default AccordionItemHorizontal;
+//# sourceMappingURL=accordionItemHorizontal.d.ts.map

package/dist/cjs/accordion/accordionItemHorizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yDAAyD;AACzD,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAwEhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/cjs/accordion/accordionItemHorizontal.js

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItemHorizontal = void 0;
+const react_1 = __importStar(require("react"));
+const box_1 = __importDefault(require("../box"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
+const context_1 = require("./context");
+/** [Beta] An accordion item (horizontal orientation). */
+const AccordionItemHorizontal = (props) => {
+    const _a = (0, core_1.omitThemingProps)(props), { className, children, id, content, disabled, title, collapsed, onToggle } = _a, rest = __rest(_a, ["className", "children", "id", "content", "disabled", "title", "collapsed", "onToggle"]);
+    const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
+    const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
+    (0, react_1.useEffect)(() => {
+        setIsCollapsedInternal(!!collapsed);
+    }, [collapsed]);
+    const toggle = () => {
+        if (!disabled) {
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle({ id, collapsed: !collapsedInternal });
+            setIsCollapsedInternal(!collapsedInternal);
+        }
+    };
+    const cursor = disabled ? 'not-allowed' : 'pointer';
+    const fontWeight = typeof title === 'string' ? '500' : 'inherit';
+    return (react_1.default.createElement(box_1.default, Object.assign({ alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: "1px solid grey.40", className: (0, utils_1.cs)('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, p: 0, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined }, rest),
+        react_1.default.createElement(box_1.default, Object.assign({}, styles.item, { cursor: cursor, hoverBg: "blue.10", justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.item.pt, w: "100%" }),
+            !collapsedInternal && react_1.default.createElement(box_1.default, { fontWeight: fontWeight }, title),
+            react_1.default.createElement(accordionItemArrow_1.default, { collapsed: collapsedInternal, orientation: "horizontal" })),
+        !collapsedInternal ? (react_1.default.createElement(box_1.default, { p: styles.item.pt, pt: 0, transitionDuration: "0ms" }, children !== null && children !== void 0 ? children : content)) : (react_1.default.createElement(box_1.default, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.item.pt, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap" }, title))));
+};
+exports.AccordionItemHorizontal = AccordionItemHorizontal;
+exports.default = exports.AccordionItemHorizontal;

package/dist/cjs/accordion/index.d.ts

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './accordionItem';
+export * from './accordionItemHorizontal';
 export { default } from './accordion';
 export * from './accordion.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,2BAA2B,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,cAAc,mBAAmB,CAAA"}

package/dist/cjs/accordion/index.js

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./accordion"), exports);
 __exportStar(require("./accordionItem"), exports);
+__exportStar(require("./accordionItemHorizontal"), exports);
 var accordion_1 = require("./accordion");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(accordion_1).default; } });
 __exportStar(require("./accordion.types"), exports);

package/dist/esm/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
 import { AccordionProps } from './accordion.types';
 export declare const AccordionBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
-/** [BETA] Allows to show and hide sections of related content on a page. */
+/** Allows to show and hide sections of related content on a page. */
 export declare const Accordion: import("../core").VuiComponent<"div", AccordionProps>;
 export default Accordion;
 //# sourceMappingURL=accordion.d.ts.map

package/dist/esm/accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAItE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,4EAA4E;AAC5E,eAAO,MAAM,SAAS,uDAmBpB,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAsB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAKtE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS,uDAyBpB,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/esm/accordion/accordion.js

@@ -3,22 +3,22 @@ import { styled, useStyleConfig, vui } from '../core';
 import List from '../list';
 import { cs, filterUndefined } from '../utils';
 import AccordionItem from './accordionItem';
+import AccordionItemHorizontal from './accordionItemHorizontal';
 import { AccordionProvider } from './context';
 export const AccordionBase = styled.divBox `
   display: flex;
   min-width: 0;
   transition-duration: normal;
 `;
-/** [BETA] Allows to show and hide sections of related content on a page. */
+/** Allows to show and hide sections of related content on a page. */
 export const Accordion = vui((props, ref) => {
-    const { children, className, items, size, ...rest } = props;
+    const { children, className, orientation = 'vertical', items, size, ...rest } = props;
     const styles = useStyleConfig('Accordion', props);
     const context = useMemo(() => filterUndefined({ size }), [size]);
     const aliasedProps = filterUndefined({});
     return (React.createElement(AccordionProvider, { value: context },
-        React.createElement(AccordionBase, { className: cs('vui-accordion', className), ref: ref, ...styles, ...aliasedProps, ...rest },
-            React.createElement(List, { w: "100%" }, items
-                ? items?.map?.((item, key) => React.createElement(AccordionItem, { key: key, ...item }))
-                : children))));
+        React.createElement(AccordionBase, { className: cs('vui-accordion', className), ref: ref, ...styles, ...aliasedProps, ...rest }, orientation === 'vertical' ? (React.createElement(List, { w: "100%" }, items
+            ? items?.map?.((item, key) => React.createElement(AccordionItem, { key: key, ...item }))
+            : children)) : items ? (items?.map?.((item, key) => React.createElement(AccordionItemHorizontal, { key: key, ...item }))) : (children))));
 });
 export default Accordion;

package/dist/esm/accordion/accordion.types.d.ts

@@ -2,7 +2,10 @@ import { ReactNode } from 'react';
 import { ListItemProps } from '../list';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
+export declare type Orientation = 'vertical' | 'horizontal';
 export declare type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
+    /** Items orientation @default 'vertical' */
+    orientation?: Orientation;
     items?: AccordionItemProps[];
 };
 export declare type AccordionItemId = string | number;
@@ -11,15 +14,23 @@ export declare type AccordionOnToggleEvent = {
     collapsed: boolean;
 };
 export declare type AccordionItemProps = ListItemProps & {
+    /** Unique ID */
     id: AccordionItemId;
+    /** Custom class name */
     className?: string;
+    /** Content */
     children?: ReactNode;
+    /** Alternative way to provide content */
     content?: ReactNode;
+    /** Collapsed state */
     collapsed?: boolean;
+    /** Title */
     title?: string | ReactNode;
+    /** Collapse change state */
     onToggle?: (event: AccordionOnToggleEvent) => void;
 };
 export declare type AccordionItemArrowProps = {
     collapsed?: boolean;
+    orientation?: Orientation;
 };
 //# sourceMappingURL=accordion.types.d.ts.map

package/dist/esm/accordion/accordion.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAE/C,EAAE,EAAE,eAAe,CAAA;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,OAAO,CAAC,EAAE,SAAS,CAAA;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAE1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA"}
+{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAA;AAEnD,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA"}

package/dist/esm/accordion/accordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBA2CtD,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"accordionItem.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yBAAyB;AACzB,eAAO,MAAM,aAAa,UAAW,kBAAkB,gBAkDtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/esm/accordion/accordionItem.js

@@ -19,11 +19,11 @@ export const AccordionItem = (props) => {
             setIsCollapsedInternal(!collapsedInternal);
         }
     };
-    return (React.createElement(ListItem, { borderBottom: "1px solid grey.40", className: cs('vui-accordion-item', className), disabled: disabled, flexDirection: "column", h: "auto", hoverBg: "blue.10", id: `${id}`, w: "100%", ...styles.item, ...rest },
-        React.createElement(Box, { cursor: disabled ? 'not-allowed' : 'pointer', justifyContent: "space-between", onClick: toggle, w: "100%" },
+    return (React.createElement(ListItem, { borderBottom: "1px solid grey.40", className: cs('vui-accordion-item', className), disabled: disabled, flexDirection: "column", h: "auto", id: `${id}`, p: 0, w: "100%", ...rest },
+        React.createElement(Box, { cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: "blue.10", justifyContent: "space-between", onClick: toggle, px: 2, w: "100%", ...styles.item },
             React.createElement(Box, { fontWeight: typeof title === 'string' ? '500' : 'inherit' }, title),
             React.createElement(Box, null,
                 React.createElement(AccordionItemArrow, { collapsed: collapsedInternal }))),
-        !collapsedInternal && (React.createElement(Box, { mb: 2, mt: 2, w: "100%" }, children ?? content))));
+        !collapsedInternal && (React.createElement(Box, { mb: 2, mt: 2, px: 2, py: 1, w: "100%" }, children ?? content))));
 };
 export default AccordionItem;

package/dist/esm/accordion/accordionItemArrow.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { AccordionItemArrowProps } from './accordion.types';
-declare const _default: React.MemoExoticComponent<(props: AccordionItemArrowProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ collapsed, orientation }: AccordionItemArrowProps) => JSX.Element>;
 export default _default;
 //# sourceMappingURL=accordionItemArrow.d.ts.map

package/dist/esm/accordion/accordionItemArrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAO3D,wBAA6C"}
+{"version":3,"file":"accordionItemArrow.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;;AAiB3D,wBAA6C"}

package/dist/esm/accordion/accordionItemArrow.js

@@ -1,7 +1,14 @@
 import React from 'react';
 import Icon from '../icon';
-const AccordionItemArrow = (props) => {
-    const { collapsed } = props;
-    return React.createElement(Icon, { name: collapsed ? 'falChevronDown' : 'falChevronUp', size: "xs" });
+const names = {
+    horizontal: {
+        collapsed: 'falChevronRight',
+        expanded: 'falChevronLeft'
+    },
+    vertical: {
+        collapsed: 'falChevronDown',
+        expanded: 'falChevronUp'
+    }
 };
+const AccordionItemArrow = ({ collapsed, orientation = 'vertical' }) => (React.createElement(Icon, { name: names[orientation][collapsed ? 'collapsed' : 'expanded'], size: "xs" }));
 export default React.memo(AccordionItemArrow);

package/dist/esm/accordion/accordionItemHorizontal.d.ts

@@ -0,0 +1,5 @@
+import { AccordionItemProps } from './accordion.types';
+/** [Beta] An accordion item (horizontal orientation). */
+export declare const AccordionItemHorizontal: (props: AccordionItemProps) => JSX.Element;
+export default AccordionItemHorizontal;
+//# sourceMappingURL=accordionItemHorizontal.d.ts.map

package/dist/esm/accordion/accordionItemHorizontal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,yDAAyD;AACzD,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAwEhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/esm/accordion/accordionItemHorizontal.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+import Box from '../box';
+import { omitThemingProps, useStyleConfig } from '../core';
+import { cs } from '../utils';
+import AccordionItemArrow from './accordionItemArrow';
+import { useAccordionContext } from './context';
+/** [Beta] An accordion item (horizontal orientation). */
+export const AccordionItemHorizontal = (props) => {
+    const { className, children, id, content, disabled, title, collapsed, onToggle, ...rest } = omitThemingProps(props);
+    const [collapsedInternal, setIsCollapsedInternal] = useState(false);
+    const styles = useStyleConfig('Accordion', useAccordionContext());
+    useEffect(() => {
+        setIsCollapsedInternal(!!collapsed);
+    }, [collapsed]);
+    const toggle = () => {
+        if (!disabled) {
+            onToggle?.({ id, collapsed: !collapsedInternal });
+            setIsCollapsedInternal(!collapsedInternal);
+        }
+    };
+    const cursor = disabled ? 'not-allowed' : 'pointer';
+    const fontWeight = typeof title === 'string' ? '500' : 'inherit';
+    return (React.createElement(Box, { alignItems: collapsedInternal ? 'normal' : 'baseline', bg: disabled ? 'disabled.bg' : undefined, borderRight: "1px solid grey.40", className: cs('vui-accordion-item-horizontal', className), color: disabled ? 'disabled.color' : undefined, column: true, cursor: disabled ? 'not-allowed' : undefined, id: `${id}`, maxW: collapsedInternal ? styles.item.minH : 'auto', minW: styles.item.minH, p: 0, transitionDuration: "0ms", userSelect: disabled ? 'none' : undefined, ...rest },
+        React.createElement(Box, { ...styles.item, cursor: cursor, hoverBg: "blue.10", justifyContent: "space-between", minH: styles.item.minH, onClick: toggle, p: styles.item.pt, w: "100%" },
+            !collapsedInternal && React.createElement(Box, { fontWeight: fontWeight }, title),
+            React.createElement(AccordionItemArrow, { collapsed: collapsedInternal, orientation: "horizontal" })),
+        !collapsedInternal ? (React.createElement(Box, { p: styles.item.pt, pt: 0, transitionDuration: "0ms" }, children ?? content)) : (React.createElement(Box, { cursor: cursor, flexDirection: "row-reverse", fontWeight: fontWeight, mb: styles.item.minH, mt: styles.item.pt, onClick: toggle, transform: "rotate(-90deg)", transitionDuration: "0ms", whiteSpace: "nowrap" }, title))));
+};
+export default AccordionItemHorizontal;

package/dist/esm/accordion/index.d.ts

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './accordionItem';
+export * from './accordionItemHorizontal';
 export { default } from './accordion';
 export * from './accordion.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,2BAA2B,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACrC,cAAc,mBAAmB,CAAA"}

package/dist/esm/accordion/index.js

@@ -1,4 +1,5 @@
 export * from './accordion';
 export * from './accordionItem';
+export * from './accordionItemHorizontal';
 export { default } from './accordion';
 export * from './accordion.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.7.0-beta.0",
+  "version": "1.7.0-beta.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/accordion/accordion.tsx

@@ -5,6 +5,7 @@ import List from '../list'
 import { cs, filterUndefined } from '../utils'
 import { AccordionItemProps, AccordionProps } from './accordion.types'
 import AccordionItem from './accordionItem'
+import AccordionItemHorizontal from './accordionItemHorizontal'
 import { AccordionProvider } from './context'
 
 export const AccordionBase = styled.divBox`
@@ -13,9 +14,9 @@ export const AccordionBase = styled.divBox`
   transition-duration: normal;
 `
 
-/** [BETA] Allows to show and hide sections of related content on a page. */
+/** Allows to show and hide sections of related content on a page. */
 export const Accordion = vui<'div', AccordionProps>((props, ref) => {
-  const { children, className, items, size, ...rest } = props
+  const { children, className, orientation = 'vertical', items, size, ...rest } = props
   const styles = useStyleConfig('Accordion', props)
 
   const context = useMemo(() => filterUndefined({ size }), [size])
@@ -25,11 +26,17 @@ export const Accordion = vui<'div', AccordionProps>((props, ref) => {
   return (
     <AccordionProvider value={context}>
       <AccordionBase className={cs('vui-accordion', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
-        <List w="100%">
-          {items
-            ? items?.map?.((item: AccordionItemProps, key: number) => <AccordionItem key={key} {...item} />)
-            : children}
-        </List>
+        {orientation === 'vertical' ? (
+          <List w="100%">
+            {items
+              ? items?.map?.((item: AccordionItemProps, key: number) => <AccordionItem key={key} {...item} />)
+              : children}
+          </List>
+        ) : items ? (
+          items?.map?.((item: AccordionItemProps, key: number) => <AccordionItemHorizontal key={key} {...item} />)
+        ) : (
+          children
+        )}
       </AccordionBase>
     </AccordionProvider>
   )

package/src/accordion/accordion.types.ts

@@ -4,8 +4,12 @@ import { ListItemProps } from '../list'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
+export type Orientation = 'vertical' | 'horizontal'
+
 export type AccordionProps = SystemProps &
   ThemingProps<'Accordion'> & {
+    /** Items orientation @default 'vertical' */
+    orientation?: Orientation
     items?: AccordionItemProps[]
   }
 
@@ -17,22 +21,23 @@ export type AccordionOnToggleEvent = {
 }
 
 export type AccordionItemProps = ListItemProps & {
-  // Unique ID
+  /** Unique ID */
   id: AccordionItemId
-  // Custom class name
+  /** Custom class name */
   className?: string
-  // Content
+  /** Content */
   children?: ReactNode
-  // Alternative way to provide content
+  /** Alternative way to provide content */
   content?: ReactNode
-  // Collapsed state
+  /** Collapsed state */
   collapsed?: boolean
-  // Title
+  /** Title */
   title?: string | ReactNode
-  // Collapse change state
+  /** Collapse change state */
   onToggle?: (event: AccordionOnToggleEvent) => void
 }
 
 export type AccordionItemArrowProps = {
   collapsed?: boolean
+  orientation?: Orientation
 }

package/src/accordion/accordionItem.tsx

@@ -33,20 +33,27 @@ export const AccordionItem = (props: AccordionItemProps) => {
       disabled={disabled}
       flexDirection="column"
       h="auto"
-      hoverBg="blue.10"
       id={`${id}`}
+      p={0}
       w="100%"
-      {...styles.item}
       {...rest}
     >
-      <Box cursor={disabled ? 'not-allowed' : 'pointer'} justifyContent="space-between" onClick={toggle} w="100%">
+      <Box
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        hoverBg="blue.10"
+        justifyContent="space-between"
+        onClick={toggle}
+        px={2}
+        w="100%"
+        {...styles.item}
+      >
         <Box fontWeight={typeof title === 'string' ? '500' : 'inherit'}>{title}</Box>
         <Box>
           <AccordionItemArrow collapsed={collapsedInternal} />
         </Box>
       </Box>
       {!collapsedInternal && (
-        <Box mb={2} mt={2} w="100%">
+        <Box mb={2} mt={2} px={2} py={1} w="100%">
           {children ?? content}
         </Box>
       )}

package/src/accordion/accordionItemArrow.tsx

@@ -3,9 +3,19 @@ import React from 'react'
 import Icon from '../icon'
 import { AccordionItemArrowProps } from './accordion.types'
 
-const AccordionItemArrow = (props: AccordionItemArrowProps) => {
-  const { collapsed } = props
-  return <Icon name={collapsed ? 'falChevronDown' : 'falChevronUp'} size="xs" />
+const names = {
+  horizontal: {
+    collapsed: 'falChevronRight',
+    expanded: 'falChevronLeft'
+  },
+  vertical: {
+    collapsed: 'falChevronDown',
+    expanded: 'falChevronUp'
+  }
 }
 
+const AccordionItemArrow = ({ collapsed, orientation = 'vertical' }: AccordionItemArrowProps) => (
+  <Icon name={names[orientation][collapsed ? 'collapsed' : 'expanded']} size="xs" />
+)
+
 export default React.memo(AccordionItemArrow)

package/src/accordion/accordionItemHorizontal.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react'
+
+import Box from '../box'
+import { omitThemingProps, useStyleConfig } from '../core'
+import { cs } from '../utils'
+import { AccordionItemProps } from './accordion.types'
+import AccordionItemArrow from './accordionItemArrow'
+import { useAccordionContext } from './context'
+
+/** [Beta] An accordion item (horizontal orientation). */
+export const AccordionItemHorizontal = (props: AccordionItemProps) => {
+  const { className, children, id, content, disabled, title, collapsed, onToggle, ...rest } = omitThemingProps(props)
+  const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)
+
+  const styles = useStyleConfig('Accordion', useAccordionContext())
+
+  useEffect(() => {
+    setIsCollapsedInternal(!!collapsed)
+  }, [collapsed])
+
+  const toggle = () => {
+    if (!disabled) {
+      onToggle?.({ id, collapsed: !collapsedInternal })
+      setIsCollapsedInternal(!collapsedInternal)
+    }
+  }
+
+  const cursor = disabled ? 'not-allowed' : 'pointer'
+  const fontWeight = typeof title === 'string' ? '500' : 'inherit'
+
+  return (
+    <Box
+      alignItems={collapsedInternal ? 'normal' : 'baseline'}
+      bg={disabled ? 'disabled.bg' : undefined}
+      borderRight="1px solid grey.40"
+      className={cs('vui-accordion-item-horizontal', className)}
+      color={disabled ? 'disabled.color' : undefined}
+      column
+      cursor={disabled ? 'not-allowed' : undefined}
+      id={`${id}`}
+      maxW={collapsedInternal ? styles.item.minH : 'auto'}
+      minW={styles.item.minH}
+      p={0}
+      transitionDuration="0ms"
+      userSelect={disabled ? 'none' : undefined}
+      {...rest}
+    >
+      <Box
+        {...styles.item}
+        cursor={cursor}
+        hoverBg="blue.10"
+        justifyContent="space-between"
+        minH={styles.item.minH}
+        onClick={toggle}
+        p={styles.item.pt}
+        w="100%"
+      >
+        {!collapsedInternal && <Box fontWeight={fontWeight}>{title}</Box>}
+        <AccordionItemArrow collapsed={collapsedInternal} orientation="horizontal" />
+      </Box>
+
+      {!collapsedInternal ? (
+        <Box p={styles.item.pt} pt={0} transitionDuration="0ms">
+          {children ?? content}
+        </Box>
+      ) : (
+        <Box
+          cursor={cursor}
+          flexDirection="row-reverse"
+          fontWeight={fontWeight}
+          mb={styles.item.minH}
+          mt={styles.item.pt}
+          onClick={toggle}
+          transform="rotate(-90deg)"
+          transitionDuration="0ms"
+          whiteSpace="nowrap"
+        >
+          {title}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default AccordionItemHorizontal

package/src/accordion/index.ts

@@ -1,4 +1,5 @@
 export * from './accordion'
 export * from './accordionItem'
+export * from './accordionItemHorizontal'
 export { default } from './accordion'
 export * from './accordion.types'