@navinc/base-react-components
Version:
Nav's Pattern Library
62 lines • 4.09 kB
JavaScript
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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled } from 'styled-components';
import { CopyOnSurface } from '../copy/index.js';
import { DialogInternal, DialogRoot, DialogTrigger, DialogContent } from './dialog.js';
import { elevation4 } from '../../themes/elevation.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
const ConfirmationButtonsContainer = styled.div.withConfig({ displayName: "brc-sc-ConfirmationButtonsContainer", componentId: "brc-sc-1rohy8a" }) `
padding: ${({ theme }) => `${theme.spacing.space100} ${theme.spacing.space300} ${theme.spacing.space300} ${theme.spacing.space300}`};
`;
const ConfirmationLayout = styled.div.withConfig({ displayName: "brc-sc-ConfirmationLayout", componentId: "brc-sc-1y3kzpf" }) `
padding: ${({ theme }) => theme.spacing.space300} ${({ theme }) => theme.spacing.space300}
${({ theme }) => theme.spacing.space200};
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing.space100};
`;
const ConfirmationContainer = 'div';
const FixedCenter = styled.div.withConfig({ displayName: "brc-sc-FixedCenter", componentId: "brc-sc-1bn3yqk" }) `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: ${({ theme }) => theme.spacing.space200};
max-width: 100%;
z-index: 1001;
`;
const CenteredContainer = styled.div.withConfig({ displayName: "brc-sc-CenteredContainer", componentId: "brc-sc-ryirac" }) `
${elevation4}
background-color: ${({ theme }) => theme.surfaceContainer};
border-radius: ${({ theme }) => theme.radius.radius400};
overflow: auto;
width: ${({ $width }) => $width || '420px'};
max-width: 100%;
`;
const Confirmation = styledBackwardsCompatibility((_a) => {
var { title, description, buttons } = _a, props = __rest(_a, ["title", "description", "buttons"]);
return (_jsxs(ConfirmationContainer, Object.assign({}, props, { children: [_jsxs(ConfirmationLayout, { children: [title && (_jsx(DialogInternal.Title, { asChild: true, children: _jsx(CopyOnSurface, { size: "title3", children: title }) })), description && (_jsx(DialogInternal.Description, { asChild: true, children: _jsx(CopyOnSurface, { size: "body1", children: description }) }))] }), _jsx(ConfirmationButtonsContainer, { children: buttons })] })));
});
export const CenteredDialogContainer = (_a) => {
var { children, contentOverlayStyle } = _a, props = __rest(_a, ["children", "contentOverlayStyle"]);
return (_jsx(FixedCenter, { style: contentOverlayStyle, children: _jsx(CenteredContainer, Object.assign({}, props, { children: children })) }));
};
export const CenterDialog = styledBackwardsCompatibility((_a) => {
var { open, defaultOpen, onOpenChange, modal, trigger, width, children, overlayStyle } = _a, props = __rest(_a, ["open", "defaultOpen", "onOpenChange", "modal", "trigger", "width", "children", "overlayStyle"]);
return (_jsxs(DialogRoot, { open, defaultOpen, onOpenChange, modal, children: [trigger && _jsx(DialogTrigger, { asChild: true, children: trigger }), _jsx(DialogContent, { overlayStyle: overlayStyle, children: _jsx(CenteredDialogContainer, Object.assign({ "$width": width }, props, { children: children })) })] }));
});
export const ConfirmationDialog = styledBackwardsCompatibility((_a) => {
var { title, description, buttons } = _a, props = __rest(_a, ["title", "description", "buttons"]);
return (_jsx(CenterDialog, Object.assign({}, props, { children: _jsx(Confirmation, { title, description, buttons }) })));
});
//# sourceMappingURL=confirmation-dialog.js.map