@sphereon/ui-components.ssi-react 0.1.1 → 0.1.2-next.11

package/dist/components/assets/icons/SSIAddIcon/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface IProps {
+    size?: number;
+    color?: string;
+}
+declare const SSIAddIcon: FC<IProps>;
+export default SSIAddIcon;

package/dist/components/assets/icons/SSIAddIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const SSIAddIcon = (props) => {
+    const { size = 16, color = fontColors.dark } = props;
+    return (_jsx("div", { style: { width: size, aspectRatio: 1, display: 'flex' }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8 0.5C7.65483 0.5 7.375 0.779833 7.375 1.125V7.37503H1.125C0.779812 7.37503 0.5 7.65484 0.5 8.00003C0.5 8.34519 0.779812 8.62502 1.125 8.62502H7.375V14.875C7.375 15.2202 7.65483 15.5 8 15.5C8.34519 15.5 8.625 15.2202 8.625 14.875V8.62502H14.875C15.2202 8.62502 15.5 8.34519 15.5 8.00003C15.5 7.65484 15.2202 7.37503 14.875 7.37503H8.625V1.125C8.625 0.779833 8.34519 0.5 8 0.5Z", fill: color }) }) }));
+};
+export default SSIAddIcon;

package/dist/components/assets/icons/SSIArrowDownIcon/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface IProps {
+    width?: number;
+    height?: number;
+    color?: string;
+}
+declare const SSIArrowDownIcon: FC<IProps>;
+export default SSIArrowDownIcon;

package/dist/components/assets/icons/SSIArrowDownIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const SSIArrowDownIcon = (props) => {
+    const { width = 16, height = 8, color = fontColors.dark } = props;
+    return (_jsx("div", { style: { width, height, display: 'flex' }, children: _jsx("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.03265 7.74886C8.14951 7.74175 8.26065 7.69465 8.34825 7.61511L15.3133 1.19499C15.367 1.1489 15.411 1.09224 15.4429 1.02837C15.4747 0.964504 15.4937 0.894731 15.4987 0.823204C15.5037 0.751676 15.4946 0.67985 15.4719 0.611995C15.4493 0.54414 15.4135 0.481647 15.3668 0.428216C15.3201 0.374784 15.2634 0.331504 15.2001 0.300961C15.1367 0.270419 15.068 0.253238 14.9981 0.250423C14.9281 0.247608 14.8583 0.259221 14.7928 0.28458C14.7273 0.309939 14.6675 0.348517 14.6168 0.398032L8 6.49492L1.38317 0.398032C1.33252 0.348517 1.27268 0.309939 1.20718 0.28458C1.14169 0.259221 1.07189 0.247597 1.00193 0.250412C0.931963 0.253227 0.863266 0.270419 0.799918 0.300961C0.736569 0.331504 0.679861 0.374784 0.633164 0.428216C0.586466 0.481647 0.550732 0.54414 0.528085 0.611995C0.505437 0.67985 0.496338 0.751676 0.501329 0.823204C0.506319 0.894731 0.525297 0.964504 0.557135 1.02837C0.588973 1.09224 0.633022 1.1489 0.686663 1.19499L7.65174 7.61511C7.70344 7.6621 7.76372 7.69811 7.82911 7.72107C7.89449 7.74403 7.96367 7.75348 8.03265 7.74886Z", fill: color }) }) }));
+};
+export default SSIArrowDownIcon;

package/dist/components/assets/icons/SSIFilterIcon/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface IProps {
+    width?: number;
+    height?: number;
+    color?: string;
+}
+declare const SSIFilterIcon: FC<IProps>;
+export default SSIFilterIcon;

