@sphereon/ui-components.ssi-react 0.1.3-unstable.15 → 0.1.3-unstable.19

package/dist/components/fields/SSICheckbox/index.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+export interface IProps {
+    onValueChange?: (isChecked: boolean) => Promise<void>;
+    initialValue?: boolean;
+    isChecked?: boolean;
+    label?: string | ReactNode;
+    disabled?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    selectedColor?: string;
+    labelColor?: string;
+    checkmarkColor?: string;
+}
+declare const SSICheckbox: FC<IProps>;
+export default SSICheckbox;

package/dist/components/fields/SSICheckbox/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { OpacityStyleEnum, fontColors, selectionElements } from '@sphereon/ui-components.core';
+import { SSICheckboxContainerStyled as Container, SSICheckboxLabelContainerStyled as LabelCaption, SSICheckboxSelectedContainerStyled as SelectedContainer, SSICheckboxUnselectedContainerStyled as UnselectedContainer, } from '../../../styles/components';
+const SSICheckbox = (props) => {
+    const { backgroundColor, borderColor = selectionElements.primaryBorderDark, disabled = false, initialValue = false, label, selectedColor = selectionElements.primaryDark, labelColor = fontColors.light, checkmarkColor = fontColors.dark } = props;
+    const [isChecked, setChecked] = React.useState(initialValue);
+    const value = props.isChecked !== undefined ? props.isChecked : isChecked;
+    const onValueChange = async () => {
+        const { onValueChange } = props;
+        if (disabled) {
+            return;
+        }
+        if (onValueChange) {
+            await onValueChange(!isChecked);
+        }
+        setChecked(!isChecked);
+    };
+    return (_jsxs(Container, { onClick: onValueChange, style: { ...(disabled && { opacity: OpacityStyleEnum.DISABLED }) }, children: [value ? (_jsx(SelectedContainer, { style: { backgroundColor: selectedColor, border: `1px solid ${borderColor}` } })) : (_jsx(UnselectedContainer, { style: { backgroundColor, border: `1px solid ${borderColor}` } })), label &&
+                (typeof label === 'string'
+                    ? _jsx(LabelCaption, { style: { color: labelColor }, children: label })
+                    : label)] }));
+};
+export default SSICheckbox;

package/dist/index.d.ts

@@ -18,6 +18,7 @@ import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
 import SSISecondaryButton from './components/buttons/SSISecondaryButton';
+import SSICheckbox from './components/fields/SSICheckbox';
 export * from './types';
 export * from './styles/components/fonts';
-export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSICheckbox };

package/dist/index.js

@@ -18,6 +18,7 @@ import SSITabView from './components/views/SSITabView';
 import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
 import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
 import SSISecondaryButton from './components/buttons/SSISecondaryButton';
+import SSICheckbox from './components/fields/SSICheckbox';
 export * from './types';
 export * from './styles/components/fonts';
-export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };
+export { SSICredentialCardView, SSICredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSICheckbox };

package/dist/styles/components/components/SSICheckbox/index.d.ts

@@ -0,0 +1,4 @@
+export declare const SSICheckboxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxUnselectedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxSelectedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSICheckboxLabelContainerStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/styles/components/components/SSICheckbox/index.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { SSITextH4LightStyled } from '../../fonts';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+export const SSICheckboxContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+`;
+export const SSICheckboxUnselectedContainerStyled = styled.div `
+  width: 18px;
+  aspect-ratio: 1;
+  border-radius: 4px;
+  border-width: 1px;
+`;
+export const SSICheckboxSelectedContainerStyled = styled.div `
+  width: 18px; 
+  aspect-ratio: 1;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+`;
+export const SSICheckboxLabelContainerStyled = styled(SSITextH4LightStyled) `
+  display: flex;
+  flex-wrap: wrap;
+`;

package/dist/styles/components/components/index.d.ts

@@ -10,3 +10,4 @@ export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
 export * from './SSITabView';
+export * from './SSICheckbox';

package/dist/styles/components/components/index.js

@@ -10,3 +10,4 @@ export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
 export * from './SSITabView';
+export * from './SSICheckbox';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.15+88a373a",
+  "version": "0.1.3-unstable.19+6852c02",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -28,7 +28,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sphereon/ui-components.core": "0.1.3-unstable.15+88a373a",
+    "@sphereon/ui-components.core": "0.1.3-unstable.19+6852c02",
     "@tanstack/react-table": "^8.9.3",
     "styled-components": "^5.3.3"
   },
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "88a373a5f9fb7b863e412030eedc651350c99187"
+  "gitHead": "6852c02ac31e72b4556a910238bec3fd785532ea"
 }