@trackunit/react-compound-components 1.7.159 → 1.7.166

package/index.cjs.js

@@ -2,19 +2,14 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
-var reactCoreHooks = require('@trackunit/react-core-hooks');
-var reactModal = require('@trackunit/react-modal');
-var react = require('react');
 var reactComponents = require('@trackunit/react-components');
 var reactFormComponents = require('@trackunit/react-form-components');
+var react = require('react');
 var tailwindMerge = require('tailwind-merge');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 
 var defaultTranslations = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 /** The translation namespace for this library */
@@ -48,10 +43,6 @@ const translations = {
         th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
     },
 };
-/**
- *  Local useTranslation for this specific library
- */
-const useTranslation = () => i18nLibraryTranslation.useNamespaceTranslation(namespace);
 /**
  * Registers the translations for this library
  */
@@ -59,66 +50,6 @@ const setupLibraryTranslations = () => {
     i18nLibraryTranslation.registerTranslations(translations);
 };
 
-/**
- *
- */
-const ConfirmationDialogModal = ({ title, message, handlePrimaryActionClick, handleSecondaryActionClick, secondaryActionLabel, primaryActionType, primaryActionLabel, ...modalProps }) => {
-    return (jsxRuntime.jsxs(reactModal.Modal, { ...modalProps, className: "max-w-xl", children: [jsxRuntime.jsx(reactModal.ModalHeader, { heading: title, id: "dialogTitle", onClose: modalProps.close }), jsxRuntime.jsx(reactModal.ModalBody, { id: "dialogDesc", children: message }), jsxRuntime.jsxs(reactModal.ModalFooter, { children: [jsxRuntime.jsx(reactComponents.Button, { "data-testid": "secondaryAction", onClick: handleSecondaryActionClick, variant: "ghost-neutral", children: secondaryActionLabel }), jsxRuntime.jsx(reactComponents.Button, { "data-testid": "primaryAction", onClick: handlePrimaryActionClick, variant: primaryActionType, children: primaryActionLabel })] })] }));
-};
-
-/**
- * Helper that resolves the promise with the given action and immediately clears the resolver to prevent double resolution
- *
- * Prevents scenarios where both a button click and modal auto-close would resolve the same promise
- */
-const resolveAndClear = (resolveAction, setResolveAction, action) => {
-    if (resolveAction) {
-        resolveAction(action);
-        setResolveAction(null);
-    }
-};
-/**
- * ConfirmationDialogContextProvider
- *
- * Provides confirmation dialog context and manages modal state with Promise-based resolution
- */
-const ConfirmationDialogContextProvider = ({ children }) => {
-    const [t] = useTranslation();
-    const modal = reactModal.useModal({
-        onClose: () => {
-            resolveAndClear(resolveAction, setResolveAction, "CLOSE");
-        },
-    });
-    const [resolveAction, setResolveAction] = react.useState(null);
-    const [confirmationDialogProps, setConfirmationDialogProps] = react.useState({
-        title: t("confirmationDialog.default.title"),
-        primaryActionType: "primary",
-        primaryActionLabel: t("confirmationDialog.default.primarybutton"),
-        secondaryActionLabel: t("confirmationDialog.default.secondarybutton"),
-        message: t("confirmationDialog.default.message"),
-    });
-    const confirmationDialogModalProps = react.useMemo(() => ({
-        ...confirmationDialogProps,
-        handlePrimaryActionClick: () => {
-            resolveAndClear(resolveAction, setResolveAction, "PRIMARY");
-            modal.close();
-        },
-        handleSecondaryActionClick: () => {
-            resolveAndClear(resolveAction, setResolveAction, "SECONDARY");
-            modal.close();
-        },
-    }), [confirmationDialogProps, resolveAction, setResolveAction, modal]);
-    const confirm = react.useCallback(async (props) => {
-        setConfirmationDialogProps(prev => ({ ...prev, ...props }));
-        modal.open();
-        return new Promise(resolve => {
-            setResolveAction(() => resolve);
-        });
-    }, [modal]);
-    const value = react.useMemo(() => ({ confirm }), [confirm]);
-    return (jsxRuntime.jsxs(reactCoreHooks.ConfirmationDialogProvider, { value: value, children: [children, resolveAction ? jsxRuntime.jsx(ConfirmationDialogModal, { ...modal, ...confirmationDialogModalProps }) : null] }));
-};
-
 const cvaPreferenceCard = cssClassVarianceUtilities.cvaMerge(["rounded-lg", "border", "border-neutral-200", "bg-white", "w-full"], {
     variants: {
         disabled: {
@@ -136,18 +67,13 @@ const cvaPreferenceCard = cssClassVarianceUtilities.cvaMerge(["rounded-lg", "bor
             clickable: true,
             class: "cursor-not-allowed",
         },
-        {
-            disabled: false,
-            clickable: true,
-            class: "focus:ring-primary-600 focus:border-primary-600 focus:outline-none focus:ring-1",
-        },
     ],
     defaultVariants: {
         disabled: false,
         clickable: false,
     },
 });
-const cvaInputCard = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "p-4"], {
+const cvaInputCard = cssClassVarianceUtilities.cvaMerge(["flex", "items-start", "px-4", "py-[21px]", "rounded-l-lg", "border", "border-transparent"], {
     variants: {
         disabled: {
             true: "bg-neutral-50",
@@ -162,12 +88,12 @@ const cvaInputCard = cssClassVarianceUtilities.cvaMerge(["flex", "items-center",
         {
             disabled: false,
             checked: true,
-            class: "bg-primary-50",
+            class: "bg-primary-50 focus:border focus:border-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-500",
         },
         {
             disabled: false,
             checked: false,
-            class: "bg-neutral-50",
+            class: "bg-neutral-50 focus:border focus:border-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-500",
         },
     ],
     defaultVariants: {
@@ -214,8 +140,8 @@ const cvaIconBackground = cssClassVarianceUtilities.cvaMerge(["flex", "h-8", "w-
  * with various states and visual treatments.
  * It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
  */
-const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag, disabled = false, loading = false, className, "data-testid": dataTestId, children, onClick, }) => {
-    const handleCardClick = react.useCallback(() => {
+const PreferenceCard = ({ title, description, icon, image, input, firstTag, secondTag, disabled = false, loading = false, className, "data-testid": dataTestId, children, onClick, }) => {
+    const handleInputContainerClick = react.useCallback(() => {
         if (!disabled && !loading) {
             if (onClick) {
                 onClick();
@@ -228,11 +154,38 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
     const handleInputClick = react.useCallback((event) => {
         event.stopPropagation();
     }, []);
-    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge(cvaPreferenceCard({
+    return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaPreferenceCard({
             className,
             disabled,
-            clickable: !!(onClick || input),
-        }), "overflow-hidden"), "data-testid": dataTestId, onClick: handleCardClick, tabIndex: onClick || input ? (disabled ? -1 : 0) : undefined, children: [jsxRuntime.jsxs("div", { className: "flex items-stretch divide-x divide-neutral-200", children: [input ? (jsxRuntime.jsx("div", { className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputClick, children: jsxRuntime.jsxs(reactComponents.Tooltip, { disabled: !input.tooltipText, label: input.tooltipText, placement: "top", children: [input.type === "checkbox" ? (jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: input.checked, disabled: disabled, onChange: event => input.handleInputChange(event.target.checked) })) : null, input.type === "radio" ? jsxRuntime.jsx(reactFormComponents.RadioItem, { disabled: disabled, value: title }) : null, input.type === "toggle" ? (jsxRuntime.jsx(reactFormComponents.ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), toggled: input.checked })) : null] }) })) : null, jsxRuntime.jsxs("div", { className: "flex grow px-4 py-3", children: [loading ? (jsxRuntime.jsxs("div", { className: "flex grow items-center gap-3", children: [jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx(reactComponents.SkeletonLines, { className: "rounded-md", height: 32, lines: 1, width: 32 }) }), jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: jsxRuntime.jsx(reactComponents.SkeletonLines, { gap: 4, height: [11, 12], lines: 2, width: [128, 152] }) })] })) : (jsxRuntime.jsxs("div", { className: "flex grow items-center gap-3", children: [icon ? (jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaIconBackground({ disabled }), disabled ? "" : icon.backgroundColor), children: jsxRuntime.jsx(reactComponents.Icon, { color: "white", name: icon.name, size: "small", type: "solid" }) }) })) : null, jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsxRuntime.jsx(reactComponents.Text, { className: cvaTitleCard({ disabled }), size: "medium", weight: "bold", children: title }), firstTag ? (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0", color: disabled ? "unknown" : firstTag.color, size: "small", children: firstTag.title })) : null] }) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaDescriptionCard({ disabled }), size: "small", type: "p", children: description })] })] })), secondTag ? (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }), children] }));
+        }), "overflow-hidden"), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: "flex items-stretch divide-x divide-neutral-200", children: [input ? (jsxRuntime.jsx("button", { "aria-label": `input-${title.toLowerCase().replace(/ /g, "-")}`, "aria-pressed": input.checked, className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputContainerClick, tabIndex: disabled ? -1 : 0, type: "button", children: jsxRuntime.jsxs(reactComponents.Tooltip, { disabled: !input.tooltipText, label: input.tooltipText, placement: "top", children: [input.type === "checkbox" ? (jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: input.checked, disabled: disabled, onChange: event => input.handleInputChange(event.target.checked), stopPropagation: true })) : null, input.type === "radio" ? (jsxRuntime.jsx(reactFormComponents.RadioItem, { checked: input.checked, disabled: disabled, onClick: handleInputClick, value: input.value })) : null, input.type === "toggle" ? (jsxRuntime.jsx(reactFormComponents.ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), onClick: handleInputClick, toggled: input.checked })) : null] }) })) : null, jsxRuntime.jsxs("div", { className: "flex flex-1 px-4 py-3", children: [loading ? (jsxRuntime.jsxs("div", { className: "flex grow items-center gap-3", children: [jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx(reactComponents.SkeletonLines, { className: "rounded-md", height: 32, lines: 1, width: 32 }) }), jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: jsxRuntime.jsx(reactComponents.SkeletonLines, { gap: 4, height: [11, 12], lines: 2, width: [128, 152] }) })] })) : (jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center gap-2", children: [icon ? (jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaIconBackground({ disabled }), disabled ? "" : icon.backgroundColor), children: jsxRuntime.jsx(reactComponents.Icon, { color: "white", name: icon.name, size: "small", type: "solid" }) }) })) : null, image ? (jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaIconBackground({ disabled }), disabled ? "" : image.backgroundColor || "bg-gray-100"), children: jsxRuntime.jsx("img", { alt: image.alt, className: "aspect-square h-8 w-8 rounded-md border border-neutral-200 object-contain", src: image.src }) }) })) : null, jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsxRuntime.jsx(reactComponents.Text, { className: cvaTitleCard({ disabled }), size: "medium", weight: "bold", children: title }), firstTag ? (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0", color: disabled ? "unknown" : firstTag.color, size: "small", children: firstTag.title })) : null] }) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaDescriptionCard({ disabled }), size: "small", type: "p", children: description })] })] }), children] })), secondTag ? (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }) }));
+};
+
+/**
+ * PreferenceCardGroup allows multiple PreferenceCards to work together as a group.
+ */
+const PreferenceCardGroup = ({ cards, selectedValue, onSelectionChange, groupId, isRadioMode = false, disabled = false, loading = false, "data-testid": dataTestId, }) => {
+    if (isRadioMode) {
+        return (jsxRuntime.jsx(reactFormComponents.RadioGroup, { "data-testid": dataTestId, disabled: disabled, id: groupId, onChange: event => onSelectionChange(event.target.value), value: typeof selectedValue === "string" ? selectedValue : "", children: cards.map(card => (jsxRuntime.jsx(PreferenceCard, { disabled: disabled, ...card, input: {
+                    type: "radio",
+                    checked: selectedValue === card.id,
+                    value: card.id,
+                }, loading: loading, onClick: () => {
+                    if (!disabled && !loading) {
+                        onSelectionChange(card.id);
+                    }
+                } }, card.id))) }));
+    }
+    return (jsxRuntime.jsx("div", { className: "flex flex-col gap-2", "data-testid": dataTestId, id: groupId, children: cards.map(card => (jsxRuntime.jsx(PreferenceCard, { ...card, disabled: disabled, input: {
+                type: card.input?.type === "toggle" ? "toggle" : "checkbox",
+                checked: Array.isArray(selectedValue) ? selectedValue.includes(card.id) : false,
+                handleInputChange: () => {
+                    const currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+                    const newValues = currentValues.includes(card.id)
+                        ? currentValues.filter(v => v !== card.id)
+                        : [...currentValues, card.id];
+                    onSelectionChange(newValues);
+                },
+            }, loading: loading }, card.id))) }));
 };
 
 /*
@@ -244,5 +197,5 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
  */
 setupLibraryTranslations();
 
