@sphereon/ui-components.ssi-react 0.1.1 → 0.1.2-unstable.3

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,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SSIAddIcon = (props) => {
+    const { size = 16, color = '#303030' } = 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, fillOpacity: "0.8" }) }) }));
+};
+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,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SSIArrowDownIcon = (props) => {
+    const { width = 16, height = 8, color = '#303030' } = 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, fillOpacity: "0.8" }) }) }));
+};
+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,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SSIFilterIcon = (props) => {
+    const { height = 16, width = 18, color = '#303030' } = 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/buttons/SSIIconButton/index.d.ts

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

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

@@ -0,0 +1,23 @@
+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';
+const SSIIconButton = (props) => {
+    const { icon, onClick, disabled = false } = props;
+    return _jsx(Container, { onClick: onClick, children: getIcon(icon) });
+};
+const getIcon = (icon) => {
+    switch (icon) {
+        case ButtonIconsEnum.ADD:
+            return _jsx(SSIAddIcon, {});
+        case ButtonIconsEnum.FILTER:
+            return _jsx(SSIFilterIcon, {});
+        case ButtonIconsEnum.ARROW_DOWN:
+            return _jsx(SSIArrowDownIcon, {});
+        default:
+            return _jsx("div", {});
+    }
+};
+export default SSIIconButton;

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

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

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

@@ -0,0 +1,9 @@
+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, SSIPrimaryButtonCaptionStyled as Caption } from '../../../styles/components';
+const SSIPrimaryButton = (props) => {
+    const { caption, icon, onClick } = props;
+    return (_jsxs(Container, { onClick: onClick, children: [icon && _jsx(SSIAddIcon, { color: fontColors.light }), _jsx(Caption, { children: caption })] }));
+};
+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, 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("span", { 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,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, } 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, { style: {
+                    fontWeight: !isActiveTab ? '400' : '600',
+                    ...(isActiveTab && { borderBottom: '2px solid #7276F7', alignSelf: 'stretch' }),
+                }, onClick: () => onIndexChange(tabIndex), 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, SSITableViewHeaderFilterCaptionStyled 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,16 @@ 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';
+export * from './types';
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader };

package/dist/index.js

@@ -4,4 +4,16 @@ 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';
+export * from './types';
+export { SSICardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader };

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<"div", any, {}, never>;

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { gradientColors } from "@sphereon/ui-components.core";
+export const SSIDropDownListContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  text-align: left;
+  align-items: center;
+  gap: 2px;
+`;
+export const SSIDropDownListSelectedValueStyled = styled.div `
+  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,2 @@
+export declare const SSIPrimaryButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSIPrimaryButtonCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { SSIRoundedContainerStyled } from '../../containers';
+import { fontColors, gradientColors } from "@sphereon/ui-components.core";
+export const SSIPrimaryButtonContainerStyled = styled(SSIRoundedContainerStyled) `
+  height: 32px;
+  background: ${gradientColors["100"]};
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding-left: 8px;
+  padding-right: 8px;
+  color: ${fontColors.light};
+  cursor: pointer;
+`;
+export const SSIPrimaryButtonCaptionStyled = styled.div `
+  font-style: normal;
+  font-size: 14px;
+  font-weight: 400;
+`;

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,13 @@
+import styled from 'styled-components';
+import { fontColors } from "@sphereon/ui-components.core";
+export const SSITabViewHeaderContainerStyled = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 84px;
+  margin-left: 66px;
+`;
+export const SSITabViewHeaderTitleContainerStyled = styled.div `
+  font-size: 16px;
+  color: ${fontColors.dark};
+  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";
+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 `
+  color: ${fontColors.dark};
+  background-color: ${backgroundColors.primaryLight};
+  padding: 20px 16px 20px 16px;
+  text-align: left;
+`;
+export const SSITableViewHeaderCellContainerStyled = styled.th `
+  position: relative;
+  padding: 20px 16px 20px 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  background-color: ${backgroundColors.primaryLight};
+  color: ${fontColors.lightGrey};
+`;

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

@@ -0,0 +1,6 @@
+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 SSITableViewHeaderFilterCaptionStyled: 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,33 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { backgroundColors, fontColors } 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 SSITableViewHeaderFilterCaptionStyled = styled.div `
+  color: ${fontColors.dark};
+`;
+export const SSITableViewHeaderShowOptionContainerStyled = styled.div `
+  height: 32px;
+  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/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?: string;
+    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-unstable.3+01ddfd7",
   "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-unstable.3+01ddfd7",
+    "@tanstack/react-table": "^8.9.3",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
@@ -39,5 +40,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "067169b933897f36b96709293be6163ee21c317b"
+  "gitHead": "01ddfd71cbcbff20139ed6ee0510384ba1b45a51"
 }