package/dist/components/assets/icons/SSIFilterIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const SSIFilterIcon = (props) => {
+    const { height = 16, width = 18, color = fontColors.dark } = props;
+    return (_jsx("div", { style: { width, height, display: 'flex' }, children: _jsx("svg", { width: "18", height: "16", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.5 1.5H1.5L7.5 8.33222V13.0556L10.5 14.5V8.33222L16.5 1.5Z", stroke: color, strokeOpacity: "0.8", strokeWidth: "1.29412", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+};
+export default SSIFilterIcon;

package/dist/components/assets/icons/SSIProfileIcon/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type Props = {
+    fullName: string;
+    fontColor?: string;
+    backgroundColor?: string;
+};
+declare const ProfileIcon: FC<Props>;
+export default ProfileIcon;

package/dist/components/assets/icons/SSIProfileIcon/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors, getInitials, profileColors } from '@sphereon/ui-components.core';
+import { SSIProfileIconContainerStyled as Container } from '../../../../styles/components/components/SSIProfileIcon';
+import { SSITextH2Styled as ProfileIconText } from '../../../../styles/components';
+const ProfileIcon = (props) => {
+    const { fontColor = fontColors.light, backgroundColor = profileColors['100'], fullName } = props;
+    return (_jsx(Container, { style: { backgroundColor }, children: _jsx(ProfileIconText, { style: { color: fontColor }, children: getInitials(fullName) }) }));
+};
+export default ProfileIcon;

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ButtonIconsEnum } from '../../../types';
+export type Props = {
+    icon: ButtonIconsEnum;
+    onClick: () => Promise<void>;
+    disabled?: boolean;
+    color?: string;
+};
+declare const SSIIconButton: FC<Props>;
+export default SSIIconButton;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SSIAddIcon from '../../assets/icons/SSIAddIcon';
+import SSIFilterIcon from '../../assets/icons/SSIFilterIcon';
+import SSIArrowDownIcon from '../../assets/icons/SSIArrowDownIcon';
+import { ButtonIconsEnum } from '../../../types';
+import { SSIIconButtonContainerStyled as Container } from '../../../styles/components';
+import { fontColors } from '@sphereon/ui-components.core';
+const SSIIconButton = (props) => {
+    const { icon, onClick, disabled = false, color = fontColors.dark } = props;
+    return _jsx(Container, { onClick: onClick, children: getIcon(icon, color) });
+};
+const getIcon = (icon, color) => {
+    switch (icon) {
+        case ButtonIconsEnum.ADD:
+            return _jsx(SSIAddIcon, { color: color });
+        case ButtonIconsEnum.FILTER:
+            return _jsx(SSIFilterIcon, { color: color });
+        case ButtonIconsEnum.ARROW_DOWN:
+            return _jsx(SSIArrowDownIcon, { color: color });
+        default:
+            return _jsx("div", {});
+    }
+};
+export default SSIIconButton;

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ButtonIconsEnum } from '../../../types';
+export type Props = {
+    caption: string;
+    onClick: () => Promise<void>;
+    icon?: ButtonIconsEnum;
+    disabled?: boolean;
+};
+declare const SSIPrimaryButton: FC<Props>;
+export default SSIPrimaryButton;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+import SSIAddIcon from '../../assets/icons/SSIAddIcon';
+import { SSIPrimaryButtonContainerStyled as Container, SSITextH3LightStyled as Caption } from '../../../styles/components';
+import { ButtonIconsEnum } from '../../../types';
+const SSIPrimaryButton = (props) => {
+    const { caption, icon, onClick } = props;
+    return (_jsxs(Container, { onClick: onClick, children: [icon && getIcon(icon, fontColors.light), _jsx(Caption, { children: caption })] }));
+};
+const getIcon = (icon, color) => {
+    switch (icon) {
+        case ButtonIconsEnum.ADD:
+            return _jsx(SSIAddIcon, { color: color });
+        default:
+            return _jsx("div", {});
+    }
+};
+export default SSIPrimaryButton;

package/dist/components/labels/SSITypeLabel/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { LabelTypeEnum } from '../../../types';
+export type Props = {
+    type: LabelTypeEnum;
+};
+declare const SSITypeLabel: FC<Props>;
+export default SSITypeLabel;

package/dist/components/labels/SSITypeLabel/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LabelTypeEnum } from '../../../types';
+import { SSITypeLabelContainerStyled as Container } from '../../../styles/components';
+import { backgroundColors, gradientColors } from '@sphereon/ui-components.core';
+const getBackground = (type) => {
+    switch (type) {
+        case LabelTypeEnum.ISSUER:
+            return gradientColors['200'];
+        case LabelTypeEnum.VERIFIER:
+            return gradientColors['100'];
+        default:
+            return backgroundColors.primaryLight;
+    }
+};
+const SSITypeLabel = (props) => {
+    const { type } = props;
+    return _jsx(Container, { style: { background: getBackground(type) }, children: type });
+};
+export default SSITypeLabel;

package/dist/components/lists/SSIDropDownList/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export type Props = {
+    initialValue: string;
+    label?: string;
+};
+declare const SSIDropDownList: FC<Props>;
+export default SSIDropDownList;

package/dist/components/lists/SSIDropDownList/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import SSIIconButton from '../../buttons/SSIIconButton';
+import { ButtonIconsEnum } from '../../../types';
+import { SSIDropDownListContainerStyled as Container, SSITextH3Styled as LabelCaption, SSIDropDownListSelectedValueStyled as SelectedValue, } from '../../../styles/components';
+const SSIDropDownList = (props) => {
+    const { initialValue, label } = props;
+    const [value, setValue] = React.useState(initialValue);
+    return (_jsxs(Container, { children: [label && _jsx(LabelCaption, { children: label }), _jsx(SelectedValue, { children: value }), _jsx(SSIIconButton, { icon: ButtonIconsEnum.ARROW_DOWN, onClick: async () => console.log('drop down clicked') })] }));
+};
+export default SSIDropDownList;

package/dist/components/views/SSITabView/SSITabViewHeader/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TabNavigationState } from '../../../../types';
+export type Props = {
+    navigationState: TabNavigationState;
+    onIndexChange: (index: number) => void;
+};
+declare const SSITabViewHeader: React.FC<Props>;
+export default SSITabViewHeader;

package/dist/components/views/SSITabView/SSITabViewHeader/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles/components';
+const SSITabViewHeader = (props) => {
+    const { navigationState, onIndexChange } = props;
+    return (_jsx(Container, { children: navigationState.routes.map((value, index) => {
+            const tabIndex = index + 1;
+            const isActiveTab = tabIndex === navigationState.index;
+            return (_jsx(TitleContainer, { onClick: () => onIndexChange(tabIndex), style: {
+                    ...(isActiveTab && { borderBottom: `2px solid #7276F7`, alignSelf: 'stretch' }),
+                }, children: _jsx(TitleCaption, { style: { fontWeight: !isActiveTab ? '400' : '600' }, children: value.title }) }, tabIndex));
+        }) }));
+};
+export default SSITabViewHeader;

package/dist/components/views/SSITabView/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TabViewRoute } from '../../../types';
+export type Props = {
+    routes: Array<TabViewRoute>;
+};
+declare const SSITabView: React.FC<Props>;
+export default SSITabView;

