92903f78a2
Package: @lilith/ui-fab Split from: lilith/ui.git or lilith/build.git Publish workflow: calls lilith/workflows/.forgejo/workflows/publish-npm.yml@main
24 lines
No EOL
2.1 KiB
JavaScript
24 lines
No EOL
2.1 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { AnimatePresence, m } from '@lilith/ui-motion';
|
|
import { useFABContext } from '../hooks/useFABContext';
|
|
import { ToggleOptionButton, ItemLabel } from '../styles';
|
|
export const ToggleButton = ({ options, value, onChange, ariaLabel, className, renderOption, }) => {
|
|
const { isExpanded } = useFABContext();
|
|
// Only render when main FAB is expanded
|
|
if (!isExpanded) {
|
|
return null;
|
|
}
|
|
// Find current and next options
|
|
const currentOption = options.find((o) => o.id === value) ?? options[0];
|
|
const nextOption = options.find((o) => o.id !== value) ?? options[1];
|
|
const handleClick = () => {
|
|
onChange(nextOption.id);
|
|
};
|
|
// Use custom render if provided
|
|
if (renderOption) {
|
|
return (_jsx(AnimatePresence, { mode: "wait", children: renderOption({ option: currentOption, isActive: true, onClick: handleClick }) }));
|
|
}
|
|
// Default rendering - single button showing current option
|
|
return (_jsx(AnimatePresence, { mode: "wait", children: _jsxs(ToggleOptionButton, { className: className, "$active": true, onClick: handleClick, initial: { opacity: 0, scale: 0.8, rotate: -90 }, animate: { opacity: 1, scale: 1, rotate: 0 }, exit: { opacity: 0, scale: 0.8, rotate: 90 }, transition: { duration: 0.15, ease: 'easeInOut' }, whileHover: { scale: 1.1 }, whileTap: { scale: 0.95 }, "aria-label": ariaLabel ?? `${currentOption.label ?? currentOption.id} (click to switch to ${nextOption.label ?? nextOption.id})`, title: `${currentOption.label ?? currentOption.id} (click to switch to ${nextOption.label ?? nextOption.id})`, "data-testid": `fab-toggle-${options[0].id}-${options[1].id}`, "data-value": value, "data-variant": currentOption.variant ?? currentOption.id, children: [_jsx(m.span, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { duration: 0.15 }, style: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: currentOption.icon }, currentOption.id), currentOption.label && _jsx(ItemLabel, { children: currentOption.label })] }, currentOption.id) }));
|
|
};
|
|
//# sourceMappingURL=ToggleButton.js.map
|