@sphereon/ui-components.ssi-react 0.4.1-next.99 → 0.4.1-unstable.123

package/dist/components/buttons/SSISwitchItem/index.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactElement } from 'react';
+type Props = {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    tooltip?: ReactElement | string;
+    disabled?: boolean;
+    color?: string;
+    labelPosition?: 'left' | 'right';
+};
+declare const SSISwitchItem: FC<Props>;
+export default SSISwitchItem;

package/dist/components/buttons/SSISwitchItem/index.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Switch, Tooltip } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { parseColor } from '@sphereon/ui-components.core';
+const createMaterialSwitch = (color) => styled(Switch)(({ theme }) => ({
+    width: 52,
+    height: 32,
+    padding: 0,
+    '& .MuiSwitch-switchBase': {
+        padding: 4,
+        transitionDuration: '300ms',
+        '&.Mui-checked': {
+            transform: 'translateX(20px)',
+            color: 'var(--color-grey-50)',
+            '& + .MuiSwitch-track': {
+                backgroundColor: parseColor(color),
+                opacity: 1,
+                border: 0,
+            },
+            '&.Mui-disabled + .MuiSwitch-track': {
+                opacity: 0.5,
+            },
+            '& .MuiSwitch-thumb:before': {
+                backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(parseColor(color))}" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')`,
+            },
+        },
+        '&.Mui-focusVisible .MuiSwitch-thumb': {
+            color: parseColor(color),
+            border: '6px solid var(--color-grey-50)',
+        },
+        '&.Mui-disabled .MuiSwitch-thumb': {
+            color: theme.palette.grey[100],
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+            opacity: 0.3,
+        },
+    },
+    '& .MuiSwitch-thumb': {
+        boxSizing: 'border-box',
+        width: 24,
+        height: 24,
+        '&:before': {
+            content: "''",
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            left: 0,
+            top: 0,
+            backgroundRepeat: 'no-repeat',
+            backgroundPosition: 'center',
+        },
+    },
+    '& .MuiSwitch-track': {
+        borderRadius: 16,
+        backgroundColor: 'var(--color-grey-300)',
+        opacity: 1,
+        transition: theme.transitions.create(['background-color'], {
+            duration: 300,
+        }),
+    },
+}));
+const SSISwitchItem = (props) => {
+    const { label, checked, onChange, tooltip, disabled, labelPosition = false, color = 'var(--color-pending-500)' } = props;
+    const [showTooltip, setShowTooltip] = useState(false);
+    const MaterialSwitch = createMaterialSwitch(parseColor(color));
+    const handleChange = (event) => {
+        onChange(event.target.checked);
+    };
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: '12px',
+    };
+    const labelStyle = {
+        fontSize: '14px',
+        fontWeight: 400,
+        color: 'var(--color-grey-800)',
+        letterSpacing: '0.14px',
+    };
+    const content = (_jsxs("div", { style: containerStyle, children: [(labelPosition === 'left' || !labelPosition) && _jsx("span", { style: labelStyle, children: label }), _jsx(MaterialSwitch, { checked: checked, onChange: handleChange, disabled: disabled }), labelPosition === 'right' && _jsx("span", { style: labelStyle, children: label })] }));
+    if (tooltip) {
+        return (_jsx(Tooltip, { title: tooltip, open: showTooltip, onOpen: () => setShowTooltip(true), onClose: () => setShowTooltip(false), arrow: true, children: _jsx("div", { onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), children: content }) }));
+    }
+    return content;
+};
+export default SSISwitchItem;

package/dist/index.d.ts

@@ -61,6 +61,7 @@ import ActivityIcon from './components/assets/icons/Activity';
 import ContactIcon from './components/assets/icons/Contact';
 import BellIcon from './components/assets/icons/Bell';
 import CredentialIcon from './components/assets/icons/Credential';
+import SSISwitchItem from './components/buttons/SSISwitchItem';
 import { Row } from '@tanstack/react-table';
 import './styles/css/tailwind.css';
 import './components/views/FormView/styles.css';
@@ -69,4 +70,4 @@ export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CustomArrayControl, customArrayControlTester, ColorPickerControl, colorPickerControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon, getFormViewAjv };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, Row, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CustomArrayControl, customArrayControlTester, ColorPickerControl, colorPickerControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon, SSISwitchItem, getFormViewAjv };

package/dist/index.js

@@ -61,6 +61,7 @@ import ActivityIcon from './components/assets/icons/Activity';
 import ContactIcon from './components/assets/icons/Contact';
 import BellIcon from './components/assets/icons/Bell';
 import CredentialIcon from './components/assets/icons/Credential';
+import SSISwitchItem from './components/buttons/SSISwitchItem';
 import './styles/css/tailwind.css';
 import './components/views/FormView/styles.css';
 import '@sphereon/ui-components.core/dist/styles/tokens.css';
@@ -68,4 +69,4 @@ export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
 export * from './utils';
-export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CustomArrayControl, customArrayControlTester, ColorPickerControl, colorPickerControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon, getFormViewAjv };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, IconButton, PrimaryButton, SecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, PaginationControls, PaginationControlsProps, DocumentIcon, CrossIcon, ImageIcon, MeatBallsIcon, PencilIcon, ViewIcon, CopyIcon, DeleteIcon, FileSelection, ComboBox, DragAndDropBox, PersonPlaceholder, PassportPhotoControl, passportPhotoControlTester, CustomArrayControl, customArrayControlTester, ColorPickerControl, colorPickerControlTester, CredentialIssuanceWizardView, CredentialViewItem, JSONDataView, TextInputField, WarningImage, FormView, InformationRequestView, ContactViewItem, CapitolIcon, ChevronIcon, ManIcon, LaptopIcon, StoreIcon, RoleIconView, RoleViewItem, Listbox, ActivityIcon, ContactIcon, BellIcon, CredentialIcon, SSISwitchItem, getFormViewAjv };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.4.1-next.99+b88a20e",
+  "version": "0.4.1-unstable.123+89813a0",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -50,7 +50,7 @@
     "@mui/x-date-pickers": "^8.18.0",
     "@sphereon/ssi-sdk.data-store": "0.34.1-feature.SSISDK.45.94",
     "@sphereon/ssi-types": "0.34.1-feature.SSISDK.45.94",
-    "@sphereon/ui-components.core": "0.4.1-next.99+b88a20e",
+    "@sphereon/ui-components.core": "0.4.1-unstable.123+89813a0",
     "@tanstack/react-table": "^8.9.3",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
@@ -72,5 +72,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "b88a20eba2311bb4faecde96f1f81c6e8117caeb"
+  "gitHead": "89813a09c16fe20469c677065467851c696fb9c7"
 }