package/dist/components/views/SSITabView/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import SSITabViewHeader from './SSITabViewHeader';
+const Tab = (props) => {
+    return _jsx(React.Fragment, { children: props.children });
+};
+const SSITabView = (props) => {
+    const { routes = [] } = props;
+    const [activeTabIndex, setActiveTabIndex] = React.useState(1);
+    const [content, setContent] = React.useState();
+    React.useEffect(() => {
+        routes.forEach((route, index) => {
+            if (index + 1 === activeTabIndex) {
+                setContent(route.content);
+            }
+        });
+    }, [routes, activeTabIndex]);
+    const onTabChange = async (tabIndex) => {
+        setActiveTabIndex(tabIndex);
+    };
+    return (_jsxs("div", { children: [_jsx(SSITabViewHeader, { navigationState: {
+                    routes: routes,
+                    index: activeTabIndex,
+                }, onIndexChange: onTabChange }), _jsx(Tab, { children: content })] }));
+};
+export default SSITabView;

package/dist/components/views/SSITableView/SSITableViewHeader/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button } from '../../../../types';
+export type Props = {
+    enableFiltering?: boolean;
+    actions?: Array<Button>;
+};
+declare const SSITableViewHeader: React.FC<Props>;
+export default SSITableViewHeader;

package/dist/components/views/SSITableView/SSITableViewHeader/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Localization } from '@sphereon/ui-components.core';
+import SSIIconButton from '../../../buttons/SSIIconButton';
+import { ButtonIconsEnum } from '../../../../types';
+import SSIDropDownList from '../../../lists/SSIDropDownList';
+import SSIPrimaryButton from '../../../buttons/SSIPrimaryButton';
+import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, SSITableViewHeaderShowOptionContainerStyled as ShowOptionContainer, } from '../../../../styles/components';
+const SSITableViewHeader = (props) => {
+    const { enableFiltering = false, actions = [] } = props;
+    return (_jsx(Container, { children: _jsx(ContentContainer, { children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIconsEnum.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), _jsx(ShowOptionContainer, { children: _jsx(SSIDropDownList, { label: Localization.translate('action_show_caption'), initialValue: 'Most recent' }) }), actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) }) }));
+};
+export default SSITableViewHeader;

