mblabs-roccato-frontend-commons 0.0.44 → 0.0.45

package/dist/mblabs-roccato-frontend-commons.js

@@ -13889,7 +13889,7 @@ function jxe({
         u ? iU[t] : rU[t],
         t === "outline" && nU[e],
         u ? "border-[#079455]" : "border-gray-400",
-        o && "cursor-default"
+        o && !u && "cursor-default opacity-50"
       ),
       children: [
         /* @__PURE__ */ v.jsx(po, { condition: t === "outline", children: /* @__PURE__ */ v.jsx(nc, { className: X(MT[e], u ? OT[t] : kT[t], "stroke-4") }) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mblabs-roccato-frontend-commons",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "type": "module",
   "engines": {
     "node": ">=20.11.1"

package/src/components/atoms/CheckIcon/check-icon.test.tsx

@@ -89,7 +89,6 @@ describe('<CheckIcon />', () => {
 
         const checkIcon = screen.getByTestId('check-icon');
 
-        // Click to check
         fireEvent.click(checkIcon);
 
         expect(checkIcon).toHaveClass('bg-white', 'border-3', 'border-[#079455]');
@@ -123,7 +122,6 @@ describe('<CheckIcon />', () => {
 
         const checkIcon = screen.getByTestId('check-icon');
 
-        // Click to check
         fireEvent.click(checkIcon);
 
         expect(checkIcon).toHaveClass('bg-[#079455]', 'border-[#079455]');
@@ -150,11 +148,9 @@ describe('<CheckIcon />', () => {
 
       const checkIcon = screen.getByTestId('check-icon');
 
-      // Initial state - unchecked
       expect(checkIcon).toHaveClass('border-gray-400');
       expect(checkIcon.querySelector('svg')).toHaveClass('text-gray-400');
 
-      // Click to check
       fireEvent.click(checkIcon);
 
       // Should be checked
@@ -167,11 +163,9 @@ describe('<CheckIcon />', () => {
 
       const checkIcon = screen.getByTestId('check-icon');
 
-      // Click to check
       fireEvent.click(checkIcon);
       expect(checkIcon).toHaveClass('border-[#079455]');
 
-      // Click again to uncheck
       fireEvent.click(checkIcon);
       expect(checkIcon).toHaveClass('border-gray-400');
       expect(checkIcon.querySelector('svg')).toHaveClass('text-gray-400');
@@ -182,18 +176,14 @@ describe('<CheckIcon />', () => {
 
       const checkIcon = screen.getByTestId('check-icon');
 
-      // Initial - unchecked
       expect(checkIcon).toHaveClass('bg-gray-400');
 
-      // First click - checked
       fireEvent.click(checkIcon);
       expect(checkIcon).toHaveClass('bg-[#079455]');
 
-      // Second click - unchecked
       fireEvent.click(checkIcon);
       expect(checkIcon).toHaveClass('bg-gray-400');
 
-      // Third click - checked again
       fireEvent.click(checkIcon);
       expect(checkIcon).toHaveClass('bg-[#079455]');
     });
@@ -263,16 +253,11 @@ describe('<CheckIcon />', () => {
 
       const checkIcon = screen.getByTestId('check-icon');
 
-      // Initial state
       expect(checkIcon).toHaveClass('border-gray-400');
 
-      // Simulate pressing Enter
       fireEvent.keyDown(checkIcon, { key: 'Enter', code: 'Enter' });
 
-      // Note: The current implementation doesn't handle keyboard events
-      // This test documents the current behavior. You might want to add
-      // keyboard support in the future.
-      expect(checkIcon).toHaveClass('border-gray-400'); // Still unchecked
+      expect(checkIcon).toHaveClass('border-gray-400');
     });
 
     it('has button role implicitly', () => {

package/src/components/atoms/CheckIcon/check-icon.tsx

@@ -123,7 +123,7 @@ function CheckIcon ({
           isChecked ? CHECKED_BG[variant] : DEFAULT_BG[variant],
           variant === 'outline' && BORDER_SIZE[size],
           isChecked ? 'border-[#079455]' : 'border-gray-400',
-          disabled && 'cursor-default'
+          disabled && !isChecked && 'cursor-default opacity-50'
         )
       }
     >