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
66 lines
No EOL
1.9 KiB
JavaScript
66 lines
No EOL
1.9 KiB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
|
|
import styled, { css } from '@lilith/ui-styled-components';
|
|
import { MultiFABContext } from '../context/MultiFABContext';
|
|
const MultiFABContainer = styled.div `
|
|
position: fixed;
|
|
bottom: 16px;
|
|
display: flex;
|
|
gap: 1rem;
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
|
|
/* Children should have pointer events */
|
|
& > * {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Horizontal positioning based on position prop */
|
|
${({ $position }) => {
|
|
if ($position === 'left') {
|
|
return css `
|
|
left: 16px;
|
|
`;
|
|
}
|
|
if ($position === 'center') {
|
|
return css `
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
`;
|
|
}
|
|
return css `
|
|
right: 16px;
|
|
`;
|
|
}}
|
|
|
|
/* Layout direction */
|
|
${({ $layout }) => $layout === 'H'
|
|
? css `
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
`
|
|
: css `
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
`}
|
|
|
|
${({ $animationStyle }) => $animationStyle === 'genie' &&
|
|
css `
|
|
/* Genie animation styles can be added here */
|
|
/* This would apply to child FABs during expansion */
|
|
`}
|
|
|
|
@media (max-width: 480px) {
|
|
gap: 0.75rem;
|
|
}
|
|
`;
|
|
// =============================================================================
|
|
// Component
|
|
// =============================================================================
|
|
export const MultiFABRoot = ({ children, layout = 'H', position = 'right', animationStyle, className, testId, }) => {
|
|
const contextValue = {
|
|
isInMultiFAB: true,
|
|
containerPosition: position,
|
|
};
|
|
return (_jsx(MultiFABContext.Provider, { value: contextValue, children: _jsx(MultiFABContainer, { "$layout": layout, "$position": position, "$animationStyle": animationStyle, className: className, "data-testid": testId, children: children }) }));
|
|
};
|
|
//# sourceMappingURL=MultiFABRoot.js.map
|