package/dist/components/views/SSITableView/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { ColumnResizeMode } from '@tanstack/react-table';
+import { Button, ColumnHeader } from '../../../types';
+export type Props<T> = {
+    data: Array<T>;
+    columns: Array<ColumnHeader<T>>;
+    enableRowSelection?: boolean;
+    enableFiltering?: boolean;
+    columnResizeMode?: ColumnResizeMode;
+    actions?: Array<Button>;
+};
+declare const SSITableView: <T extends {}>(props: Props<T>) => ReactElement;
+export default SSITableView;

package/dist/components/views/SSITableView/index.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
+import { TableCellTypeEnum } from '../../../types';
+import SSITableViewHeader from './SSITableViewHeader';
+import SSITypeLabel from '../../labels/SSITypeLabel';
+import { SSITableViewCellContainerStyled, SSITableViewContainerStyled, SSITableViewHeaderCellContainerStyled, SSITableViewLabelCellStyled, SSITableViewRowContainerStyled, SSITableViewTableContainerStyled, } from '../../../styles/components';
+function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (typeof indeterminate === 'boolean') {
+            ref.current.indeterminate = !rest.checked && indeterminate;
+        }
+    }, [ref, indeterminate]);
+    return _jsx("input", { type: "checkbox", ref: ref, className: className + ' cursor-pointer', ...rest });
+}
+const getCellFormatting = (type, value) => {
+    switch (type) {
+        case TableCellTypeEnum.TEXT:
+            return _jsx("p", { children: value });
+        case TableCellTypeEnum.LABEL: {
+            const labels = Array.isArray(value) ? value.map((label) => _jsx(SSITypeLabel, { type: label })) : _jsx(SSITypeLabel, { type: value });
+            return _jsx(SSITableViewLabelCellStyled, { children: labels });
+        }
+        default:
+            return _jsx("div", {});
+    }
+};
+const SSITableView = (props) => {
+    const { columns, data, enableRowSelection = false, enableFiltering = false, columnResizeMode = 'onChange', actions = [] } = props;
+    const [rowSelection, setRowSelection] = React.useState({});
+    const columnHelper = createColumnHelper();
+    let availableColumns = columns.map((header) => columnHelper.accessor(header.accessor, {
+        id: header.accessor,
+        header: header.label,
+        cell: (info) => getCellFormatting(header.type, info.getValue()),
+    }));
+    if (enableRowSelection) {
+        availableColumns = [
+            {
+                id: 'select',
+                header: ({ table }) => (_jsx(IndeterminateCheckbox, { ...{
+                        checked: table.getIsAllRowsSelected(),
+                        indeterminate: table.getIsSomeRowsSelected(),
+                        onChange: table.getToggleAllRowsSelectedHandler(),
+                    } })),
+                cell: ({ row }) => (_jsx("div", { className: "px-1", children: _jsx(IndeterminateCheckbox, { ...{
+                            checked: row.getIsSelected(),
+                            disabled: !row.getCanSelect(),
+                            indeterminate: row.getIsSomeSelected(),
+                            onChange: row.getToggleSelectedHandler(),
+                        } }) })),
+            },
+            ...availableColumns,
+        ];
+    }
+    const table = useReactTable({
+        state: {
+            rowSelection,
+        },
+        enableRowSelection,
+        onRowSelectionChange: setRowSelection,
+        data,
+        columns: availableColumns,
+        columnResizeMode,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return (_jsx(SSITableViewContainerStyled, { children: _jsxs("div", { className: "overflow-x-auto", children: [_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering }), _jsxs(SSITableViewTableContainerStyled, { style: { width: table.getCenterTotalSize() }, children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(SSITableViewRowContainerStyled, { children: headerGroup.headers.map((header) => (_jsxs(SSITableViewHeaderCellContainerStyled, { colSpan: header.colSpan, style: { width: header.getSize() }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+                                                transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
+                                                    ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
+                                                    : '',
+                                            } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(SSITableViewRowContainerStyled, { children: row.getVisibleCells().map((cell) => (_jsx(SSITableViewCellContainerStyled, { style: { width: cell.column.getSize() }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }) }));
+};
+export default SSITableView;

package/dist/index.d.ts

@@ -4,4 +4,18 @@ import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
 import SSILogo from './components/assets/logos/SSILogo';
-export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo };
+import SSIAddIcon from './components/assets/icons/SSIAddIcon';
+import SSIFilterIcon from './components/assets/icons/SSIFilterIcon';
+import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
+import SSITypeLabel from './components/labels/SSITypeLabel';
+import SSIIconButton from './components/buttons/SSIIconButton';
+import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
+import SSIDropDownList from './components/lists/SSIDropDownList';
+import SSITableView from './components/views/SSITableView';
+import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
+import SSITabView from './components/views/SSITabView';
+import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
+import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
+export * from './types';
+export * from './styles/components/fonts';
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };

package/dist/index.js

@@ -4,4 +4,18 @@ import SSICheckmarkBadge from './components/assets/badges/SSICheckmarkBadge';
 import SSIExclamationMarkBadge from './components/assets/badges/SSIExclamationMarkBadge';
 import SSIPlaceholderLogo from './components/assets/logos/SSIPlaceholderLogo';
 import SSILogo from './components/assets/logos/SSILogo';
-export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo };
+import SSIAddIcon from './components/assets/icons/SSIAddIcon';
+import SSIFilterIcon from './components/assets/icons/SSIFilterIcon';
+import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
+import SSITypeLabel from './components/labels/SSITypeLabel';
+import SSIIconButton from './components/buttons/SSIIconButton';
+import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
+import SSIDropDownList from './components/lists/SSIDropDownList';
+import SSITableView from './components/views/SSITableView';
+import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
+import SSITabView from './components/views/SSITabView';
+import SSITabViewHeader from './components/views/SSITabView/SSITabViewHeader';
+import SSIProfileIcon from './components/assets/icons/SSIProfileIcon';
+export * from './types';
+export * from './styles/components/fonts';
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, };

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

@@ -0,0 +1,2 @@
+export declare const SSIDropDownListContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSIDropDownListSelectedValueStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { gradientColors } from '@sphereon/ui-components.core';
+import { SSITextH3Styled } from '../../fonts';
+export const SSIDropDownListContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  text-align: left;
+  align-items: center;
+  gap: 2px;
+`;
+export const SSIDropDownListSelectedValueStyled = styled(SSITextH3Styled) `
+  background: ${gradientColors['100']};
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;

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

@@ -0,0 +1 @@
+export declare const SSIIconButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const SSIIconButtonContainerStyled = styled.div `
+  width: 32px;
+  aspect-ratio: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;

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

@@ -0,0 +1 @@
+export declare const SSIPrimaryButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { SSIRoundedContainerStyled } from '../../containers';
+import { gradientColors } from '@sphereon/ui-components.core';
+export const SSIPrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
+  background: ${gradientColors['100']};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px 6px 8px;
+  cursor: pointer;
+`;

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

@@ -0,0 +1 @@
+export declare const SSIProfileIconContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const SSIProfileIconContainerStyled = styled.div `
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 19px;
+`;

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

@@ -0,0 +1,2 @@
+export declare const SSITabViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITabViewHeaderTitleContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+export const SSITabViewHeaderContainerStyled = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 84px;
+  margin-left: 66px;
+`;
+export const SSITabViewHeaderTitleContainerStyled = styled.div `
+  cursor: pointer;
+`;

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

@@ -0,0 +1,6 @@
+export declare const SSITableViewContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewLabelCellStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewTableContainerStyled: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const SSITableViewRowContainerStyled: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const SSITableViewCellContainerStyled: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const SSITableViewHeaderCellContainerStyled: import("styled-components").StyledComponent<"th", any, {}, never>;

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

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { backgroundColors, borderColors, fontColors } from '@sphereon/ui-components.core';
+import { SSITextH2Css, SSITextH3Css } from '../../../css';
+export const SSITableViewContainerStyled = styled.div `
+  background-color: ${backgroundColors.lightGrey};
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+`;
+export const SSITableViewLabelCellStyled = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+`;
+export const SSITableViewTableContainerStyled = styled.table `
+  user-select: text;
+  width: fit-content;
+  border-collapse: collapse;
+`;
+export const SSITableViewRowContainerStyled = styled.tr `
+  border-bottom: 1px solid ${borderColors.lightGrey};
+`;
+export const SSITableViewCellContainerStyled = styled.td `
+  ${SSITextH3Css};
+  color: ${fontColors.dark};
+  background-color: ${backgroundColors.primaryLight};
+  padding: 20px 16px 20px 16px;
+  text-align: left;
+`;
+export const SSITableViewHeaderCellContainerStyled = styled.th `
+  ${SSITextH2Css};
+  position: relative;
+  padding: 20px 16px 20px 16px;
+  background-color: ${backgroundColors.primaryLight};
+  color: ${fontColors.lightGrey};
+`;

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

@@ -0,0 +1,5 @@
+export declare const SSITableViewHeaderContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewHeaderContentContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewHeaderActionsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewHeaderFilterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITableViewHeaderShowOptionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { backgroundColors } from '@sphereon/ui-components.core';
+export const SSITableViewHeaderContainerStyled = styled.div `
+  background-color: ${backgroundColors.primaryLight};
+  display: flex;
+`;
+export const SSITableViewHeaderContentContainerStyled = styled.div `
+  height: 48px;
+  margin-left: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 24px;
+`;
+export const SSITableViewHeaderActionsContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  height: 32px;
+  gap: 50px;
+`;
+export const SSITableViewHeaderFilterContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  height: 32px;
+  align-items: center;
+  gap: 8px;
+`;
+export const SSITableViewHeaderShowOptionContainerStyled = styled.div `
+  display: flex;
+  text-align: left;
+  align-items: center;
+`;

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

@@ -0,0 +1 @@
+export declare const SSITypeLabelContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { SSIRoundedContainerStyled } from '../../containers';
+import { fontColors } from '@sphereon/ui-components.core';
+export const SSITypeLabelContainerStyled = styled(SSIRoundedContainerStyled) `
+  display: flex;
+  padding: 1px 12px;
+  justify-content: center;
+  align-items: center;
+  color: ${fontColors.light};
+  user-select: none;
+`;

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

@@ -1,2 +1,9 @@
 export * from './SSICardView';
 export * from './SSIStatusLabel';
+export * from './SSIPrimaryButton';
+export * from './SSIIconButton';
+export * from './SSIDropDownList';
+export * from './SSITypeLabel';
+export * from './SSITableViewHeader';
+export * from './SSITableView';
+export * from './SSITabViewHeader';

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

@@ -1,2 +1,9 @@
 export * from './SSICardView';
 export * from './SSIStatusLabel';
+export * from './SSIPrimaryButton';
+export * from './SSIIconButton';
+export * from './SSIDropDownList';
+export * from './SSITypeLabel';
+export * from './SSITableViewHeader';
+export * from './SSITableView';
+export * from './SSITabViewHeader';

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

@@ -1,3 +1,7 @@
+export declare const SSITextH1Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITextH2Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITextH3Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITextH3LightStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4Styled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4SemiBoldStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SSITextH4LightStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -1,19 +1,23 @@
 import styled from 'styled-components';
 import { fontColors } from '@sphereon/ui-components.core';
-import { fontStyle } from '../../typography';
+import { SSITextH1Css, SSITextH2Css, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css } from '../../css';
+export const SSITextH1Styled = styled.span `
+  ${SSITextH1Css}
+`;
+export const SSITextH2Styled = styled.span `
+  ${SSITextH2Css}
+`;
+export const SSITextH3Styled = styled.span `
+  ${SSITextH3Css}
+`;
+export const SSITextH3LightStyled = styled(SSITextH3Styled) `
+  color: ${fontColors.light};
+`;
 export const SSITextH4Styled = styled.span `
-  font-family: ${fontStyle.h4Regular.fontFamily};
-  font-size: ${fontStyle.h4Regular.fontSize}px;
-  font-weight: ${fontStyle.h4Regular.fontWeight};
-  line-height: ${fontStyle.h4Regular.lineHeight}px;
-  height: auto;
+  ${SSITextH4Css}
 `;
 export const SSITextH4SemiBoldStyled = styled.span `
-  font-family: ${fontStyle.h4SemiBold.fontFamily};
-  font-size: ${fontStyle.h4SemiBold.fontSize}px;
-  font-weight: ${fontStyle.h4SemiBold.fontWeight};
-  line-height: ${fontStyle.h4SemiBold.lineHeight}px;
-  height: auto;
+  ${SSITextH4SemiBoldCss}
 `;
 export const SSITextH4LightStyled = styled(SSITextH4Styled) `
   color: ${fontColors.light};
@@ -22,21 +26,13 @@ export const SSITextH4SemiBoldLightStyled = styled(SSITextH4SemiBoldStyled) `
   color: ${fontColors.light};
 `;
 export const SSITextH5Styled = styled.span `
-  font-family: ${fontStyle.h5Regular.fontFamily};
-  font-size: ${fontStyle.h5Regular.fontSize}px;
-  font-weight: ${fontStyle.h5Regular.fontWeight};
-  line-height: ${fontStyle.h5Regular.lineHeight}px;
-  height: auto;
+  ${SSITextH5Css}
 `;
 export const SSITextH5LightStyled = styled(SSITextH5Styled) `
   color: ${fontColors.light};
 `;
 export const SSITextH6Styled = styled.span `
-  font-family: ${fontStyle.h6.fontFamily};
-  font-size: ${fontStyle.h6.fontSize}px;
-  font-weight: ${fontStyle.h6.fontWeight};
-  line-height: ${fontStyle.h6.lineHeight}px;
-  height: auto;
+  ${SSITextH6Css}
 `;
 export const SSITextH6LightStyled = styled(SSITextH6Styled) `
   color: ${fontColors.light};

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

@@ -0,0 +1,7 @@
+export declare const SSITextH1Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH2Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH3Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH4Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH4SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH5Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH6Css: import("styled-components").FlattenSimpleInterpolation;

package/dist/styles/css/index.js

@@ -0,0 +1,51 @@
+import { css } from 'styled-components';
+import { fontStyle } from '../typography';
+export const SSITextH1Css = css `
+  font-family: ${fontStyle.h1Regular.fontFamily};
+  font-size: ${fontStyle.h1Regular.fontSize}px;
+  font-weight: ${fontStyle.h1Regular.fontWeight};
+  line-height: ${fontStyle.h1Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH2Css = css `
+  font-family: ${fontStyle.h2Regular.fontFamily};
+  font-size: ${fontStyle.h2Regular.fontSize}px;
+  font-weight: ${fontStyle.h2Regular.fontWeight};
+  line-height: ${fontStyle.h2Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH3Css = css `
+  font-family: ${fontStyle.h3Regular.fontFamily};
+  font-size: ${fontStyle.h3Regular.fontSize}px;
+  font-weight: ${fontStyle.h3Regular.fontWeight};
+  line-height: ${fontStyle.h3Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH4Css = css `
+  font-family: ${fontStyle.h4Regular.fontFamily};
+  font-size: ${fontStyle.h4Regular.fontSize}px;
+  font-weight: ${fontStyle.h4Regular.fontWeight};
+  line-height: ${fontStyle.h4Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH4SemiBoldCss = css `
+  font-family: ${fontStyle.h4SemiBold.fontFamily};
+  font-size: ${fontStyle.h4SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h4SemiBold.fontWeight};
+  line-height: ${fontStyle.h4SemiBold.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH5Css = css `
+  font-family: ${fontStyle.h5Regular.fontFamily};
+  font-size: ${fontStyle.h5Regular.fontSize}px;
+  font-weight: ${fontStyle.h5Regular.fontWeight};
+  line-height: ${fontStyle.h5Regular.lineHeight}px;
+  height: auto;
+`;
+export const SSITextH6Css = css `
+  font-family: ${fontStyle.h6.fontFamily};
+  font-size: ${fontStyle.h6.fontSize}px;
+  font-weight: ${fontStyle.h6.fontWeight};
+  line-height: ${fontStyle.h6.lineHeight}px;
+  height: auto;
+`;

package/dist/styles/typography.js

@@ -6,6 +6,12 @@ export const fontStyle = {
         fontWeight: fontWeight[600],
         lineHeight: lineHeight[800],
     },
+    h1Regular: {
+        fontFamily: 'Poppins',
+        fontSize: fontSize[700],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[700],
+    },
     h1SemiBold: {
         fontFamily: 'Poppins',
         fontSize: fontSize[700],

package/dist/types/component/index.d.ts

@@ -0,0 +1,37 @@
+import { ComponentType } from 'react';
+import { AccessorFn, DeepKeys } from '@tanstack/react-table';
+export type TabRoute = {
+    key: string;
+    title: string;
+};
+export type TabViewRoute = TabRoute & {
+    content: ComponentType<unknown>;
+};
+export type TabNavigationState = {
+    index: number;
+    routes: Array<TabViewRoute>;
+};
+export declare enum ButtonIconsEnum {
+    ADD = "add",
+    ARROW_DOWN = "arrowDown",
+    FILTER = "filter"
+}
+export type ColumnHeader<T> = {
+    accessor: AccessorFn<T> | DeepKeys<T>;
+    type: TableCellTypeEnum;
+    label?: string;
+};
+export type Button = {
+    caption: string;
+    onClick: () => Promise<void>;
+    icon?: ButtonIconsEnum;
+    disabled?: boolean;
+};
+export declare enum LabelTypeEnum {
+    ISSUER = "Issuer",
+    VERIFIER = "Verifier"
+}
+export declare enum TableCellTypeEnum {
+    TEXT = "text",
+    LABEL = "label"
+}

package/dist/types/component/index.js

@@ -0,0 +1,16 @@
+export var ButtonIconsEnum;
+(function (ButtonIconsEnum) {
+    ButtonIconsEnum["ADD"] = "add";
+    ButtonIconsEnum["ARROW_DOWN"] = "arrowDown";
+    ButtonIconsEnum["FILTER"] = "filter";
+})(ButtonIconsEnum || (ButtonIconsEnum = {}));
+export var LabelTypeEnum;
+(function (LabelTypeEnum) {
+    LabelTypeEnum["ISSUER"] = "Issuer";
+    LabelTypeEnum["VERIFIER"] = "Verifier";
+})(LabelTypeEnum || (LabelTypeEnum = {}));
+export var TableCellTypeEnum;
+(function (TableCellTypeEnum) {
+    TableCellTypeEnum["TEXT"] = "text";
+    TableCellTypeEnum["LABEL"] = "label";
+})(TableCellTypeEnum || (TableCellTypeEnum = {}));

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './component';

package/dist/types/index.js

@@ -0,0 +1 @@
+export * from './component';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.2-next.11+1a44f32",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -28,7 +28,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@sphereon/ui-components.core": "0.1.1",
+    "@sphereon/ui-components.core": "0.1.2-next.11+1a44f32",
+    "@tanstack/react-table": "^8.9.3",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
@@ -39,5 +40,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "067169b933897f36b96709293be6163ee21c317b"
+  "gitHead": "1a44f3296f14e9d6ede9349817dc380594956f14"
 }