kwikid-components-react
Version:
KwikID's Component Library in React
766 lines (760 loc) • 26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Positions = exports.Interactive = exports.ImageZoom = exports.Enhanced = exports.CustomStyling = void 0;
var _react = _interopRequireWildcard(require("react"));
var _Button = _interopRequireDefault(require("../button/Button"));
var _Dialog = _interopRequireDefault(require("../dialogs/Dialog"));
var _Messages = _interopRequireDefault(require("../messages/Messages"));
var _Tooltip = _interopRequireDefault(require("./Tooltip"));
var _Tooltip2 = require("./Tooltip.constants");
var _Tooltip3 = require("./Tooltip.defaults");
var _Tooltip4 = require("./Tooltip.definition");
const _excluded = ["open"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/**
* The Tooltip component provides contextual information when users hover over, focus on,
* or tap an element. It helps to explain features, provide additional context, or show
* enlarged views of content. This enhanced version offers improved aesthetics and better
* accessibility.
*
* ## Usage
*
* ```jsx
* import { KwikUITooltip } from 'react-kwikui';
*
* <KwikUITooltip
* position="top"
* variant="contained"
* open={isTooltipOpen}
* >
* <button>Hover over me</button>
* </KwikUITooltip>
* ```
*/
var _default = exports.default = {
title: "KwikUI/Overlay/Tooltip",
component: _Tooltip.default,
parameters: {
componentSubtitle: "Informative popup that appears when hovering over an element",
docs: {
description: {
component: "Tooltips display informative text when users hover over, focus on, or tap an element. They can be used to provide contextual help or to magnify content for better visibility. The enhanced version provides improved styling, accessibility, and integration with other KwikUI components."
}
},
a11y: {
config: {
rules: [{
id: "aria-tooltip",
enabled: true
}]
}
}
},
argTypes: {
variant: {
control: "radio",
options: _Tooltip2.KWIKUI_TOOLTIP_VARIANT_OPTIONS,
description: "The variant of the tooltip (fullscreen or contained)",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS.variant
}
}
},
position: {
control: "radio",
options: _Tooltip2.KWIKUI_TOOLTIP_POSITION_OPTIONS,
description: "The position of the tooltip relative to its target",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS.position
}
}
},
open: {
control: "boolean",
description: "Controls whether the tooltip is displayed",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS.open
}
}
},
closeOnClickOutside: {
control: "boolean",
description: "Whether the tooltip should close when clicking outside of it",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS.closeOnClickOutside
}
}
},
showCloseButton: {
control: "boolean",
description: "Whether to show a close button on the tooltip",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS.showCloseButton
}
}
},
enlargeFactor: {
control: {
type: "number",
min: 1,
max: 5,
step: 0.1
},
description: "Factor by which content is enlarged in the tooltip",
table: {
type: {
summary: "number"
},
defaultValue: {
summary: _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS.enlargeFactor
}
}
},
scalingFactor: {
control: {
type: "number",
min: 1,
max: 10,
step: 0.5
},
description: "Factor by which content is scaled in the tooltip",
table: {
type: {
summary: "number"
},
defaultValue: {
summary: _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS.scalingFactor
}
}
},
isInternalZoom: {
control: "boolean",
description: "Whether to use internal zoom for the tooltip content",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS.isInternalZoom
}
}
},
isExternalCheckCondition: {
control: "boolean",
description: "Whether to use external condition for tooltip visibility",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS.isExternalCheckCondition
}
}
},
id: {
control: "text",
description: "The ID of the tooltip element",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS.id
}
}
},
customStyles: {
control: "object",
description: "Custom styles to apply to different parts of the tooltip",
table: {
type: {
summary: "object"
},
defaultValue: {
summary: "{ container: {}, childWrapper: {}, tooltipContainerWrapper: {}, tooltipWrapper: {} }"
}
}
},
children: {
description: "The content to which the tooltip is attached",
table: {
type: {
summary: "ReactNode"
}
}
}
}
};
/**
* Template for rendering the Tooltip component with enhanced styling
*/
const Template = _ref => {
let {
open
} = _ref,
args = _objectWithoutProperties(_ref, _excluded);
const [localOpen, setLocalOpen] = (0, _react.useState)(open);
(0, _react.useEffect)(() => {
setLocalOpen(open);
}, [open]);
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "3rem",
display: "flex",
flexDirection: "column",
gap: "3rem",
maxWidth: "800px",
margin: "0 auto"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: "#333"
}
}, "Enhanced Button with Tooltip"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, _extends({}, args, {
open: localOpen,
position: _Tooltip4.IKwikUITooltipPosition.TOP
}), /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "primary",
size: "m",
shape: "rounded"
}, "Hover for Information"))), /*#__PURE__*/_react.default.createElement("p", {
style: {
marginTop: "1rem",
fontSize: "0.875rem",
color: "#666"
}
}, "This example demonstrates a tooltip attached to a KwikUIButton component. The tooltip appears above the button when hovering.")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: "#333"
}
}, "Interactive Message with Tooltip"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block",
width: "100%"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, _extends({}, args, {
open: localOpen,
position: _Tooltip4.IKwikUITooltipPosition.RIGHT,
customStyles: {
tooltipContainerWrapper: {
maxWidth: "320px"
}
}
}), /*#__PURE__*/_react.default.createElement("div", {
style: {
cursor: "help"
}
}, /*#__PURE__*/_react.default.createElement(_Messages.default, {
messages: [{
type: "info",
message: "Hover over this message for more details"
}],
size: "m"
})))), /*#__PURE__*/_react.default.createElement("p", {
style: {
marginTop: "1rem",
fontSize: "0.875rem",
color: "#666"
}
}, "This example shows how a tooltip can provide additional context for an informational message. Hover over the info message to see more details.")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: "#333"
}
}, "Image with Zoom Tooltip"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, _extends({}, args, {
open: localOpen,
position: _Tooltip4.IKwikUITooltipPosition.BOTTOM,
isInternalZoom: true,
scalingFactor: 2.5
}), /*#__PURE__*/_react.default.createElement("img", {
src: "https://www.olivseo.com/wp-content/uploads/2016/10/photodune-13770524-online-auction-gavel-on-laptop-3d-s-min.jpg",
alt: "Online auction gavel on laptop",
style: {
maxWidth: "300px",
borderRadius: "8px",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
border: "1px solid #eee"
}
}))), /*#__PURE__*/_react.default.createElement("p", {
style: {
marginTop: "1rem",
fontSize: "0.875rem",
color: "#666"
}
}, "This example demonstrates the internal zoom functionality. Hover over the image to see a magnified view, and click to open in fullscreen dialog.")));
};
/**
* Default tooltip implementation with enhanced styling
*/
const Enhanced = exports.Enhanced = Template.bind({});
Enhanced.args = _objectSpread(_objectSpread({}, _Tooltip3.KWIKUI_TOOLTIP_DEFAULTS), {}, {
position: _Tooltip4.IKwikUITooltipPosition.TOP,
variant: "contained",
open: true,
customStyles: {
container: {
border: "1px solid var(--kwikui-color-neutral-200, #e2e8f0)",
borderRadius: "var(--kwikui-radius-m)",
boxShadow: "var(--kwikui-shadow-md, 0 4px 8px rgba(0, 0, 0, 0.08))"
}
}
});
Enhanced.parameters = {
docs: {
description: {
story: "Enhanced tooltip with improved styling and positioning."
}
}
};
/**
* Tooltip positions demonstrated with visual cues
*/
const Positions = () => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "5rem",
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: "4rem",
placeItems: "center",
maxWidth: "900px",
margin: "0 auto"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: "#333",
textAlign: "center"
}
}, "Top Position"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block",
position: "relative"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: _Tooltip4.IKwikUITooltipPosition.TOP,
open: true,
customStyles: {
tooltipContainerWrapper: {
backgroundColor: "#fff",
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
border: "1px solid #e2e8f0"
}
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "secondary",
shape: "rounded"
}, "Tooltip Above")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: "#333",
textAlign: "center"
}
}, "Bottom Position"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block",
position: "relative"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: _Tooltip4.IKwikUITooltipPosition.BOTTOM,
open: true,
customStyles: {
tooltipContainerWrapper: {
backgroundColor: "#fff",
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
border: "1px solid #e2e8f0"
}
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "secondary",
shape: "rounded"
}, "Tooltip Below")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: "#333",
textAlign: "center"
}
}, "Left Position"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block",
position: "relative"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: _Tooltip4.IKwikUITooltipPosition.LEFT,
open: true,
customStyles: {
tooltipContainerWrapper: {
backgroundColor: "#fff",
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
border: "1px solid #e2e8f0"
}
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "secondary",
shape: "rounded"
}, "Tooltip Left")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: "#333",
textAlign: "center"
}
}, "Right Position"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block",
position: "relative"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: _Tooltip4.IKwikUITooltipPosition.RIGHT,
open: true,
customStyles: {
tooltipContainerWrapper: {
backgroundColor: "#fff",
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
border: "1px solid #e2e8f0"
}
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "secondary",
shape: "rounded"
}, "Tooltip Right")))));
};
exports.Positions = Positions;
Positions.parameters = {
docs: {
description: {
story: "Demonstrates the four positions available for tooltips (top, right, bottom, left)."
}
}
};
/**
* Interactive example to showcase tooltip functionality
*/
const Interactive = () => {
const [isTooltipOpen, setIsTooltipOpen] = (0, _react.useState)(false);
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "3rem",
display: "flex",
flexDirection: "column",
gap: "2rem",
alignItems: "center",
maxWidth: "800px",
margin: "0 auto"
}
}, /*#__PURE__*/_react.default.createElement("h3", {
style: {
color: "#333"
}
}, "Interactive Tooltip Example"), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: "1rem"
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "primary",
shape: "rounded",
onClick: () => setIsTooltipOpen(!isTooltipOpen)
}, isTooltipOpen ? "Hide Tooltip" : "Show Tooltip")), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "2rem",
border: "1px dashed #ccc",
borderRadius: "8px"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: _Tooltip4.IKwikUITooltipPosition.TOP,
open: isTooltipOpen,
isExternalCheckCondition: true,
customStyles: {
tooltipContainerWrapper: {
backgroundColor: "#fff",
boxShadow: "0 8px 16px rgba(0, 0, 0, 0.1)",
border: "1px solid #e2e8f0",
padding: "1rem",
maxWidth: "300px"
}
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "1.5rem",
backgroundColor: "#f7f9fc",
borderRadius: "8px",
textAlign: "center",
width: "300px"
}
}, /*#__PURE__*/_react.default.createElement("p", null, "This tooltip is controlled by the button above"), /*#__PURE__*/_react.default.createElement("p", {
style: {
fontSize: "0.875rem",
color: "#666",
marginTop: "0.5rem"
}
}, "Try clicking the button to toggle visibility")))), /*#__PURE__*/_react.default.createElement("p", {
style: {
fontSize: "0.875rem",
color: "#666",
marginTop: "1rem",
maxWidth: "500px",
textAlign: "center"
}
}, "This example demonstrates how to control the tooltip visibility programmatically. The tooltip's visibility is tied to state controlled by the button click."));
};
exports.Interactive = Interactive;
Interactive.parameters = {
docs: {
description: {
story: "Interactive example showing how to control tooltips programmatically."
}
}
};
/**
* Custom styled tooltips
*/
const CustomStyling = () => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "3rem",
display: "flex",
flexDirection: "column",
gap: "3rem",
maxWidth: "800px",
margin: "0 auto"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: "#333"
}
}, "Modern Style"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: _Tooltip4.IKwikUITooltipPosition.TOP,
open: true,
customStyles: {
tooltipContainerWrapper: {
backgroundColor: "#fff",
boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1)",
border: "1px solid #f0f0f0",
borderRadius: "12px",
padding: "1rem"
}
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "primary",
shape: "rounded"
}, "Modern Style")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: "#333"
}
}, "Dark Theme"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: _Tooltip4.IKwikUITooltipPosition.TOP,
open: true,
customStyles: {
tooltipContainerWrapper: {
backgroundColor: "#333",
color: "#fff",
boxShadow: "0 8px 16px rgba(0, 0, 0, 0.2)",
border: "1px solid #444",
borderRadius: "8px"
},
tooltipWrapper: {
color: "#fff"
}
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "secondary",
shape: "rounded"
}, "Dark Theme")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", {
style: {
marginBottom: "1rem",
color: "#333"
}
}, "Gradient Style"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "inline-block"
}
}, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: _Tooltip4.IKwikUITooltipPosition.TOP,
open: true,
customStyles: {
tooltipContainerWrapper: {
background: "linear-gradient(135deg, #6e8efb, #a777e3)",
color: "#fff",
boxShadow: "0 8px 20px rgba(110, 142, 251, 0.3)",
border: "none",
borderRadius: "8px"
},
tooltipWrapper: {
color: "#fff"
}
}
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "primary",
shape: "rounded"
}, "Gradient Style")))));
};
exports.CustomStyling = CustomStyling;
CustomStyling.parameters = {
docs: {
description: {
story: "Examples of custom styling options for tooltips using the customStyles prop."
}
}
};
/**
* Image zoom functionality
*/
const ImageZoom = () => {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "3rem",
display: "flex",
flexDirection: "column",
gap: "3rem",
alignItems: "center",
maxWidth: "800px",
margin: "0 auto"
}
}, /*#__PURE__*/_react.default.createElement("h3", {
style: {
color: "#333"
}
}, "Image Zoom Functionality"), /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
gap: "3rem",
flexWrap: "wrap",
justifyContent: "center"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
style: {
marginBottom: "1rem",
color: "#555",
textAlign: "center"
}
}, "Hover Zoom"), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
position: _Tooltip4.IKwikUITooltipPosition.BOTTOM,
open: true,
isInternalZoom: true,
scalingFactor: 2.5,
customStyles: {
tooltipContainerWrapper: {
backgroundColor: "#fff",
boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1)",
border: "1px solid #eee",
borderRadius: "8px",
padding: "0.5rem"
}
}
}, /*#__PURE__*/_react.default.createElement("img", {
src: "https://www.olivseo.com/wp-content/uploads/2016/10/photodune-13770524-online-auction-gavel-on-laptop-3d-s-min.jpg",
alt: "Online auction gavel",
style: {
width: "200px",
borderRadius: "8px",
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)"
}
})), /*#__PURE__*/_react.default.createElement("p", {
style: {
marginTop: "1rem",
fontSize: "0.875rem",
color: "#666",
maxWidth: "200px",
textAlign: "center"
}
}, "Hover over the image to see magnified view, click for fullscreen")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
style: {
marginBottom: "1rem",
color: "#555",
textAlign: "center"
}
}, "Dialog View"), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
open: true,
showCloseButton: true,
variant: "contained"
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
position: "relative",
width: "auto",
maxWidth: "300px",
height: "auto",
margin: "0"
}
}, /*#__PURE__*/_react.default.createElement("img", {
src: "https://www.olivseo.com/wp-content/uploads/2016/10/photodune-13770524-online-auction-gavel-on-laptop-3d-s-min.jpg",
alt: "Auction gavel closeup",
style: {
width: "100%",
borderRadius: "4px"
}
}))), /*#__PURE__*/_react.default.createElement("p", {
style: {
marginTop: "1rem",
fontSize: "0.875rem",
color: "#666",
maxWidth: "200px",
textAlign: "center"
}
}, "This shows the dialog that opens when clicking the zoomed image"))), /*#__PURE__*/_react.default.createElement("p", {
style: {
fontSize: "0.875rem",
color: "#666",
marginTop: "1rem",
maxWidth: "600px",
textAlign: "center"
}
}, "The tooltip component offers built-in zoom functionality for images. Users can hover over the image to see a magnified view following their cursor, and click to open the image in a dialog."));
};
exports.ImageZoom = ImageZoom;
ImageZoom.parameters = {
docs: {
description: {
story: "Demonstrates the image zoom functionality of the tooltip component."
}
}
};