-exports.ConfirmationDialogContextProvider = ConfirmationDialogContextProvider;
 exports.PreferenceCard = PreferenceCard;
+exports.PreferenceCardGroup = PreferenceCardGroup;

package/index.esm.js

@@ -1,18 +1,13 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { ConfirmationDialogProvider } from '@trackunit/react-core-hooks';
-import { Modal, ModalHeader, ModalBody, ModalFooter, useModal } from '@trackunit/react-modal';
-import { useState, useMemo, useCallback } from 'react';
-import { Button, Tooltip, SkeletonLines, Icon, Text, Tag } from '@trackunit/react-components';
-import { Checkbox, RadioItem, ToggleSwitch } from '@trackunit/react-form-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { registerTranslations } from '@trackunit/i18n-library-translation';
+import { Tooltip, SkeletonLines, Icon, Text, Tag } from '@trackunit/react-components';
+import { Checkbox, RadioItem, ToggleSwitch, RadioGroup } from '@trackunit/react-form-components';
+import { useCallback } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 
 var defaultTranslations = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 /** The translation namespace for this library */
@@ -46,10 +41,6 @@ const translations = {
         th: () => import('./translation.esm17.js'),
     },
 };
-/**
- *  Local useTranslation for this specific library
- */
-const useTranslation = () => useNamespaceTranslation(namespace);
 /**
  * Registers the translations for this library
  */
