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

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;AAKtE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS,uDAyBpB,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,uDA6BpB,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/cjs/accordion/accordion.js

@@ -53,13 +53,13 @@ exports.AccordionBase = core_1.styled.divBox `
 /** Allows to show and hide sections of related content on a page. */
 exports.Accordion = (0, core_1.vui)((props, ref) => {
     var _a, _b;
-    const { children, className, orientation = 'vertical', items, size } = props, rest = __rest(props, ["children", "className", "orientation", "items", "size"]);
+    const { children, className, itemTitleHoverBg = 'blue.10', items, orientation = 'vertical', size } = props, rest = __rest(props, ["children", "className", "itemTitleHoverBg", "items", "orientation", "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), 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))));
+            ? (_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({ itemTitleHoverBg: itemTitleHoverBg, 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({ itemTitleHoverBg: itemTitleHoverBg, key: key }, item))))) : (children))));
 });
 exports.default = exports.Accordion;

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

@@ -6,6 +6,8 @@ export declare type Orientation = 'vertical' | 'horizontal';
 export declare type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
     /** Items orientation @default 'vertical' */
     orientation?: Orientation;
+    /** Hover color for the item title @default "blue.10" */
+    itemTitleHoverBg?: string;
     items?: AccordionItemProps[];
 };
 export declare type AccordionItemId = string | number;
@@ -24,6 +26,8 @@ export declare type AccordionItemProps = ListItemProps & {
     content?: ReactNode;
     /** Collapsed state */
     collapsed?: boolean;
+    /** Hover color for the item title @default "blue.10" */
+    itemTitleHoverBg?: string;
     /** Title */
     title?: string | ReactNode;
     /** Collapse change state */

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,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"}
+{"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,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,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,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,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,gBAkDtD,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,gBA6DtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/cjs/accordion/accordionItem.js

@@ -47,7 +47,7 @@ const accordionItemArrow_1 = __importDefault(require("./accordionItemArrow"));
 const context_1 = require("./context");
 /** An accordion item. */
 const AccordionItem = (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 _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, itemTitleHoverBg = 'blue.10', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "itemTitleHoverBg", "title", "onToggle"]);
     const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
     const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
     (0, react_1.useEffect)(() => {
@@ -60,7 +60,7 @@ const AccordionItem = (props) => {
         }
     };
     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, Object.assign({ cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: itemTitleHoverBg, 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 }))),

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

@@ -1,5 +1,5 @@
 import { AccordionItemProps } from './accordion.types';
-/** [Beta] An accordion item (horizontal orientation). */
+/** 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

@@ -1 +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"}
+{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAmFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/cjs/accordion/accordionItemHorizontal.js

@@ -44,9 +44,9 @@ 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). */
+/** 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 _a = (0, core_1.omitThemingProps)(props), { className, children, collapsed, content, disabled, id, itemTitleHoverBg = 'blue.10', title, onToggle } = _a, rest = __rest(_a, ["className", "children", "collapsed", "content", "disabled", "id", "itemTitleHoverBg", "title", "onToggle"]);
     const [collapsedInternal, setIsCollapsedInternal] = (0, react_1.useState)(false);
     const styles = (0, core_1.useStyleConfig)('Accordion', (0, context_1.useAccordionContext)());
     (0, react_1.useEffect)(() => {
@@ -61,7 +61,7 @@ const AccordionItemHorizontal = (props) => {
     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%" }),
+        react_1.default.createElement(box_1.default, Object.assign({}, styles.item, { cursor: cursor, hoverBg: itemTitleHoverBg, 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))));

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAuHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAqHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/cjs/button/button.js

@@ -130,15 +130,15 @@ exports.Button = (0, core_1.vui)((props, ref) => {
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(context_2.ButtonProvider, { value: context },
-        react_1.default.createElement(exports.ButtonBase, Object.assign({ borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: pr, ref: ref, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
+        react_1.default.createElement(exports.ButtonBase, Object.assign({ borderWidth: border, className: (0, utils_1.cs)('vui-button', className, isActive && utils_1.activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, type: "button", variant: variant }, buttonStyles, disabledProps, aliasedProps, rest),
             hasState && (react_1.default.createElement(StateWrapper, Object.assign({ onClick: (e) => e.stopPropagation() }, stateProps),
                 react_1.default.createElement(buttonIcon_1.default, Object.assign({ m: "auto" }, stateIconProps)))),
             react_1.default.createElement(Content, null,
                 (0, utils_1.isString)(icon) ? react_1.default.createElement(buttonIcon_1.default, { name: icon }) : icon,
                 !icon && (react_1.default.createElement(react_1.default.Fragment, null,
                     (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(buttonIcon_1.default, { mr: isDropDown ? 0 : iconLeftMr, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(buttonText_1.default, Object.assign({}, { isTruncated, text })) : text),
-                    isDropDown && react_1.default.createElement(buttonIcon_1.default, { name: "falAngleDown" }),
-                    (0, utils_1.isString)(iconRight) ? react_1.default.createElement(buttonIcon_1.default, { ml: iconRightMl, name: iconRight }) : iconRight))))));
+                    (0, utils_1.isString)(iconRight) ? react_1.default.createElement(buttonIcon_1.default, { ml: iconRightMl, name: iconRight }) : iconRight)),
+                isDropDown && react_1.default.createElement(buttonIcon_1.default, { name: "falAngleDown" })))));
 });
 exports.Button.Icon = buttonIcon_1.default;
 exports.Button.Text = buttonText_1.default;

package/dist/cjs/copyToClipboard/copyToClipboard.d.ts

@@ -0,0 +1,12 @@
+import { CopyToClipboardProps } from './copyToClipboard.types';
+/**
+ * A helper button component.
+ *
+ * Copies the provided text to clipboard.
+ *
+ * Copying is available only for a secure environment (https://), otherwise the button is disabled.
+ *
+ */
+export declare const CopyToClipboard: import("../core").VuiComponent<"button", CopyToClipboardProps>;
+export default CopyToClipboard;
+//# sourceMappingURL=copyToClipboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copyToClipboard.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/copyToClipboard.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAG9D;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,gEAiB1B,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/dist/cjs/copyToClipboard/copyToClipboard.js

@@ -0,0 +1,36 @@
+"use strict";
+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.CopyToClipboard = void 0;
+const react_1 = __importDefault(require("react"));
+const button_1 = __importDefault(require("../button"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const useCopyToClipboard_1 = require("./useCopyToClipboard");
+/**
+ * A helper button component.
+ *
+ * Copies the provided text to clipboard.
+ *
+ * Copying is available only for a secure environment (https://), otherwise the button is disabled.
+ *
+ */
+exports.CopyToClipboard = (0, core_1.vui)((props, ref) => {
+    const { disabled, copyText, className, size = 'xs', variant = 'text' } = props, rest = __rest(props, ["disabled", "copyText", "className", "size", "variant"]);
+    const { copy, isCopyDisabled } = (0, useCopyToClipboard_1.useCopyToClipboard)(copyText);
+    return (react_1.default.createElement(button_1.default, Object.assign({ className: (0, utils_1.cs)('vui-copy-to-clipboard', className), disabled: disabled || isCopyDisabled, icon: "falCopy", onClick: () => copy(), ref: ref, size: size, variant: variant }, rest)));
+});
+exports.default = exports.CopyToClipboard;

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

@@ -0,0 +1,9 @@
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type CopyToClipboardProps = SystemProps & ThemingProps<'Button'> & {
+    /** Text string for copying */
+    copyText: string;
+    /** Button size @default "xs" */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+//# sourceMappingURL=copyToClipboard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copyToClipboard.types.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/copyToClipboard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,oBAAoB,GAAG,WAAW,GAC5C,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACjC,CAAA"}

package/dist/cjs/copyToClipboard/copyToClipboard.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,5 @@
+export * from './copyToClipboard';
+export { default } from './copyToClipboard';
+export * from './copyToClipboard.types';
+export * from './useCopyToClipboard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA"}

package/dist/cjs/copyToClipboard/index.js

@@ -0,0 +1,25 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./copyToClipboard"), exports);
+var copyToClipboard_1 = require("./copyToClipboard");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(copyToClipboard_1).default; } });
+__exportStar(require("./copyToClipboard.types"), exports);
+__exportStar(require("./useCopyToClipboard"), exports);

package/dist/cjs/copyToClipboard/useCopyToClipboard.d.ts

@@ -0,0 +1,5 @@
+export declare const useCopyToClipboard: (copyText: string) => {
+    copy: () => void;
+    isCopyDisabled: boolean;
+};
+//# sourceMappingURL=useCopyToClipboard.d.ts.map

package/dist/cjs/copyToClipboard/useCopyToClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyToClipboard.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/useCopyToClipboard.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,aAAc,MAAM;;;CAYlD,CAAA"}

package/dist/cjs/copyToClipboard/useCopyToClipboard.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCopyToClipboard = void 0;
+const toast_1 = require("../toast");
+const useCopyToClipboard = (copyText) => {
+    var _a, _b;
+    const { showSuccess, showError } = (0, toast_1.useToast)();
+    const isCopyDisabled = !((_b = (_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) === null || _b === void 0 ? void 0 : _b.writeText);
+    const copy = () => {
+        var _a, _b, _c;
+        if (!isCopyDisabled) {
+            (_c = (_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : (_b = _a.clipboard).writeText) === null || _c === void 0 ? void 0 : _c.call(_b, copyText).then(() => showSuccess(`Copied to clipboard: ${copyText}`)).catch(() => showError('Copy failed'));
+        }
+    };
+    return { copy, isCopyDisabled };
+};
+exports.useCopyToClipboard = useCopyToClipboard;

package/dist/cjs/index.d.ts

@@ -6,6 +6,7 @@ export * from './buttonGroup';
 export * from './buttonToggleGroup';
 export * from './card';
 export * from './checkbox';
+export * from './copyToClipboard';
 export * from './core';
 export * from './dialog';
 export * from './divider';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/cjs/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./buttonGroup"), exports);
 __exportStar(require("./buttonToggleGroup"), exports);
 __exportStar(require("./card"), exports);
 __exportStar(require("./checkbox"), exports);
+__exportStar(require("./copyToClipboard"), exports);
 __exportStar(require("./core"), exports);
 __exportStar(require("./dialog"), exports);
 __exportStar(require("./divider"), exports);

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;AAKtE,eAAO,MAAM,aAAa,+HAIzB,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,SAAS,uDAyBpB,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,uDA6BpB,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/esm/accordion/accordion.js

@@ -12,13 +12,13 @@ export const AccordionBase = styled.divBox `
 `;
 /** Allows to show and hide sections of related content on a page. */
 export const Accordion = vui((props, ref) => {
-    const { children, className, orientation = 'vertical', items, size, ...rest } = props;
+    const { children, className, itemTitleHoverBg = 'blue.10', items, orientation = 'vertical', 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 }, 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))));
+            ? items?.map?.((item, key) => (React.createElement(AccordionItem, { itemTitleHoverBg: itemTitleHoverBg, key: key, ...item })))
+            : children)) : items ? (items?.map?.((item, key) => (React.createElement(AccordionItemHorizontal, { itemTitleHoverBg: itemTitleHoverBg, key: key, ...item })))) : (children))));
 });
 export default Accordion;

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

@@ -6,6 +6,8 @@ export declare type Orientation = 'vertical' | 'horizontal';
 export declare type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
     /** Items orientation @default 'vertical' */
     orientation?: Orientation;
+    /** Hover color for the item title @default "blue.10" */
+    itemTitleHoverBg?: string;
     items?: AccordionItemProps[];
 };
 export declare type AccordionItemId = string | number;
@@ -24,6 +26,8 @@ export declare type AccordionItemProps = ListItemProps & {
     content?: ReactNode;
     /** Collapsed state */
     collapsed?: boolean;
+    /** Hover color for the item title @default "blue.10" */
+    itemTitleHoverBg?: string;
     /** Title */
     title?: string | ReactNode;
     /** Collapse change state */

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,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"}
+{"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,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,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,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,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,gBAkDtD,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,gBA6DtD,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/esm/accordion/accordionItem.js

@@ -7,7 +7,7 @@ import AccordionItemArrow from './accordionItemArrow';
 import { useAccordionContext } from './context';
 /** An accordion item. */
 export const AccordionItem = (props) => {
-    const { className, children, id, content, disabled, title, collapsed, onToggle, ...rest } = omitThemingProps(props);
+    const { className, children, collapsed, content, disabled, id, itemTitleHoverBg = 'blue.10', title, onToggle, ...rest } = omitThemingProps(props);
     const [collapsedInternal, setIsCollapsedInternal] = useState(false);
     const styles = useStyleConfig('Accordion', useAccordionContext());
     useEffect(() => {
@@ -20,7 +20,7 @@ export const AccordionItem = (props) => {
         }
     };
     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, { cursor: disabled ? 'not-allowed' : 'pointer', hoverBg: itemTitleHoverBg, 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 }))),

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

@@ -1,5 +1,5 @@
 import { AccordionItemProps } from './accordion.types';
-/** [Beta] An accordion item (horizontal orientation). */
+/** 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

@@ -1 +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"}
+{"version":3,"file":"accordionItemHorizontal.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordionItemHorizontal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAItD,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,UAAW,kBAAkB,gBAmFhE,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/esm/accordion/accordionItemHorizontal.js

@@ -4,9 +4,9 @@ import { omitThemingProps, useStyleConfig } from '../core';
 import { cs } from '../utils';
 import AccordionItemArrow from './accordionItemArrow';
 import { useAccordionContext } from './context';
-/** [Beta] An accordion item (horizontal orientation). */
+/** An accordion item (horizontal orientation). */
 export const AccordionItemHorizontal = (props) => {
-    const { className, children, id, content, disabled, title, collapsed, onToggle, ...rest } = omitThemingProps(props);
+    const { className, children, collapsed, content, disabled, id, itemTitleHoverBg = 'blue.10', title, onToggle, ...rest } = omitThemingProps(props);
     const [collapsedInternal, setIsCollapsedInternal] = useState(false);
     const styles = useStyleConfig('Accordion', useAccordionContext());
     useEffect(() => {
@@ -21,7 +21,7 @@ export const AccordionItemHorizontal = (props) => {
     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%" },
+        React.createElement(Box, { ...styles.item, cursor: cursor, hoverBg: itemTitleHoverBg, 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))));

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAuHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAqHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/esm/button/button.js

@@ -89,7 +89,7 @@ export const Button = vui((props, ref) => {
         w: isFullWidth ? '100%' : undefined
     });
     return (React.createElement(ButtonProvider, { value: context },
-        React.createElement(ButtonBase, { borderWidth: border, className: cs('vui-button', className, isActive && activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: pr, ref: ref, type: "button", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
+        React.createElement(ButtonBase, { borderWidth: border, className: cs('vui-button', className, isActive && activeClassName), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: isDropDown ? 0 : pr, ref: ref, type: "button", variant: variant, ...buttonStyles, ...disabledProps, ...aliasedProps, ...rest },
             hasState && (React.createElement(StateWrapper, { onClick: (e) => e.stopPropagation(), ...stateProps },
                 React.createElement(ButtonIcon, { m: "auto", ...stateIconProps }))),
             React.createElement(Content, null,
@@ -97,8 +97,8 @@ export const Button = vui((props, ref) => {
                 !icon && (React.createElement(React.Fragment, null,
                     isString(iconLeft) ? React.createElement(ButtonIcon, { mr: isDropDown ? 0 : iconLeftMr, name: iconLeft }) : iconLeft,
                     children ?? (isReactText(text) ? React.createElement(ButtonText, { ...{ isTruncated, text } }) : text),
-                    isDropDown && React.createElement(ButtonIcon, { name: "falAngleDown" }),
-                    isString(iconRight) ? React.createElement(ButtonIcon, { ml: iconRightMl, name: iconRight }) : iconRight))))));
+                    isString(iconRight) ? React.createElement(ButtonIcon, { ml: iconRightMl, name: iconRight }) : iconRight)),
+                isDropDown && React.createElement(ButtonIcon, { name: "falAngleDown" })))));
 });
 Button.Icon = ButtonIcon;
 Button.Text = ButtonText;

package/dist/esm/copyToClipboard/copyToClipboard.d.ts

@@ -0,0 +1,12 @@
+import { CopyToClipboardProps } from './copyToClipboard.types';
+/**
+ * A helper button component.
+ *
+ * Copies the provided text to clipboard.
+ *
+ * Copying is available only for a secure environment (https://), otherwise the button is disabled.
+ *
+ */
+export declare const CopyToClipboard: import("../core").VuiComponent<"button", CopyToClipboardProps>;
+export default CopyToClipboard;
+//# sourceMappingURL=copyToClipboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copyToClipboard.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/copyToClipboard.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAG9D;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,gEAiB1B,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/dist/esm/copyToClipboard/copyToClipboard.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Button from '../button';
+import { vui } from '../core';
+import { cs } from '../utils';
+import { useCopyToClipboard } from './useCopyToClipboard';
+/**
+ * A helper button component.
+ *
+ * Copies the provided text to clipboard.
+ *
+ * Copying is available only for a secure environment (https://), otherwise the button is disabled.
+ *
+ */
+export const CopyToClipboard = vui((props, ref) => {
+    const { disabled, copyText, className, size = 'xs', variant = 'text', ...rest } = props;
+    const { copy, isCopyDisabled } = useCopyToClipboard(copyText);
+    return (React.createElement(Button, { className: cs('vui-copy-to-clipboard', className), disabled: disabled || isCopyDisabled, icon: "falCopy", onClick: () => copy(), ref: ref, size: size, variant: variant, ...rest }));
+});
+export default CopyToClipboard;

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

@@ -0,0 +1,9 @@
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type CopyToClipboardProps = SystemProps & ThemingProps<'Button'> & {
+    /** Text string for copying */
+    copyText: string;
+    /** Button size @default "xs" */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+//# sourceMappingURL=copyToClipboard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copyToClipboard.types.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/copyToClipboard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,oBAAoB,GAAG,WAAW,GAC5C,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACjC,CAAA"}

package/dist/esm/copyToClipboard/copyToClipboard.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export * from './copyToClipboard';
+export { default } from './copyToClipboard';
+export * from './copyToClipboard.types';
+export * from './useCopyToClipboard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA"}

package/dist/esm/copyToClipboard/index.js

@@ -0,0 +1,4 @@
+export * from './copyToClipboard';
+export { default } from './copyToClipboard';
+export * from './copyToClipboard.types';
+export * from './useCopyToClipboard';

package/dist/esm/copyToClipboard/useCopyToClipboard.d.ts

@@ -0,0 +1,5 @@
+export declare const useCopyToClipboard: (copyText: string) => {
+    copy: () => void;
+    isCopyDisabled: boolean;
+};
+//# sourceMappingURL=useCopyToClipboard.d.ts.map

package/dist/esm/copyToClipboard/useCopyToClipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopyToClipboard.d.ts","sourceRoot":"","sources":["../../../src/copyToClipboard/useCopyToClipboard.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,aAAc,MAAM;;;CAYlD,CAAA"}

package/dist/esm/copyToClipboard/useCopyToClipboard.js

@@ -0,0 +1,14 @@
+import { useToast } from '../toast';
+export const useCopyToClipboard = (copyText) => {
+    const { showSuccess, showError } = useToast();
+    const isCopyDisabled = !window?.navigator?.clipboard?.writeText;
+    const copy = () => {
+        if (!isCopyDisabled) {
+            window?.navigator?.clipboard
+                .writeText?.(copyText)
+                .then(() => showSuccess(`Copied to clipboard: ${copyText}`))
+                .catch(() => showError('Copy failed'));
+        }
+    };
+    return { copy, isCopyDisabled };
+};

package/dist/esm/index.d.ts

@@ -6,6 +6,7 @@ export * from './buttonGroup';
 export * from './buttonToggleGroup';
 export * from './card';
 export * from './checkbox';
+export * from './copyToClipboard';
 export * from './core';
 export * from './dialog';
 export * from './divider';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export * from './buttonGroup';
 export * from './buttonToggleGroup';
 export * from './card';
 export * from './checkbox';
+export * from './copyToClipboard';
 export * from './core';
 export * from './dialog';
 export * from './divider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.7.0-beta.1",
+  "version": "1.7.0-beta.3",
   "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

@@ -16,7 +16,7 @@ export const AccordionBase = styled.divBox`
 
 /** Allows to show and hide sections of related content on a page. */
 export const Accordion = vui<'div', AccordionProps>((props, ref) => {
-  const { children, className, orientation = 'vertical', items, size, ...rest } = props
+  const { children, className, itemTitleHoverBg = 'blue.10', items, orientation = 'vertical', size, ...rest } = props
   const styles = useStyleConfig('Accordion', props)
 
   const context = useMemo(() => filterUndefined({ size }), [size])
@@ -29,11 +29,15 @@ export const Accordion = vui<'div', AccordionProps>((props, ref) => {
         {orientation === 'vertical' ? (
           <List w="100%">
             {items
-              ? items?.map?.((item: AccordionItemProps, key: number) => <AccordionItem key={key} {...item} />)
+              ? items?.map?.((item: AccordionItemProps, key: number) => (
+                  <AccordionItem itemTitleHoverBg={itemTitleHoverBg} key={key} {...item} />
+                ))
               : children}
           </List>
         ) : items ? (
-          items?.map?.((item: AccordionItemProps, key: number) => <AccordionItemHorizontal key={key} {...item} />)
+          items?.map?.((item: AccordionItemProps, key: number) => (
+            <AccordionItemHorizontal itemTitleHoverBg={itemTitleHoverBg} key={key} {...item} />
+          ))
         ) : (
           children
         )}

package/src/accordion/accordion.types.ts

@@ -10,6 +10,8 @@ export type AccordionProps = SystemProps &
   ThemingProps<'Accordion'> & {
     /** Items orientation @default 'vertical' */
     orientation?: Orientation
+    /** Hover color for the item title @default "blue.10" */
+    itemTitleHoverBg?: string
     items?: AccordionItemProps[]
   }
 
@@ -31,6 +33,8 @@ export type AccordionItemProps = ListItemProps & {
   content?: ReactNode
   /** Collapsed state */
   collapsed?: boolean
+  /** Hover color for the item title @default "blue.10" */
+  itemTitleHoverBg?: string
   /** Title */
   title?: string | ReactNode
   /** Collapse change state */

package/src/accordion/accordionItem.tsx

@@ -10,7 +10,18 @@ import { useAccordionContext } from './context'
 
 /** An accordion item. */
 export const AccordionItem = (props: AccordionItemProps) => {
-  const { className, children, id, content, disabled, title, collapsed, onToggle, ...rest } = omitThemingProps(props)
+  const {
+    className,
+    children,
+    collapsed,
+    content,
+    disabled,
+    id,
+    itemTitleHoverBg = 'blue.10',
+    title,
+    onToggle,
+    ...rest
+  } = omitThemingProps(props)
   const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)
 
   const styles = useStyleConfig('Accordion', useAccordionContext())
@@ -40,7 +51,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
     >
       <Box
         cursor={disabled ? 'not-allowed' : 'pointer'}
-        hoverBg="blue.10"
+        hoverBg={itemTitleHoverBg}
         justifyContent="space-between"
         onClick={toggle}
         px={2}

package/src/accordion/accordionItemHorizontal.tsx

@@ -7,9 +7,20 @@ import { AccordionItemProps } from './accordion.types'
 import AccordionItemArrow from './accordionItemArrow'
 import { useAccordionContext } from './context'
 
-/** [Beta] An accordion item (horizontal orientation). */
+/** An accordion item (horizontal orientation). */
 export const AccordionItemHorizontal = (props: AccordionItemProps) => {
-  const { className, children, id, content, disabled, title, collapsed, onToggle, ...rest } = omitThemingProps(props)
+  const {
+    className,
+    children,
+    collapsed,
+    content,
+    disabled,
+    id,
+    itemTitleHoverBg = 'blue.10',
+    title,
+    onToggle,
+    ...rest
+  } = omitThemingProps(props)
   const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)
 
   const styles = useStyleConfig('Accordion', useAccordionContext())
@@ -48,7 +59,7 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
       <Box
         {...styles.item}
         cursor={cursor}
-        hoverBg="blue.10"
+        hoverBg={itemTitleHoverBg}
         justifyContent="space-between"
         minH={styles.item.minH}
         onClick={toggle}

package/src/button/button.tsx

@@ -135,7 +135,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
         focusRing={3}
         h={h}
         pl={pl}
-        pr={pr}
+        pr={isDropDown ? 0 : pr}
         ref={ref}
         type="button"
         variant={variant}
@@ -152,18 +152,16 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
 
         <Content>
           {isString(icon) ? <ButtonIcon name={icon} /> : icon}
-
           {!icon && (
             <>
               {isString(iconLeft) ? <ButtonIcon mr={isDropDown ? 0 : iconLeftMr} name={iconLeft} /> : iconLeft}
 
               {children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text)}
 
-              {isDropDown && <ButtonIcon name="falAngleDown" />}
-
               {isString(iconRight) ? <ButtonIcon ml={iconRightMl} name={iconRight} /> : iconRight}
             </>
           )}
+          {isDropDown && <ButtonIcon name="falAngleDown" />}
         </Content>
       </ButtonBase>
     </ButtonProvider>

package/src/copyToClipboard/copyToClipboard.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import Button from '../button'
+import { vui } from '../core'
+import { cs } from '../utils'
+import { CopyToClipboardProps } from './copyToClipboard.types'
+import { useCopyToClipboard } from './useCopyToClipboard'
+
+/**
+ * A helper button component.
+ *
+ * Copies the provided text to clipboard.
+ *
+ * Copying is available only for a secure environment (https://), otherwise the button is disabled.
+ *
+ */
+export const CopyToClipboard = vui<'button', CopyToClipboardProps>((props, ref) => {
+  const { disabled, copyText, className, size = 'xs', variant = 'text', ...rest } = props
+
+  const { copy, isCopyDisabled } = useCopyToClipboard(copyText)
+
+  return (
+    <Button
+      className={cs('vui-copy-to-clipboard', className)}
+      disabled={disabled || isCopyDisabled}
+      icon="falCopy"
+      onClick={() => copy()}
+      ref={ref}
+      size={size}
+      variant={variant}
+      {...rest}
+    />
+  )
+})
+
+export default CopyToClipboard

package/src/copyToClipboard/copyToClipboard.types.ts

@@ -0,0 +1,10 @@
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type CopyToClipboardProps = SystemProps &
+  ThemingProps<'Button'> & {
+    /** Text string for copying */
+    copyText: string
+    /** Button size @default "xs" */
+    size?: 'xs' | 'sm' | 'md' | 'lg'
+  }

package/src/copyToClipboard/index.ts

@@ -0,0 +1,4 @@
+export * from './copyToClipboard'
+export { default } from './copyToClipboard'
+export * from './copyToClipboard.types'
+export * from './useCopyToClipboard'

package/src/copyToClipboard/useCopyToClipboard.ts

@@ -0,0 +1,15 @@
+import { useToast } from '../toast'
+
+export const useCopyToClipboard = (copyText: string) => {
+  const { showSuccess, showError } = useToast()
+  const isCopyDisabled = !window?.navigator?.clipboard?.writeText
+  const copy = () => {
+    if (!isCopyDisabled) {
+      window?.navigator?.clipboard
+        .writeText?.(copyText)
+        .then(() => showSuccess(`Copied to clipboard: ${copyText}`))
+        .catch(() => showError('Copy failed'))
+    }
+  }
+  return { copy, isCopyDisabled }
+}

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './buttonGroup'
 export * from './buttonToggleGroup'
 export * from './card'
 export * from './checkbox'
+export * from './copyToClipboard'
 export * from './core'
 export * from './dialog'
 export * from './divider'