@lunit/oui 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/components/List/List.utils.js

@@ -0,0 +1,12 @@
+const getPadding = (size) => {
+    if (size === 'large') {
+        return '14px';
+    }
+    if (size === 'medium') {
+        return '10px';
+    }
+    // 'small'
+    return '6px';
+};
+export default getPadding;
+//# sourceMappingURL=List.utils.js.map

package/dist/components/List/ListItem.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ListContext } from '../List/List';
+import { StyledListItem, StyledListItemButton, StyledListItemText, StyledListItemStartSlot, StyledListItemEndSlot, CheckIcon, EmptyIcon, } from './ListItem.styled';
+const ListItem = (({ 
+// Root props
+rootProps, className, classes, style, sx, 
+// Button props
+label, startElement, endElement, selected, ...props }) => {
+    const { size, showCheck } = useContext(ListContext);
+    const checkElement = (() => {
+        if (showCheck) {
+            if (selected) {
+                return _jsx(CheckIcon, {});
+            }
+            return _jsx(EmptyIcon, {});
+        }
+        return null;
+    })();
+    return (_jsx(StyledListItem, { ...rootProps, disablePadding: true, className: className, classes: classes, style: style, sx: sx, children: _jsxs(StyledListItemButton, { ...props, disableRipple: true, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            component: props.component ?? 'span', size: size, selected: selected, children: [checkElement && _jsx(StyledListItemStartSlot, { children: checkElement }), startElement && _jsx(StyledListItemStartSlot, { children: startElement }), _jsx(StyledListItemText, { primary: label }), endElement && _jsx(StyledListItemEndSlot, { children: endElement })] }) }));
+});
+export default ListItem;
+//# sourceMappingURL=ListItem.js.map

package/dist/components/List/ListItem.styled.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItem, ListItemButton, ListItemIcon, ListItemText, styled, typographyClasses, } from '@mui/material';
+import { Check, Dummy } from '../Icons';
+import getPadding from './List.utils';
+export const StyledListItem = styled(ListItem)({
+    width: '100%',
+});
+export const StyledListItemButton = styled(({ size, ...props }) => (_jsx(ListItemButton, { ...props })))(({ theme, size }) => ({
+    borderRadius: '8px',
+    padding: `${getPadding(size)} 8px`,
+    '&.Mui-selected': {
+        background: 'transparent',
+    },
+    '&:hover, &.Mui-selected:hover, &.Mui-focusVisible, &.Mui-selected.Mui-focusVisible': {
+        backgroundColor: theme.palette.neutralGrey[75],
+    },
+}));
+export const slotStyles = {
+    minWidth: '20px',
+    height: '20px',
+    color: 'currentColor',
+    svg: {
+        width: '100%',
+        height: '100%',
+        color: 'currentColor !important',
+    },
+};
+export const StyledListItemText = styled(ListItemText)(({ theme }) => ({
+    margin: 0,
+    [`& .${typographyClasses.body1}`]: {
+        ...theme.typography.body5,
+    },
+}));
+export const StyledListItemStartSlot = styled(ListItemIcon)(({ theme }) => ({
+    ...slotStyles,
+    marginRight: theme.spacing(2),
+}));
+export const StyledListItemEndSlot = styled(ListItemIcon)(({ theme }) => ({
+    ...slotStyles,
+    justifyContent: 'flex-end',
+    marginLeft: theme.spacing(2),
+}));
+export const CheckIcon = styled(Check)({ color: '#fff' });
+export const EmptyIcon = styled(Dummy)({ visibility: 'hidden' });
+//# sourceMappingURL=ListItem.styled.js.map

package/dist/components/List/ListItem.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ListItem.types.js.map

package/dist/components/List/ListItemCaption.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { StyledListItemCaption } from './ListItemCaption.styled';
+export const ListItemCaptionClassName = 'ListItemCaption';
+const ListItemCaption = (props) => {
+    const { className, ...otherProps } = props;
+    return (_jsx(StyledListItemCaption, { ...otherProps, className: clsx(ListItemCaptionClassName, className) }));
+};
+export default ListItemCaption;
+//# sourceMappingURL=ListItemCaption.js.map

package/dist/components/List/ListItemCaption.styled.js

@@ -0,0 +1,7 @@
+import { styled, Typography } from '@mui/material';
+// eslint-disable-next-line import/prefer-default-export
+export const StyledListItemCaption = styled(Typography)(({ theme }) => ({
+    ...theme.typography.body_m1,
+    color: theme.palette.neutralGrey[45],
+}));
+//# sourceMappingURL=ListItemCaption.styled.js.map

package/dist/components/List/ListItemCaption.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ListItemCaption.types.js.map

package/dist/components/List/index.js

@@ -0,0 +1,4 @@
+export { default as List } from './List';
+export { default as ListItem } from './ListItem';
+export { default as ListItemCaption } from './ListItemCaption';
+//# sourceMappingURL=index.js.map

package/dist/components/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { Player } from '@lottiefiles/react-lottie-player';
+import { LoadingOverlay, LoadingIndicatorBox, LoadingMessage, LoadingDetails, } from './LoadingIndicator.styled';
+const DotLoadingAnimation = require('./assets/DotLoadingAnimation.json');
+const DnaLoadingAnimation = require('./assets/DnaLoadingAnimation.json');
+const LoadingIndicator = ({ message, details, loadingAnimation = 'dot', }) => {
+    return (_jsx(LoadingOverlay, { children: _jsxs(LoadingIndicatorBox, { children: [_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation === 'dot' ? DotLoadingAnimation : DnaLoadingAnimation, style: { height: '112px', width: '140px' } }), _jsx(LoadingMessage, { children: message }), _jsx(LoadingDetails, { children: details || (_jsxs(_Fragment, { children: ["Please wait.", _jsx("br", {}), "It may take a few minutes."] })) })] }) }));
+};
+export default LoadingIndicator;
+//# sourceMappingURL=LoadingIndicator.js.map

package/dist/components/LoadingIndicator/LoadingIndicator.styled.js

@@ -0,0 +1,37 @@
+import { Box, styled, Typography } from '@mui/material';
+export const LoadingOverlay = styled(Box)({
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 99999,
+});
+export const LoadingIndicatorBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '440px',
+    height: '360px',
+    padding: `${theme.spacing(13)} ${theme.spacing(4)}`,
+    borderRadius: '12px',
+    backgroundColor: theme.palette.neutralGrey[85],
+    color: theme.palette.neutralGrey[0],
+    boxSizing: 'border-box',
+}));
+export const LoadingMessage = styled(Typography)(({ theme }) => ({
+    ...theme.typography.h8,
+    marginTop: theme.spacing(12),
+    marginBottom: theme.spacing(5),
+}));
+export const LoadingDetails = styled(Typography)(({ theme }) => ({
+    ...theme.typography.body1,
+    textAlign: 'center',
+}));
+//# sourceMappingURL=LoadingIndicator.styled.js.map

package/dist/components/LoadingIndicator/LoadingIndicator.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LoadingIndicator.types.js.map