@@ -57,66 +48,6 @@ const setupLibraryTranslations = () => {
     registerTranslations(translations);
 };
 
-/**
- *
- */
-const ConfirmationDialogModal = ({ title, message, handlePrimaryActionClick, handleSecondaryActionClick, secondaryActionLabel, primaryActionType, primaryActionLabel, ...modalProps }) => {
-    return (jsxs(Modal, { ...modalProps, className: "max-w-xl", children: [jsx(ModalHeader, { heading: title, id: "dialogTitle", onClose: modalProps.close }), jsx(ModalBody, { id: "dialogDesc", children: message }), jsxs(ModalFooter, { children: [jsx(Button, { "data-testid": "secondaryAction", onClick: handleSecondaryActionClick, variant: "ghost-neutral", children: secondaryActionLabel }), jsx(Button, { "data-testid": "primaryAction", onClick: handlePrimaryActionClick, variant: primaryActionType, children: primaryActionLabel })] })] }));
-};
-
-/**
- * Helper that resolves the promise with the given action and immediately clears the resolver to prevent double resolution
- *
- * Prevents scenarios where both a button click and modal auto-close would resolve the same promise
- */
-const resolveAndClear = (resolveAction, setResolveAction, action) => {
-    if (resolveAction) {
-        resolveAction(action);
-        setResolveAction(null);
-    }
-};
-/**
- * ConfirmationDialogContextProvider
- *
- * Provides confirmation dialog context and manages modal state with Promise-based resolution
- */
-const ConfirmationDialogContextProvider = ({ children }) => {
-    const [t] = useTranslation();
-    const modal = useModal({
-        onClose: () => {
-            resolveAndClear(resolveAction, setResolveAction, "CLOSE");
-        },
-    });
-    const [resolveAction, setResolveAction] = useState(null);
-    const [confirmationDialogProps, setConfirmationDialogProps] = useState({
-        title: t("confirmationDialog.default.title"),
-        primaryActionType: "primary",
-        primaryActionLabel: t("confirmationDialog.default.primarybutton"),
-        secondaryActionLabel: t("confirmationDialog.default.secondarybutton"),
-        message: t("confirmationDialog.default.message"),
-    });
-    const confirmationDialogModalProps = useMemo(() => ({
-        ...confirmationDialogProps,
-        handlePrimaryActionClick: () => {
-            resolveAndClear(resolveAction, setResolveAction, "PRIMARY");
-            modal.close();
-        },
-        handleSecondaryActionClick: () => {
-            resolveAndClear(resolveAction, setResolveAction, "SECONDARY");
-            modal.close();
-        },
-    }), [confirmationDialogProps, resolveAction, setResolveAction, modal]);
-    const confirm = useCallback(async (props) => {
-        setConfirmationDialogProps(prev => ({ ...prev, ...props }));
-        modal.open();
-        return new Promise(resolve => {
-            setResolveAction(() => resolve);
-        });
-    }, [modal]);
-    const value = useMemo(() => ({ confirm }), [confirm]);
-    return (jsxs(ConfirmationDialogProvider, { value: value, children: [children, resolveAction ? jsx(ConfirmationDialogModal, { ...modal, ...confirmationDialogModalProps }) : null] }));
-};
-
 const cvaPreferenceCard = cvaMerge(["rounded-lg", "border", "border-neutral-200", "bg-white", "w-full"], {
     variants: {
         disabled: {
@@ -134,18 +65,13 @@ const cvaPreferenceCard = cvaMerge(["rounded-lg", "border", "border-neutral-200"
             clickable: true,
             class: "cursor-not-allowed",
         },
-        {
-            disabled: false,
-            clickable: true,
-            class: "focus:ring-primary-600 focus:border-primary-600 focus:outline-none focus:ring-1",
-        },
     ],
     defaultVariants: {
         disabled: false,
         clickable: false,
     },
 });
-const cvaInputCard = cvaMerge(["flex", "items-center", "p-4"], {
+const cvaInputCard = cvaMerge(["flex", "items-start", "px-4", "py-[21px]", "rounded-l-lg", "border", "border-transparent"], {
     variants: {
         disabled: {
             true: "bg-neutral-50",
@@ -160,12 +86,12 @@ const cvaInputCard = cvaMerge(["flex", "items-center", "p-4"], {
         {
             disabled: false,
             checked: true,
-            class: "bg-primary-50",
+            class: "bg-primary-50 focus:border focus:border-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-500",
         },
         {
             disabled: false,
             checked: false,
-            class: "bg-neutral-50",
+            class: "bg-neutral-50 focus:border focus:border-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-500",
         },
     ],
     defaultVariants: {
@@ -212,8 +138,8 @@ const cvaIconBackground = cvaMerge(["flex", "h-8", "w-8", "items-center", "justi
  * with various states and visual treatments.
  * It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
  */
-const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag, disabled = false, loading = false, className, "data-testid": dataTestId, children, onClick, }) => {
-    const handleCardClick = useCallback(() => {
+const PreferenceCard = ({ title, description, icon, image, input, firstTag, secondTag, disabled = false, loading = false, className, "data-testid": dataTestId, children, onClick, }) => {
+    const handleInputContainerClick = useCallback(() => {
         if (!disabled && !loading) {
             if (onClick) {
                 onClick();
@@ -226,11 +152,38 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
     const handleInputClick = useCallback((event) => {
         event.stopPropagation();
     }, []);
-    return (jsxs("div", { className: twMerge(cvaPreferenceCard({
+    return (jsx("div", { className: twMerge(cvaPreferenceCard({
             className,
             disabled,
-            clickable: !!(onClick || input),
-        }), "overflow-hidden"), "data-testid": dataTestId, onClick: handleCardClick, tabIndex: onClick || input ? (disabled ? -1 : 0) : undefined, children: [jsxs("div", { className: "flex items-stretch divide-x divide-neutral-200", children: [input ? (jsx("div", { className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputClick, children: jsxs(Tooltip, { disabled: !input.tooltipText, label: input.tooltipText, placement: "top", children: [input.type === "checkbox" ? (jsx(Checkbox, { checked: input.checked, disabled: disabled, onChange: event => input.handleInputChange(event.target.checked) })) : null, input.type === "radio" ? jsx(RadioItem, { disabled: disabled, value: title }) : null, input.type === "toggle" ? (jsx(ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), toggled: input.checked })) : null] }) })) : null, jsxs("div", { className: "flex grow px-4 py-3", children: [loading ? (jsxs("div", { className: "flex grow items-center gap-3", children: [jsx("div", { className: "flex-shrink-0", children: jsx(SkeletonLines, { className: "rounded-md", height: 32, lines: 1, width: 32 }) }), jsx("div", { className: "min-w-0 flex-1", children: jsx(SkeletonLines, { gap: 4, height: [11, 12], lines: 2, width: [128, 152] }) })] })) : (jsxs("div", { className: "flex grow items-center gap-3", children: [icon ? (jsx("div", { className: "flex-shrink-0", children: jsx("div", { className: twMerge(cvaIconBackground({ disabled }), disabled ? "" : icon.backgroundColor), children: jsx(Icon, { color: "white", name: icon.name, size: "small", type: "solid" }) }) })) : null, jsxs("div", { className: "min-w-0 flex-1", children: [jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsx(Text, { className: cvaTitleCard({ disabled }), size: "medium", weight: "bold", children: title }), firstTag ? (jsx(Tag, { className: "shrink-0", color: disabled ? "unknown" : firstTag.color, size: "small", children: firstTag.title })) : null] }) }), jsx(Text, { className: cvaDescriptionCard({ disabled }), size: "small", type: "p", children: description })] })] })), secondTag ? (jsx(Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }), children] }));
+        }), "overflow-hidden"), "data-testid": dataTestId, children: jsxs("div", { className: "flex items-stretch divide-x divide-neutral-200", children: [input ? (jsx("button", { "aria-label": `input-${title.toLowerCase().replace(/ /g, "-")}`, "aria-pressed": input.checked, className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputContainerClick, tabIndex: disabled ? -1 : 0, type: "button", children: jsxs(Tooltip, { disabled: !input.tooltipText, label: input.tooltipText, placement: "top", children: [input.type === "checkbox" ? (jsx(Checkbox, { checked: input.checked, disabled: disabled, onChange: event => input.handleInputChange(event.target.checked), stopPropagation: true })) : null, input.type === "radio" ? (jsx(RadioItem, { checked: input.checked, disabled: disabled, onClick: handleInputClick, value: input.value })) : null, input.type === "toggle" ? (jsx(ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), onClick: handleInputClick, toggled: input.checked })) : null] }) })) : null, jsxs("div", { className: "flex flex-1 px-4 py-3", children: [loading ? (jsxs("div", { className: "flex grow items-center gap-3", children: [jsx("div", { className: "flex-shrink-0", children: jsx(SkeletonLines, { className: "rounded-md", height: 32, lines: 1, width: 32 }) }), jsx("div", { className: "min-w-0 flex-1", children: jsx(SkeletonLines, { gap: 4, height: [11, 12], lines: 2, width: [128, 152] }) })] })) : (jsxs("div", { className: "flex flex-1 flex-col", children: [jsxs("div", { className: "flex flex-shrink-0 items-center gap-2", children: [icon ? (jsx("div", { className: "flex-shrink-0", children: jsx("div", { className: twMerge(cvaIconBackground({ disabled }), disabled ? "" : icon.backgroundColor), children: jsx(Icon, { color: "white", name: icon.name, size: "small", type: "solid" }) }) })) : null, image ? (jsx("div", { className: "flex-shrink-0", children: jsx("div", { className: twMerge(cvaIconBackground({ disabled }), disabled ? "" : image.backgroundColor || "bg-gray-100"), children: jsx("img", { alt: image.alt, className: "aspect-square h-8 w-8 rounded-md border border-neutral-200 object-contain", src: image.src }) }) })) : null, jsxs("div", { className: "min-w-0 flex-1", children: [jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsx(Text, { className: cvaTitleCard({ disabled }), size: "medium", weight: "bold", children: title }), firstTag ? (jsx(Tag, { className: "shrink-0", color: disabled ? "unknown" : firstTag.color, size: "small", children: firstTag.title })) : null] }) }), jsx(Text, { className: cvaDescriptionCard({ disabled }), size: "small", type: "p", children: description })] })] }), children] })), secondTag ? (jsx(Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }) }));
+};
+
+/**
+ * PreferenceCardGroup allows multiple PreferenceCards to work together as a group.
+ */
+const PreferenceCardGroup = ({ cards, selectedValue, onSelectionChange, groupId, isRadioMode = false, disabled = false, loading = false, "data-testid": dataTestId, }) => {
+    if (isRadioMode) {
+        return (jsx(RadioGroup, { "data-testid": dataTestId, disabled: disabled, id: groupId, onChange: event => onSelectionChange(event.target.value), value: typeof selectedValue === "string" ? selectedValue : "", children: cards.map(card => (jsx(PreferenceCard, { disabled: disabled, ...card, input: {
+                    type: "radio",
+                    checked: selectedValue === card.id,
+                    value: card.id,
+                }, loading: loading, onClick: () => {
+                    if (!disabled && !loading) {
+                        onSelectionChange(card.id);
+                    }
+                } }, card.id))) }));
+    }
+    return (jsx("div", { className: "flex flex-col gap-2", "data-testid": dataTestId, id: groupId, children: cards.map(card => (jsx(PreferenceCard, { ...card, disabled: disabled, input: {
+                type: card.input?.type === "toggle" ? "toggle" : "checkbox",
+                checked: Array.isArray(selectedValue) ? selectedValue.includes(card.id) : false,
+                handleInputChange: () => {
+                    const currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+                    const newValues = currentValues.includes(card.id)
+                        ? currentValues.filter(v => v !== card.id)
+                        : [...currentValues, card.id];
+                    onSelectionChange(newValues);
+                },
+            }, loading: loading }, card.id))) }));
 };
 
 /*
@@ -242,4 +195,4 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
  */
 setupLibraryTranslations();
 
-export { ConfirmationDialogContextProvider, PreferenceCard };
+export { PreferenceCard, PreferenceCardGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-compound-components",
-  "version": "1.7.159",
+  "version": "1.7.166",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,15 +9,12 @@
   "dependencies": {
     "react": "19.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-core-hooks": "1.7.121",
-    "@trackunit/react-components": "1.10.83",
-    "@trackunit/react-modal": "1.8.147",
-    "@trackunit/css-class-variance-utilities": "1.7.107",
-    "@trackunit/react-form-components": "1.8.158",
-    "@trackunit/i18n-library-translation": "1.7.128",
-    "@trackunit/shared-utils": "1.9.107",
-    "@trackunit/ui-icons": "1.7.108",
-    "@trackunit/iris-app-runtime-core-api": "1.7.117"
+    "@trackunit/css-class-variance-utilities": "1.7.113",
+    "@trackunit/react-form-components": "1.8.164",
+    "@trackunit/i18n-library-translation": "1.7.134",
+    "@trackunit/shared-utils": "1.9.113",
+    "@trackunit/ui-icons": "1.7.114",
+    "@trackunit/react-components": "1.10.89"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/PreferenceCard/PreferenceCard.d.ts

@@ -20,6 +20,14 @@ export interface PreferenceCardProps extends CommonProps, MappedOmit<VariantProp
         name: IconName;
         backgroundColor: string;
     };
+    /**
+     * Custom image to display instead of an icon
+     */
+    image?: {
+        src: string;
+        alt: string;
+        backgroundColor?: string;
+    };
     /**
      * Input component to display in the card
      */
@@ -31,6 +39,7 @@ export interface PreferenceCardProps extends CommonProps, MappedOmit<VariantProp
     } | {
         type: "radio";
         checked: boolean;
+        value: string;
         tooltipText?: string;
     };
     /**
@@ -69,4 +78,4 @@ export interface PreferenceCardProps extends CommonProps, MappedOmit<VariantProp
  * with various states and visual treatments.
  * It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
  */
-export declare const PreferenceCard: ({ title, description, icon, input, firstTag, secondTag, disabled, loading, className, "data-testid": dataTestId, children, onClick, }: PreferenceCardProps) => ReactNode;
+export declare const PreferenceCard: ({ title, description, icon, image, input, firstTag, secondTag, disabled, loading, className, "data-testid": dataTestId, children, onClick, }: PreferenceCardProps) => ReactNode;

package/src/PreferenceCard/PreferenceCard.stories.d.ts

@@ -3,7 +3,7 @@ import { ReactElement } from "react";
 import { PreferenceCardProps } from "./PreferenceCard";
 declare const meta: {
     title: string;
-    component: ({ title, description, icon, input, firstTag, secondTag, disabled, loading, className, "data-testid": dataTestId, children, onClick, }: PreferenceCardProps) => import("react").ReactNode;
+    component: ({ title, description, icon, image, input, firstTag, secondTag, disabled, loading, className, "data-testid": dataTestId, children, onClick, }: PreferenceCardProps) => import("react").ReactNode;
     args: {};
     tags: string[];
     parameters: {

package/src/PreferenceCard/PreferenceCardGroup.d.ts

@@ -9,7 +9,9 @@ export interface PreferenceCardGroupProps extends CommonProps {
     /**
      * Include your card data here to showcase multiple PreferenceCard components
      */
-    cards: Array<PreferenceCardProps>;
+    cards: Array<PreferenceCardProps & {
+        id: string;
+    }>;
     /**
      * The currently selected value(s)
      */

package/src/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./ConfirmationDialog/ConfirmationDialogContextProvider";
 export * from "./PreferenceCard";
+export * from "./PreferenceCard/PreferenceCardGroup";

package/translation.cjs.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs10.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs11.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs12.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs13.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs14.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs15.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs16.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs17.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs2.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs3.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs4.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs5.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs6.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs7.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs8.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.cjs9.js

@@ -1,10 +1,7 @@
 'use strict';
 
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 exports.default = translation;

package/translation.esm.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm10.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm11.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm12.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm13.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm14.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm15.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm16.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm17.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm2.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm3.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm4.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm5.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm6.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm7.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm8.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/translation.esm9.js

@@ -1,8 +1,5 @@
 var translation = {
-	"confirmationDialog.default.message": "Are you certain that you wish to proceed with this action?",
-	"confirmationDialog.default.primarybutton": "Confirm",
-	"confirmationDialog.default.secondarybutton": "Cancel",
-	"confirmationDialog.default.title": "Please confirm this action"
+	
 };
 
 export { translation as default };

package/src/ConfirmationDialog/ConfirmationDialogContextProvider.d.ts

@@ -1,10 +0,0 @@
-import { ReactElement, ReactNode } from "react";
-export interface ConfirmationDialogProviderProps {
-    children: ReactNode;
-}
-/**
- * ConfirmationDialogContextProvider
- *
- * Provides confirmation dialog context and manages modal state with Promise-based resolution
- */
-export declare const ConfirmationDialogContextProvider: ({ children }: ConfirmationDialogProviderProps) => ReactElement;

package/src/ConfirmationDialog/ConfirmationDialogModal.d.ts

@@ -1,12 +0,0 @@
-import { CommonProps } from "@trackunit/react-components";
-import { UseModalReturnValue } from "@trackunit/react-modal";
-import { ReactElement } from "react";
-import { ConfirmationDialogProps } from "./useConfirmationDialog.demo";
-export interface ConfirmationDialogModalProps extends Pick<ConfirmationDialogProps, "title" | "message" | "primaryActionLabel" | "secondaryActionLabel" | "primaryActionType">, UseModalReturnValue, CommonProps {
-    handlePrimaryActionClick: () => void;
-    handleSecondaryActionClick: () => void;
-}
-/**
- *
- */
-export declare const ConfirmationDialogModal: ({ title, message, handlePrimaryActionClick, handleSecondaryActionClick, secondaryActionLabel, primaryActionType, primaryActionLabel, ...modalProps }: ConfirmationDialogModalProps) => ReactElement;

package/src/ConfirmationDialog/useConfirmationDialog.demo.d.ts

@@ -1,41 +0,0 @@
-import { ConfirmationDialogProps as ConfirmationDialogPropsActual } from "@trackunit/iris-app-runtime-core-api";
-import { ReactElement, ReactNode } from "react";
-export interface ConfirmationDialogProps extends ConfirmationDialogPropsActual {
-    /**
-     * The heading of the modal.
-     */
-    title: string;
-    /**
-     * The content to show in the modal.
-     */
-    message: string | ReactNode;
-    /**
-     * The type of the primary action button.
-     * For actions like delete, the primary action button should be primary-danger.
-     */
-    primaryActionType: "primary" | "primary-danger";
-    /**
-     * The label of the primary action button.
-     * For example, "Delete user".
-     */
-    primaryActionLabel: string;
-    /**
-     * The label of the secondary action button.
-     * For example, "Cancel".
-     */
-    secondaryActionLabel: string;
-}
-/**
- * The useConfirmationDialog hook is used to show a confirmation dialog in the _**Manager**_ or _**Iris Apps**_.
- *
- * It returns a function that can be called with a ConfirmationDialogProps object.
- *
- * The function returns a promise that resolves to a UserInteractionType.
- *
- * The UserInteractionType is either "PRIMARY", "SECONDARY" or "CLOSE".
- *
- * The promise resolves when the user clicks the primary, secondary, or close button. (CLOSE is also triggered when the modal is dismissed in other ways.)
- *
- * **ATTENTION:** In the Manager and Iris Apps, this hook will "just work". If you are using the hook in a custom setup, you need to wrap your app in the ConfirmationDialogContextProvider.
- */
-export declare const UseConfirmationDialogDemoComponent: (props: ConfirmationDialogProps) => ReactElement;

package/src/ConfirmationDialog/useConfirmationDialog.stories.d.ts

@@ -1,18 +0,0 @@
-import { StoryObj } from "@storybook/react-webpack5";
-import { ReactElement } from "react";
-type Story = StoryObj<typeof meta>;
-declare const meta: {
-    title: string;
-    component: (props: import("./useConfirmationDialog.demo").ConfirmationDialogProps) => ReactElement;
-    parameters: {
-        docs: {
-            source: {
-                type: string;
-                excludeDecorators: boolean;
-            };
-        };
-    };
-};
-export default meta;
-export declare const PackageName: () => ReactElement;
-export declare const Default: Story;