aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
77 lines (74 loc) • 2.15 kB
JavaScript
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import styles from './SpeedDialIcon.module.css.js';
// Default icons
const DefaultIcon = () => jsx("svg", {
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: jsx("path", {
d: "M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z",
fill: "currentColor"
})
});
const DefaultOpenIcon = () => jsx("svg", {
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: jsx("path", {
d: "M19 13H5V11H19V13Z",
fill: "currentColor"
})
});
const isOpenIconProvided = props => Object.prototype.hasOwnProperty.call(props, 'openIcon');
function SpeedDialIconComponent(props, ref) {
const {
className,
style,
icon,
openIcon,
open = false,
...rest
} = props;
// Default icons
const iconToShow = icon || jsx(DefaultIcon, {});
const openIconToShow = openIcon || jsx(DefaultOpenIcon, {});
// If only using one icon, rotate it
if (!openIcon && !isOpenIconProvided(props)) {
return jsx("div", {
ref: ref,
className: cn('glass-speed-dial-icon', styles.icon, open && styles.iconOpen, className),
style: style,
...rest,
children: iconToShow
});
}
// Using two separate icons for open/closed states
return jsxs("div", {
ref: ref,
className: cn('glass-speed-dial-icon', styles.iconContainer, className),
style: style,
...rest,
children: [jsx("div", {
className: cn(styles.iconLayer, !open && styles.iconLayerActive),
children: iconToShow
}), jsx("div", {
className: cn(styles.iconLayer, open && styles.iconLayerActive),
children: openIconToShow
})]
});
}
/**
* SpeedDialIcon Component
*
* An icon component for the SpeedDial that transitions between open and closed states.
*/
const SpeedDialIcon = /*#__PURE__*/forwardRef(SpeedDialIconComponent);
export { SpeedDialIcon, SpeedDialIcon as default };
//# sourceMappingURL=SpeedDialIcon.js.map